2017-12-18 584 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>  

這是正確的。

另一個是刪除細節視圖中的模板標記。

相關問題