如何在ASP.net MVC的同一頁面上顯示有關特定記錄的詳細信息

Question

我的觀點有兩個div，左邊的div包含所有可用的產品。 我想在右div的同一頁上顯示所選產品的詳細信息。 當我第一次加載頁面時，右div應該包含第一條記錄的詳細信息。 之后，當我單擊任何鏈接時，它應該更改詳細信息。 我是MVC和Entity Framework的新手。 我已經嘗試過，但是不知道。 如果要在單擊產品的超鏈接后在下一頁顯示詳細信息，可以執行此操作。 請嘗試解決我的問題。 謝謝！

Products.cshtml：

@model List<productList.Models.tbl_product>

<div class="product">
    <ul class="list">
        @foreach(var item in Model)
        {
            <li>
                <a href='@Url.Action("Product","Home",new {id = item.ProductId })'>
                     <span class="ProductName">@item.ProductName</span>
                </a>
            </li>
            </span></a>
</div>

<div class="productDetails">
    <ul class="listdetails">
        @foreach(var item in Model)
        {
            <li> 
                <span class="ProductName">@item.ProductName</span>
                <div class="ProductDesc">
                    @item.ProductDetails
                </div>
            </li>
        }

HomeController.cs：

public ActionResult Product()
{
    return View(dbentity.tbl_product.ToList());
}

Answer 1

使用RenderPartial進行第一次產品加載，然后使用jQuery ajax加載其他產品

加載第一個產品列表的控制器動作

public ActionResult Product()
{
  return View(dbentity.tbl_product.ToList());
}

PartialView.cshtml

@model Product

<label>Name:</label>@model.Name

在主視圖中

@model IList<Product>
<div class="product">
<ul class="list">
@foreach(var item in Model)
{
<li> <a href=@Url.Action("ProductDetail","Home",new {id=item.ProductId})'
<span class="ProductName"> @item.ProductName</span></a></li>    
}
</ul>
</div>

<div id="product-detail">
 @{Html.RenderPartial("PartialView", Model.FirstOrDefault());}
</div>

另外，您還需要采取其他措施來加載每種產品

public ActionResult ProductDetail(int id)
{
var model=products.Find(id);
return ("PartialView",model);
}

AJAX通話

$("div.product a").click(function(e){

  var url=this.href;
  $.get(url,{},function(data){
  $('#product-detail').html(data);
  });
  e.preventDefault();

});