如何在 asp.net mvc 的 Kendo UI Grid 中添加锚链接列答案

【问题标题】：how to add anchor link column in Kendu UI Grid in the asp.net mvc如何在 asp.net mvc 的 Kendo UI Grid 中添加锚链接列
【发布时间】：2014-07-30 18:04:28
【问题描述】：

我是 ASP.NET MVC Kendo UI 的新手。我正在使用 ASP.NET MVC 5。我想将 Name 列作为 Kendo UI 网格中的 HTML 链接。但是我收到一个错误，例如“'Kendo.Mvc.UI.Fluent.GridBoundColumnBuilder.ClientTemplate(string)' 的最佳重载方法匹配有一些无效参数”。以下是我的代码。

@(Html.Kendo().Grid<Music.DataAccess.Models.Genre>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).ClientTemplate(Html.ActionLink(c => c.Name, "Browse", new { genre = c.Name }));                
        columns.Bound(c => c.Description).Width(190);            
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Genres_Read", "Store"))
            )
)

这是我的流派模型

 public class Genre
{
    public int GenreId { get; set; }
    [DisplayName("Genre Name")]
    public string Name { get; set; }
    public string Description { get; set; }

    public List<Album> Albums { get; set; }
}

谁能帮帮我？

【问题讨论】：

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

【解决方案1】：

应该是这样的：

@(Html.Kendo().Grid<Music.DataAccess.Models.Genre>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("Browse") + "/?#= Name #'>Edit</a>");
        columns.Bound(c => c.Description).Width(190);            
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Genres_Read", "Store"))
            )
)

【讨论】：

【解决方案2】：

列的客户端模板接受一堆 javascript 作为字符串或函数。

就我个人而言，我更喜欢将事物的格式部分提取到 javascript 函数中，因为它更易于使用。

所以对于你的例子，这样的事情应该可以工作：

网格列

columns.Bound(c => c.Name).ClientTemplate("#=getActionLink(data.Name)#")

Javascript 函数

function getActionLink(data)
{
 var link = "@Url.Action("YourActionHere","YourControllerHere")" + "/" + data;
 var returntext = "<a href='" + link + "'>" + data + "</a>";

return returntext;
}

显然可以根据您的需要进行自定义，但这应该适合您。

【讨论】：