如何在MVC中的鏈接點擊主視圖中渲染局部視圖..？

Question

我有像下面的控制器行動方法將返回來自數據庫的所有細節。

public ActionResult Index() 
    { 
     BusDataContext db = new BusDataContext(); 
     List<BusDetails> buses = db.Bus.ToList(); 
     return View(buses); 
    } 

這將返回詳細列表到主視圖，這是強類型的視圖，如下所示。

@model IEnumerable<MVC_DAL.BusDetails> 
    <p> 
    @Html.ActionLink("Create New", "AddBus") 
    </p> 
<table class="table"> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.BusSrlNo) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.BusName) 
    </th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelIte => item.BusSrlNo) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.BusName) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id=item.BusSrlNo }) | 
     @*@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo }) |*@ 
     @Ajax.ActionLink("Details", "Details", new { id = item.BusSrlNo }, new AjaxOptions{UpdateTargetId="update" }) 
     @Html.ActionLink("Delete", "Delete", new { id = item.BusSrlNo }) 

     </td> 
    </tr> 
} 

</table> 

    <div id="update"> 

    </div> 

隨着模型類如

public class BusDetails 
{ 
    public int BusSrlNo { get; set; } 
    public string BusName { get; set; } 
} 

和細節ActionMethod由

public PartialViewResult Details(int id) 
    { 
     BusDataContext detail = new BusDataContext();  
     BusDetails bsdtledit = detail.Get_Edit(id); 
     return PartialView("Details",bsdtledit); 

    } 

通訊與上述模型類局部視圖低於：

@model MVC_DAL.BusDetails 

<div> 
    <h4>BusDetails</h4> 
    <hr /> 
    <dl class="dl-horizontal"> 
    <dt> 
     @Html.DisplayNameFor(model => model.BusSrlNo) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.BusSrlNo) 
    </dd> 

    <dt> 
     @Html.DisplayNameFor(model => model.BusName) 
    </dt> 

    <dd> 
     @Html.DisplayFor(model => model.BusName) 
    </dd> 

    </dl> 
</div> 
<p> 
    @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) | 
    @Html.ActionLink("Back to List", "Index") 
</p> 

所以，總體來說，我需要要在主視圖中顯示上面的局部視圖，只有在單擊主視圖中的詳細信息鏈接動作後纔會顯示上述局部視圖。以上代碼將單獨顯示不帶主視圖的細節，而不是在div（id =「update」）部分的相同頁面中更新。 那麼我如何更新相同的主視圖..？

Answer 1

這就是微軟推出Ajax.ActionLink的地方。這是一種選擇;我個人比較喜歡jQuery的更好，所以我這樣做：

$.ajax({ 

    type: "get", 
    url: "@Url.Action("Partial", "Controller"), 
    success: function(d) { 
    /* d is the HTML of the returned response */ 
    $("#SomeParentIDForSection").html(d); //replaces previous HTML with action 
    } 
}); 

只要確保你的控制器返回的局部視圖：

public ActionResult Partial() 
{ 
    var model = .. 
    //init work 

    return PartialView(model); 
} 

更多信息請參見與這些引用一些其他的方法：

• Render Partial View Using jQuery in ASP.NET MVC
• http://forums.asp.net/t/2019844.aspx?How+to+load+PartialView+using+Ajax+on+button+click+ASP+NET+MVC

Answer 2

假設你會告訴你在下面的div局部視圖：

<div class="js-bus-details"> 
</div> 

你可以做一個Ajax調用和更新這個div裏面的HTML。這可以完成如下：

@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo, @class="js-bus-details-link" }) 

然後將下面的腳本放在頁面的底部。

<script> 
$(function(){ 
    $(".js-bus-datails-link").click(function(){ 
     var busId = $(this).data("id"); 
     $.ajax({ 
      method: "GET" 
      url: "", // Here you have to place the relative url to your action 
      data: { id: busId } 
      cache: false 
      success: function(e){ 
       $(".js-bus-details").html(e); 
      } 
     }); 
    }) 
}) 
</script> 

Answer 3

通過點擊事件在javascript：

$("#myCodes").load('@Url.Action("PartialViewResult", "Controller_Name")'); 

N.B：PartialViewResult必須返回PartialView(model); 和.cshtml頁面的部分頁面