如何在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页面的部分页面