c# - 如何在 MVC 中单击链接时在主视图中呈现局部 View ？

Question

我有如下所示的 Controller 操作方法，将从数据库返回所有详细信息。

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

这会将详细信息列表返回到主视图，它是如下所示的强类型 View 。

@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);

    }

与上述模型类对应的部分 View 如下:

   @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>

所以总的来说，只有在我单击主视图中的详细信息链接操作后，我才需要在主视图中显示部分 View 上方。上面的代码将在没有主视图的情况下单独显示详细信息，而不是在 div 的同一页面中更新(id = “更新”)部分。那么我如何在同一个主视图中更新..？

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
   }
});

只需确保您的 Controller 返回局部 View :

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