Question

假设我有下表：

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

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

使用默认命令，例如编辑（）。演示显示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。我使用引导按钮，但您可以用自己的样式或剑道样式替换该代码。

这是插入您的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：向网格添加编辑，删除按钮

3 个答案: