asp.net-mvc - 使用 ASP .NET MVC 编辑 Kendo UI 网格时重定向

Question

当我使用 ASP .NET MVC 的 Kendo UI 网格单击“编辑”按钮时，我想添加到另一个页面的重定向。

这是基本代码:

@(Html.Kendo().Grid<ViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.Id);
        columns.Bound(x => x.Name);
        columns.Bound(x => x.Field1);
        columns.Command(commands =>
        {
            commands.Edit();
            commands.Destroy();
        })
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(x => x.Id))
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Edit", "Home"))
        .Destroy(destroy => destroy.Action("Destroy", "Home"))
    )
)

我尝试使用 HTML 属性，但不起作用:

commands.Edit().HtmlAttributes(new { @class = "edit" });

然后，我尝试添加自定义编辑(通过commands.Custom(...)，但不幸的是它仅用于.Server() 数据绑定(bind)。

我可以使用客户端模板来完成此操作，但我真的很想使用 Kendo UI 提出的默认按钮:

columns.Template(@<text></text>)
            .ClientTemplate(
                "<a href='" + Url.Action("Edit", "Home") + "/#=Id#'>Edit</a>");

你还有其他想法吗？

提前致谢。

Answer 1

您应该能够使用自定义命令，即使使用 Ajax 数据源也是如此。我刚刚使用以下代码在本地进行了测试，以确保它仍然有效。

View 中的代码:

<script type="text/javascript">
    function redirectTest(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.Name);
    }
</script>

@(Html.Kendo().Grid<ViewModel>()
.Name("testing")
.Columns(columns => 
    {
      columns.Bound(x => x.Id);
      columns.Bound(x => x.Name);
      columns.Command(command => command.Custom("Edit").Click("redirectTest"));
    })
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("ReadAction", "ControllerName"))
)
)

来源:Custom command demo