在jQuery對話框中顯示ASP MVC視圖

Question

我有一個ASP.NET MVC視圖，並希望在jQuery對話窗口中顯示一個詳細視圖。最後，我打算在jQuery數據表中顯示一些鏈接來修改/刪除或僅顯示行項目上的細節。

但基本上我試圖顯示沒有任何表的對話框，但它不起作用。 我得到了以下JavaScript錯誤：類型錯誤：$（...）對話框是不是一個函數

這是我的觀點的內容：

@model IList<CarRentalService.Core.DomainObjects.Car> 

@{ 
ViewBag.Title = "Overview of existing Cars"; 
Layout = "~/Views/Shared/_LayoutPartially.cshtml"; 
} 

@section PageScripts{ 

<script type="text/javascript"> 

    $(document).ready(function() { 
     var carsTable = $('#CarsTable').dataTable(
      { 
       "aoColumns": [ 
        { "sWidth": "10%" }, // ID 
        { "sWidth": "20%" }, // Kennzeichen 
        { "sWidth": "15%" }, // Marke 
        { "sWidth": "15%" }, // Leistung 
        { "sWidth": "15%" }, // Marke 
        { "sWidth": "15%" }, // Sacharbeiter 
        { "sWidth": "10%" } // For later usage of buttons 
       ] 
      }); 
    }); 

    function openProductDetailsDialog(id) { 
     $.ajax({ 
      type: "GET", 
      url: encodeURI('@Url.Action("EditCar", "Staffer")' + "?id=" + id), 
      cache: false, 
      dataType: 'html', 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       $("#CarsDetailsDialogDiv").html(errorThrown); 
      }, 

      success: function(data, textStatus, XMLHttpRequest) { 
       $("#CarsDetailsDialogDiv").html(data); 
      }, 

      complete: function(XMLHttpRequest, textStatus) { 

       $('#CarsDetailsDialogDiv').dialog({ 
        modal: true, 
        width: "300px"/*, 
        close: function(event, ui) { $("#ProductDetailsDialogDiv").html(""); }, 
        buttons: { 
         "Ok": function() { $(this).dialog("close"); } 
        }*/ 
       }); 
      } 
     }); 
    } 

</script> 
} 

<h2>@ViewBag.Title</h2> 
<h2>@ViewBag.Messsage</h2> 
<a href="javascript:openProductDetailsDialog(1);">Edit car</a> 

<div class="carsTableContainer"> 
<table id="CarsTable" class="carTable"> 
    <thead> 
     <tr> 
      <th class="id"> 
       Id 
      </th> 
      <th class="registration"> 
       Kennzeichen 
      </th> 
      <th class="trademark"> 
       Marke 
      </th> 
      <th class="modell"> 
       Modell 
      </th> 
      <th class="enginepower"> 
       Leistung 
      </th> 
      <th class="staffer"> 
       Sacharbeiter 
      </th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     @{ 
      if (Model != null) 
      { 
       foreach (var item in Model) 
       { 
        <tr> 
         <td> 
          @item.Id 
         </td> 
         <td> 
          @item.Registration 
         </td> 
         <td> 
          @item.Trademark 
         </td> 
         <td> 
          @item.Modell 
         </td> 
         <td> 
          @item.EnginePower 
         </td> 
         <td> 
          @item.Responsible.Username 
         </td> 
         <td> 

         </td> 
        </tr> 
       } 
      } 
     } 
    </tbody> 
</table> 


</div> 

<div class="dummy"> 

</div> 

<div id="CarsDetailsDialogDiv" title="Product details"> 
</div> 

我發現了很多線索的周圍處理這個問題的網絡 - 但沒有任何對我有用，所以我要求你在這個主題上提供一些幫助。

導致一些我發現是錯誤的JavaScript庫，其中包括，在這裏一個從MVC生產所呈現的HTML列表中的解決方案：

<link href="/Content/site.css" rel="stylesheet"/> 
<link href="/Content/demo_table.css" rel="stylesheet"/> 
<script src="/Scripts/modernizr-2.5.3.js"></script> 
<script src="/Scripts/jquery-1.7.1.js"></script> 
<script src="/Scripts/jquery.dataTables.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.js"></script> 

Answer 1

您是否嘗試過初始化的對話框中你$(document).ready(function() 然後致電$("#CarsDetailsDialogDiv").dialog("open");

$(document).ready(function() { 
    $('#CarsDetailsDialogDiv').dialog({ 
       modal: true, 
       width: "300px", 
       autoOpen: false 
    }); 
}); 

function openProductDetailsDialog(id) { 
    $.ajax({ 
     type: "GET", 
     url: encodeURI('@Url.Action("EditCar", "Staffer")' + "?id=" + id), 
     cache: false, 
     dataType: 'html', 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      $("#CarsDetailsDialogDiv").html(errorThrown); 
     }, 

     success: function(data, textStatus, XMLHttpRequest) { 
      $("#CarsDetailsDialogDiv").html(data); 
     }, 

     complete: function(XMLHttpRequest, textStatus) { 
      $("#CarsDetailsDialogDiv").dialog("open"); 
     } 
    }); 
}