如何在 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= “更新”）部分。 那么如何在同一个主视图中更新..？

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")');

注意：PartialViewResult 必须返回 PartialView(model); 和.cshtml page 部分页面