.NET MVC JQuery函數沒有在表格行單擊事件中被觸發

Question

我在UI中有表格數據。當我點擊行中的詳細信息鏈接時，我想在同一頁面的div中顯示數據。當我點擊任何行的細節鏈接時，JQuery函數並沒有被解僱。

下面是我的代碼：

模型視圖類：

public class ItemViewModel 
{ 
    public Item item { get; set; } 
    public IEnumerable<Item> items { get; set; } 
} 

UI代碼：

@model Medhub.Models.ItemViewModel 

@{ 
    ViewBag.Title = "View"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>View</h2> 

<p> 
    @Html.ActionLink("Create New", "CreateEdit", new { controller = "Item" }, new { @class = "btn btn-primary" }) 
</p> 
<table align="center" height="10%" width="90%"> 
    <tr> 
     <td> 
      <div id="Items"> 
       <table style="vertical-align:top; height:200px" width="100%"> 
        <tr style="height:20px"> 
         <th> 
          @Html.DisplayName("Name") 
         </th> 
         <th> 
          @Html.DisplayName("Description") 
         </th> 
         <th> 
          @Html.DisplayName("Item Type") 
         </th> 
        </tr> 

        @if (Model != null) 
        { 
         foreach (var item in Model.items) 
         { 
          <tr style="height:15px"> 
           <td> 
            @Html.HiddenFor(model => item.ItemId) 
            @Html.DisplayFor(model => item.Name) 
           </td> 
           <td> 
            @Html.DisplayFor(model => item.Description) 
           </td> 
           <td> 
            @Html.DisplayFor(model => item.Type) 
           </td> 
           <td> 
            @Html.ActionLink("Edit", "CreateEdit", new { id = item.ItemId }) | 
            @Html.ActionLink("Details", "Item", new { id = item.ItemId }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.ItemId }) 
           </td> 
          </tr> 
         } 
        } 
       </table> 
      </div> 
     </td> 
    </tr> 
</table> 
<table> 
    <tr> 
     <td> 
      <div id="ItemDetails"> 
       @if (Model.item != null) 
       { 
        Html.RenderPartial("Details", Model.item); 
       } 
      </div> 
     </td> 
    </tr> 
</table> 

<script type="text/javascript"> 
    $(function() { 
     $("div.Items a").click(function (e) { 
      //e.preventDefault(); 
      var url = this.ref; 
      $("#ItemDetails").load(url); 
     }); 
    }); 
</script> 

控制器代碼：

List<Item> items = new List<Item>(); 
// GET: Item 
public ActionResult Item(int id = 0) 
{ 
     ItemViewModel itemVM = new ItemViewModel(); 
     itemVM.items = GetItems(); 
     if (id > 0) 
     itemVM.item = itemVM.items.FirstOrDefault(u => u.ItemId == id); 
     return View(itemVM); 
} 

任何線索？

Answer 1

首先，您正在等待名爲Items的類的點擊。這就是jquery代碼沒有被解僱的原因。你應該有

$("div#Items a").click(function (e) { 

其次，你需要檢查attribut href，而不是ref。此外，防止默認的需要存在，否則，你就會重新載入網頁

e.preventDefault(); 
var url = this.href; 

你不需要的RenderPartial頁面，就讓它空：

<div id="ItemDetails"> 
</div> 

雖然你的邏輯種作品，url加載的方式導致整個頁面被加載到ItemDetails部分。我建議在你的控制器，你創建的細節一個單獨的方法：

public ActionResult Details(int id) { 
     Item item = GetItem(id); 

     return View(item); 
    } 

    private Item GetItem(int id) { 
     return new Item() { Details = "details here" }; 
    }