使用 ASP .NET MVC 编辑 Kendo UI 网格时重定向答案

【问题标题】：Redirect when Edit a Kendo UI grid with ASP .NET MVC使用 ASP .NET MVC 编辑 Kendo UI 网格时重定向
【发布时间】：2014-05-07 16:23:01
【问题描述】：

当我单击带有 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() 数据绑定。

我可以使用客户端模板来完成，但我真的很想使用 Kendo UI 建议的默认按钮：

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

你还有什么想法吗？

提前致谢。

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

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

视图中的代码：

<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

【讨论】：

你说得对，它确实有效！我不记得为什么我有一个错误，但无论如何。谢谢！

【解决方案2】：

您可以在名称列上添加一个自定义 ClientTemplate，然后完全删除您的 columns.Command 按钮，他们只需单击名称即可对其进行编辑，然后您将对象的 ID 传递给新页面，如下所示：

columns.Bound(x => x.Name).ClientTemplate("<a href=/SomeViewFolder/Index?id=${id} target=_blank>${Name}</a>");

【讨论】：

如果你有很少的命令添加这样的模板而没有全部迁移到绑定列会导致你的命令按钮分成两列或多列，这不是很酷
OP 使用了绑定列，所以我假设有人会在这里使用。我认为要创建、读取、更新、删除，这些列通常会被绑定。我想说其他实例更先进一些，所以这些人应该已经知道他们在做什么了。

【解决方案3】：

如果您想重定向到另一个接受参数的页面，请使用此方法。

@(Html.Kendo().Grid<AGridViewModel>()
  .Name("Grid")
  .Columns(columns => {
    columns.Bound(p => p.Id)
    columns.Bound(p => p.Name);
    columns.Command(command => command.Custom("View Details").Click("showDetails"));

})

<script type="text/javascript">  
function showDetails(e) {  
    e.preventDefault();
    var d = this.dataItem($(e.currentTarget).closest("tr"));
    //alert("Selected item ID is:" + d.Id);
    window.location.href = "@Url.Action("action", "controller")?id=" + d.Id;
}
</script>

【讨论】：