ASP.NET + Bootstrap Modal远程页面加载

时间:2014-01-20 21:35:42

标签: javascript jquery asp.net asp.net-mvc twitter-bootstrap

我正在使用ASP.NET MVC和Bootstrap作为视图。我在_Layout.cshtml页面上有一个按钮,我想用它来加载一个模态来显示项目目录中的另一个页面。

在Views / Shared中的_Layout页面上的按钮:

<a class="btn btn-primary btn-lg" role="button" data-toggle="modal" href="Modals/testModal.html" data-target="#signUpModal">Sign up</a>

我要加载的页面存储在Views / Shared / Modals / testModal.html。

testModal.html:

<div class="modal fade" id="signUpModal">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Sign up form</h4>
        </div>
        <div class="modal-body">


            <div class="input-group">
                <input type="text" class="form-control" placeholder="Username">
                <br />
                <br />
                <input type="text" class="form-control" placeholder="Password">
                <br />
                <br />
            </div>

        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Create User</button>
        </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

当我将模态包含在同一页面上时它工作正常,但我似乎无法以这种方式加载它。

1 个答案:

答案 0 :(得分:1)

您不能在Views文件夹中为静态文件提供服务,它只适用于MVC。

您需要创建另一个文件夹并从那里引用它们,即

/Modals/testModal.html

您还需要向RegisterRoutes添加一个忽略路由,它应该如下所示:

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            // Below is the ignore rule
            routes.IgnoreRoute("{file}.html");

            // custom routing if any
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

Screen shot displaying static file

有关详细信息,请参阅此处:

http://haacked.com/archive/2008/07/14/make-routing-ignore-requests-for-a-file-extension.aspx/