Question

我的视图中有两个div，左边包含所有可用的产品。我想在右侧div中显示在同一页面上选择的产品的详细信息。当我第一次加载页面时，右侧div应该包含第一个记录的详细信息。之后，当我点击任何链接时，它应该更改细节。我是MVC和实体框架的新手。我试过这样做，但不知道。如果我想在点击产品的超链接后在下一页显示详细信息，我可以这样做。请尝试解决我的问题。谢谢！

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 CALL

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

如何在ASP.net MVC中显示同一页面上的特定记录的详细信息

1 个答案: