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

我想要在同一页面上显示特定记录的详细信息，用户可以从产品名称列表中选择产品，只要用户单击链接具体产品的细节应显示在页面的另一端，即其他部分。我试图通过创建部分视图和Ajax，但细节不显示在单独的页面上打开一个新的空白页与Partialview的名称和记录显示在那里，但我想要在同一页上的详细信息.ProductName正在从数据库，第一次加载页面时，它必须包含默认情况下第一条记录的详细信息，即工作正常。请尝试解决这个问题。由于部分视图不在asp.net中的同一页上呈现mvc

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>

来源

2013-11-23 user2802591

你应该返回从你的。点击虚假取消锚的默认操作事件处理程序：

$(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请求并更新当前视图。

来源

2013-11-23 15:59:20

谢谢你的回答，但它并没有解决这个问题，它仍然重定向到/ home/PartialView/2，当我点击链接以显示产品细节.... – user2802591

确保你已经包括**此脚本之前，您的页面**中的'jQuery.js'。还请检查您的Web浏览器控制台中的一些JavaScript错误。 –

是的，我已经包含了jquery-1.4.1.min.js和jquery-1.5.1.js，但我无法从这个问题出现的地方得到 – user2802591

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

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

详细看看http://api.jquery.com/jQuery.get/

来源

2013-11-25 07:05:27 Snesh

你必须停止点击一个链接事件的默认行为。

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

来源

2013-11-25 15:10:46 Imran

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

回答

相关问题