Question

我想在同一页面上显示特定记录的详细信息，用户可以从产品名称列表中选择产品，一旦用户点击链接，特定产品的详细信息应显示在另一侧页面即其他div。我通过创建部分View和Ajax来尝试它，但细节没有显示在单独的页面上，打开一个新的空白页面，其名称为Partialview，并在那里显示记录，但我想要在同一页面上的详细信息.ProductName来自数据库，第一次加载页面时必须包含默认情况下第一条记录的详细信息，即工作正常。请尝试解决此问题。感谢

HomeController.cs

public class HomeComtroller:Controller
{
dbProductEntity Productdbentity=new dbProductEntity();

public ActionResult ProductDetails(int id)
{
var query=Productdbentity.tbl_product.First(c=>c.ProductId==id);
return PartialView("PartialView",query);
}

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

PartialView.cshtml

@model MvcProject.Models.tbl_product

<label> @Model.ProductName </label>
<label> @Model.ProductDesc </label>

产品页面

@model List<MvcProject.Models.tbl_product>

<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$(div.product a").click(function(e){
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
});
</script>
</head>

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

<div class="product-detail">
@{Html.RendererPartial("PartialView",Model.FirstOrDefault());}
</div>
</div>
</body>
</html>

Answer 1

您应该通过从.click事件处理程序返回false来取消锚点的默认操作：

$(document).ready(function() {
    $(div.product a").click(function(e) {
        var url=this.ref;
        $get(url,{},function(data) {
            $('#product-detail').html(data);
        });
    });
    return false; // <-- That's the important bit you were missing
});

如果你没有从.click处理程序返回false，浏览器将只关注你的锚所指向的链接，停止你可能已经启动的任何javascript执行。返回false可确保浏览器不会重定向远离当前页面，从而使您可以执行AJAX请求并更新当前视图。

Answer 2

我认为你错过了“。”在下面代码的第一行“$”之后。在第二行中，由于“product-detail”是一个类名，所以在jQuery选择器中使用“。” （不是“＃”）在班级名称之前。以下是更正后的代码：

$.get(url,{},function(data) {
$('.product-detail').html(data);
});

有关详情，请查看http://api.jquery.com/jQuery.get/

Answer 3

您必须停止链接上的Click事件的默认行为。

<script>
   $(function(){
   $("div.product a").click(function(e){
      e.preventDefault();
      var url=this.ref;
      $('.product-detail').load(url);
      });
   });
</script>

部分视图未在asp.net mvc中的同一页面上呈现

3 个答案: