Question

当我点击＆＃34;编辑＆＃34;我想在另一个页面上添加重定向使用带有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>");

你还有其他想法吗？

提前致谢。

Answer 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

Answer 2

您可以在“名称”列上添加自定义ClientTemplate，然后完全删除columns.Command按钮，只需单击名称进行编辑，然后将对象的ID传递到新页面，就像这样：

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

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

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

3 个答案: