在ASP.NET MVC的同一页面上未呈现部分视图

Question

我想在同一页面上显示特定记录的详细信息，用户可以从产品名称列表中选择产品，并且用户单击链接后，特定产品的详细信息应立即显示在页面的另一侧，即其他DIV。我通过创建局部View和Ajax进行了尝试，但详细信息未显示在单独的页面上，而是使用Partialview的名称打开了一个新的空白页面并在其中显示了记录，但是我想在同一页面上显示详细信息。数据库，第一次加载页面时，默认情况下必须包含第一条记录的详细信息，即工作正常。 请尝试解决此问题。 谢谢

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 个解决方案

解决方案1
1 2013-11-23 15:59:20

解决方案2
0 2013-11-25 07:05:27

解决方案3
0 2013-11-25 15:10:46

在ASP.NET MVC的同一页面上未呈现部分视图

问题描述

3 个解决方案

解决方案1 1 2013-11-23 15:59:20

解决方案2 0 2013-11-25 07:05:27

解决方案3 0 2013-11-25 15:10:46

解决方案1
1 2013-11-23 15:59:20

解决方案2
0 2013-11-25 07:05:27

解决方案3
0 2013-11-25 15:10:46