部分視圖不在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

回答

相關問題