从自己的 WebGrid 中的链接更新部分视图答案

【问题标题】：Updating a Partial View From A Link In Its Own WebGrid从自己的 WebGrid 中的链接更新部分视图
【发布时间】：2014-09-17 22:17:02
【问题描述】：

这几乎是我开发 MVC 的第三天，我希望这是一个简单的问题。基本上我在局部视图中有一个 WebGrid，它有一个通过控制器执行更新的列。

控制器随后成功返回更新后的局部视图，但它用结果替换整个页面，而不仅仅是局部视图。

这是部分视图：

@model Site.Models.UsersForCompanyModel

@{
    ViewBag.Title = "Admin User Management Grid";
}

    @{
        var grid = new WebGrid(

        Model.Users,
        ajaxUpdateContainerId: "divUserGrid",
        fieldNamePrefix: "gridItems_",
        pageFieldName: "paging",
        sortFieldName: "sortField"
        );

        grid.Pager(WebGridPagerModes.All);

        var userColumns = new List<WebGridColumn>
        {
            new WebGridColumn {ColumnName = "Email", Header = "E-Mail", CanSort = true},
            new WebGridColumn {Header = "Lock", Format = user => user.isAdmin ? Html.Raw("n/a") :  Html.ActionLink(user.IsLocked ? "Unlock" : "Lock", "ToggleLock", new {userId = user.Id, companyId = Model.CompanyId}) },
        };

        <div id="divUserGrid">
            @grid.GetHtml(
             htmlAttributes: new { id = "userGrid" },
             tableStyle: "table table-striped table-bordered",
             columns: userColumns
             )
        </div>
    }

...这是控制器代码：

    public ActionResult GetUsersForCompany(string companyId)
    {
        using (var service = new ManagementService())
        {
            var model = GetUsersForCompany(companyId, service);
            return PartialView("AdminUserManagement_Grid", model);
        }
    }

    public ActionResult ToggleLock(string companyId, string userId)
    {
        using (var service = new ManagementService())
        {
            var user = service.GetUserById(userId);
            service.LockUser(userId, !user.IsLocked);
            return GetUsersForCompany(companyId);
        }
    }

用 ToggleLock() 返回的结果更新局部视图的最简单方法是什么？

有没有办法通过 Html.ActionLink 或 Ajax.ActionLink 以声明方式进行？

【问题讨论】：

标签： asp.net-mvc razor asp.net-mvc-5 webgrid

【解决方案1】：

最简单的方法是将部分视图放在容器 div 中，如下所示

<div id="PartialViewDivId">
@{ Html.RenderAction("GetUsersForCompany",model.CompanyId);}
</div>

然后使用jQuery加载更新后的视图在某些点击事件中

var companyId= read company id
var userId= read user id 
var url = "mycontroller/ToggleLock?companyId="+companyId+"&userId"+userId;
$("#PartialViewDivId").load(url)

【讨论】：

【解决方案2】：

谢谢，Kartikeya。部分归功于答案，尽管我发现了一种不需要手动 HTML/事件连接和自定义 javascript 的声明性方式。

关键是简单地切换到 Ajax.ActionLink（而不是使用 Html.ActionLink），然后设置我的部分视图占位符 ID（我有一个类似于 Kartikeya 示例的 div 设置）和控制，像这样：

new WebGridColumn {Header = "Lock", 
    Format = user => user.isAdmin ? Html.Raw("n/a") : 
            Ajax.ActionLink( user.IsLocked ? "Unlock" : "Lock",
                 "ToggleLock",
                  new{userId = user.Id, companyId = Model.CompanyId },
                 new AjaxOptions
                 {
                     UpdateTargetId="userGridPlaceholder", // <-- my grid placeholder
                     InsertionMode = InsertionMode.Replace, 
                     HttpMethod = "GET" 
                 })

【讨论】：