Question

我打算在打开细节时实现bootstrap模态窗口。模态窗口在ajax调用时打开。问题是，我只能打开一次。它以整个模板打开，而不应该在第二次尝试时出错：

未捕获错误：模态不是函数

然后我收到此错误，无法再打开模态窗口。

主视图的容器：

<div id="data-container">
    @Html.Action("PartialDisplay", "Disp")
</div>

我在局部视图中显示所有数据，因此控制器如下所示：

public ActionResult Display()
        {
            return View();
        }
        public PartialViewResult PartialDisplay(int[] checkId)
        {
            if (checkId == null)
            {
               [my code]
                return PartialView(viewModel);
            }

详细信息视图：

@{
    ViewBag.Title = "PartialDisplay";
    Layout = null;
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<table class="table">
    <thead>
        <tr>
            <th>Nazev Jidla</th>
            <th>Kategorie</th>
            <th>Akce</th>

        </tr>
    </thead>
    <tbody>
        @foreach (Jidlo jidlo in Model.Jidlos)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => jidlo.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => jidlo.Category.popis)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = jidlo.JidloID }) |
                    @Ajax.ActionLink("Details","Details", new { id = jidlo.JidloID }, new AjaxOptions(){ UpdateTargetId = "modalContent", InsertionMode = InsertionMode.Replace, OnBegin = "openModalWindow" }) |
                    @Html.ActionLink("Delete", "Delete", new { id = jidlo.JidloID }, new { onclick = "return confirm('opravdu smazat polozku " + jidlo.name + "?');" })
                </td>
            </tr>
        }
    </tbody>
</table>

<script type="text/javascript">
    function openModalWindow() {
        $('#myModal').modal("show");
    }
</script>

控制器操作：

public ActionResult Details(int id = 0)
        {
            Jidlo jidlo = db.Jidlos.Find(id);
            if (Request.IsAjaxRequest())
            {
                return PartialView(jidlo);
            }
            else {
            return View(jidlo);
            }
        }

包括布局脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery-3.2.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.js")"></script>

我在这里缺少什么？我试图改变加载的优先级，并结合更多的东西，比如将jQuery.noConflict添加到脚本中，但仍然没有。

Answer 1

问题是加载jquery脚本两次

<script src="@Url.Content("~/Scripts/jquery-3.2.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.js")"></script>

这是正确的。

另一个是删除详细信息视图中的模板标记。

Asp.net MVC - 第二次尝试打开模态窗口后出错

1 个答案: