2017-12-18 549 views
1

我试图在打开详细信息时实现引导模式窗口。模态窗口在ajax调用中打开。问题是,我只能打开一次。它会打开整个模板,但它不应该与第二次尝试过程中出现了错误:Asp.net MVC - 第二次尝试打开模式窗口后的错误

Uncaught error: modal is not a function

然后我得到这个错误,无法打开模态窗口了。

的容器的主视图:

<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添加到脚本中,但仍然没有任何结果。

回答

0

问题是加载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>  

这是正确的。

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

相关问题