Question

这是我开发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以声明方式进行？

Answer 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)

Answer 2

谢谢，Kartikeya。虽然我找到了一种不需要手动HTML /事件连接和自定义javascript的声明方式，但答案仍然存在部分功劳。

关键是简单地切换到Ajax.ActionLink（而不是使用Html.ActionLink），然后设置我的局部视图占位符ID（我有一个类似于Kartikeya的示例的div设置）和其他一些参数控件的AjaxOptions，如下所示：

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

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

2 个答案: