Question

我有控制器动作方法，如下所示将返回DB的所有细节。

 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 = ＆＃34;更新＆＃34）部分。那么我如何在同一主视图中更新..？

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

有关更多信息和其他一些方法，请参阅这些参考资料：

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页面部分页面

如何在MVC中链接点击的主视图中渲染局部视图..？

3 个答案: