使用ASP編輯Kendo UI網格時重定向MVC

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

然後，我嘗試添加自定義編輯（通過命令.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>");