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

Question

我正在使用带有 Bootstrap 的 ASP.NET MVC View 。我在 _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 -->

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

Answer 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 }
            );
        }

有关更多信息，请参见此处:

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