MVC 5 和 Bootstrap 模态的怪异

Question

我正在使用 Bootstrap 模式通过 MVC 5 应用程序工作。在尝试使用来自不同网页的模式访问特定的部分页面时，我遇到了一些不一致的情况。其中一种模式工作正常，另一种则根本不起作用。

（我在学习如何做到这一点时参考了Modals in MVC 5 - 所以我可能在某个地方犯了一个愚蠢的错误，但我不这么认为）。

我将从相关代码开始，然后在底部我将回顾我尝试过的内容。

modalform.js（这几乎是从上述参考对象复制/粘贴的）

$(function () {

$.ajaxSetup({ cache: false });

$("a[data-modal]").on("click", function (e) {

    // hide dropdown if any
    $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

    $('#myModalContent').load(this.href, function () {

        $('#myModal').modal({
            backdrop: 'static',
            keyboard: true
        }, 'show');

        bindForm(this);
    });

    return false;
    });
});

模态部分页面（创建）

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Add New Site</h4>
</div>
@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="modal-body">
    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.OrganisationSelected, htmlAttributes: new { @class = "control-label col-lg-3" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => Model.OrganisationSelected, Model.Organisations, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.OrganisationSelected, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.SiteName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SiteAbbr, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteAbbr, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteAbbr, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SiteNotes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteNotes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteNotes, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Cancel</button>
            <input class="btn btn-primary" type="submit" value="Save" />
        </div>
    </div>

</div>
}

AllSites.cshtml（这个工作正常 - 是的，我知道 for 循环不是最佳实践。）

@model IEnumerable<DRPlanner.ViewModels.OrganisationSiteViewModel>
@using DRPlanner.Helpers
@{
    ViewBag.Title = "All Sites";
}

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>
@for (int i = 0; i < Model.Count(); i++)
{
    if ((i == 0) || (Model.ElementAt(i).OrgId != Model.ElementAt(i - 1).OrgId))
    {
        <strong>                
            @Html.RouteLink(Model.ElementAt(i).OrganisationName.ToString() + " (" + Model.ElementAt(i).OrganisationAbbr.ToString() + ")", "OrgShort", new { org = Model.ElementAt(i).OrgId }) 
        </strong>
        @:<ul class="list-unstyled">                
    }

    if (Model.ElementAt(i).SiteName != "")
    {
        <li>
            @Html.RouteLink(Model.ElementAt(i).SiteName.ToString(), "SiteShort", new { org = Model.ElementAt(i).OrgId, site = Model.ElementAt(i).SiteId })
        </li>
    }
    if ((i == Model.Count() - 1) || (!Model.ElementAt(i).OrganisationAbbr.Equals(Model.ElementAt(i + 1).OrganisationAbbr)))
    {
            @:</ul>
        }
    }
<br />
    @Html.RouteLink("New Organisation", "NewOrg", new { controller = "Organisation", action = "Create" })
    @Html.RouteLink("New Site", "NewSite", new { controller = "Site", action = "Create" }, new { data_modal = "", id = "btnCreate", @class = "btn btn-small btn-primary" })

Sites.cshtml（这个不行）

@model IEnumerable<DRPlanner.ViewModels.OrganisationSiteViewModel>
@{ViewBag.Title = "Sites";}
Sites For @ViewBag.OrganisationName

<ul class="list-unstyled">

    @foreach (var item in Model)
{
    <li>@Html.RouteLink(item.SiteName.ToString(), "SiteShort", new { site = item.SiteId })</li>    
}
</ul>
@Html.ActionLink("Add Site", "Create", "Site", null, new { data_modal = "", id = "btnCreate", @class = "btn btn-small btn-primary" })

<script src="~/Scripts/modalform.js"></script>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
    <div class="modal-content">
        <div id='myModalContent'></div>
    </div>
</div>
</div>

我做了什么： 我在 VS2013 调试器中调试了 modalform.js 的运行，发现当它从 AllSites.cshtml 运行时，$('#myModal').modal 指的是一个函数（我不知道这个函数是如何或从哪里拉出来的，抱歉），但是当它在 Site.cshtml 上运行时，$('#myModal').modal 未定义。所以我知道这就是错误所在：我对如何解决这个问题一无所知（或者一般来说可能只是一无所知）。另一条信息：Sites.cshtml 和 AllSites.cshtml 都是存在 Create 操作的不同控制器的操作。基本上，我试图让模态可以从站点内的多个位置访问。任何帮助都非常感谢（我还没有 15 个代表，所以以后需要按比例投票）。

错误：0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法“模态”

Answer 1

好的，我找到了问题。

_Create.cshtml 类有一些不必要的 javascript 和 css 文件被引用/加载。似乎其中一个（或多个）引起了冲突，一旦我评论/删除了这些不必要的引用，冲突（自然）就消失了。

感谢大家的时间和努力。问题现已解决！