Kendo MVC：向网格添加编辑、删除按钮

Question

假设我有以下 table:

    @Html.Kendo().Grid(Model).Name("Staff").Columns(x =>
    {
        x.Bound(y => y.StaffId);
        x.Bound(y => y.FirstName);
        x.Bound(y => y.LastName);
        x.Bound(y => y.Email);
        x.Bound(y => y.Phone);
        x.Command(y => y.Custom("Edit").Action("edit", "controller", new { id = ????? }));

    }).Sortable().Scrollable().Pageable(x=> x.PageSizes(true)).Filterable()

如何将与行关联的主键值（在本例中为 StaffId）传递给对象路由值，类似于 Visual Studio 自动脚手架完成的方式？

Answer 1

我不知道您是否可以使用 Command.Custom 您现在尝试的方式传递 ID。

如果您更喜欢这种方式，您可以定义一个 JS 方法并在其中获取选定的行，然后执行 AJAX 操作来操作数据。

因此在您的情况下，您可以将命令定义为：

columns.Command(command => command.Custom("Edit").Click("editRow"));

并且在脚本标签中，您可以定义读取和发送数据到服务器的方法：

    function editRow(e) {
    e.preventDefault();

    try {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var searchId = dataItem.Id;
        var searchName = dataItem.Name;

        var model = { searchId: searchId };
        $.ajax({
                url: '@Url.Action("BindLeftMenu")',
                contentType: 'application/json; charset=utf-8',
                type: 'POST',
                dataType: 'html',
                data: JSON.stringify(model)
            })
            .success(function (resultMenu) { 
                $("#driversummaryarea").show();
            })
            .error(function (xhr, status) {
                $("div.overlay").hide();
            });            
    }
    catch (e) {
        alert(e.message);
    }
}

现在还有 2 种其他方法可以修改网格数据：

使用默认命令，例如编辑（）。显示了一个演示 here。简单易行但有限制，即来自 JS 的控制较少。
使用 ClientTemplate - 非常强大，可以完全控制 JS 中的显示和捕获数据。

例如，使用 ClientTemplate，您可以定义如下所示的网格。请注意我们如何在 ClientTemplate 中将模型 Id 参数作为原始 html.

传递

定义好ClientTemplate后，就可以定义如上所示的JS函数fnEditUser，对网格数据进行操作了。

HTML

        @(Html.Kendo().Grid<Eda.RDBI.Web.Models.OrganizationUserViewModel>()
              .Name("organizationUserViewModelGrid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.FirstName).Filterable(true).Title("Name").Groupable(false).ClientTemplate("<a class='lnkEditUser' href='javascript:void(0)' onclick='fnEditUser(#=Id#)' > #=FirstName# </a>").Width(200);

                  columns.Bound(p => p.EMail).Width(200);

                  columns.Bound(p => p.Role)
                      .ClientTemplate("<span>#=Role#</span> <span>#=IsDriverSearchAllowed ? ' (DS)' : ''#</span>");

                  columns.Bound(p => p.IsActive).Title("Active")
                      .ClientTemplate("<input type='checkbox'  #=IsActive ? checked='checked':'' # class='chkbx' onclick='return false'/>");

                  columns.Bound(p => p.Id).Title(string.Empty).ClientTemplate("<a class='btn btn-default' href='javascript:void(0)' onclick='fnDeleteUser(#=Id#)'>Delete</a>").Filterable(false).Sortable(false);
              })
              .Sortable(sortable => sortable.AllowUnsort(false))
              .Scrollable()
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(50)
                  .Model(model => model.Id(p => p.Id))
                  .Read(read => read.Action("GetUsersForOrganization", "OrganizationUser"))
              )
              .Scrollable(scrollable => scrollable.Virtual(true))
              )

Answer 2

这对我有用。如果您不执行任何操作 AJAX，您可以将锚移到模板中而不使用 ClientTemplate。我正在使用 bootstrap 按钮，但您可以用自己的样式或 kendo 样式替换该代码。

这是插入您的 ID 的代码：#= Id # - 它应该是您模型中的一个字段。参见 http://docs.telerik.com/kendo-ui/framework/templates/overview

@Html.Kendo().Grid(Model).Name("Staff").Columns(x =>
{
    x.Bound(y => y.StaffId);
    x.Bound(y => y.FirstName);
    x.Bound(y => y.LastName);
    x.Bound(y => y.Email);
    x.Bound(y => y.Phone);
    x.Template(@<text></text>).Title(string.Empty).Width(40)
     .ClientTemplate(@"<a href='" + Url.Action("Edit") + "?id=#= Id #' class='btn btn-info btn-xs' title='Modify this'>Edit</a>");
}).Sortable().Scrollable().Pageable(x=> x.PageSizes(true)).Filterable()

Answer 3

把网格玩了一遍又一遍，终于可以解决问题了。给你：

x.Bound(y => y.Title).Template(y=> "<a href=\""+y.Title+"\">Click Me</a>")

Kendo MVC：向网格添加编辑、删除按钮

Kendo MVC: Adding Edit, Delete Buttons to Grid

asp.net-mvc

telerik

kendo-ui

kendo-grid

kendo-asp.net-mvc