在 ASP.NET MVC 中为 KendoUI 网格控件中的每一行添加一个包含超链接的列

Posted 2023-05-07

【中文标题】在 ASP.NET MVC 中为 KendoUI 网格控件中的每一行添加一个包含超链接的列

【英文标题】：Adding a column which contains a hyperlink for every row in KendoUI grid control in ASP.NET MVC

【发布时间】：2012-08-23 22:21:03

【问题描述】：

这是包含 KendoUI 网格控件的视图： 我想在 Date of creation 列之前添加一个包含超链接的新列。

@using Kendo.Mvc.UI 
@model IEnumerable<ExamplekendoDropdown.Models.FacilityGroup>



@
    ViewBag.Title = "Grid";




<table >
<tr>
<td align="center">


<table >
<tr>
<td align="left">
@using (html.BeginForm("Grid", "Grid", FormMethod.Get))


    <table>
    <tr>
    <td>
    <span>Facility Group Name</span>
    </td>
    <td>
    @(Html.Kendo().AutoComplete()
                   .Name("FacilityGroupName")
                   .Value("")
                   .Enable(true)
                ) 
    @Html.Hidden("FacilityGroupName")
    </td>
    </tr>
    <tr>
    <td>
    <input id="Submit1" type="submit" value="Search" />
    </td>
    </tr>
    </table>


</td>
</tr>
<tr>
<td align="center" >
@(Html.Kendo().Grid(Model)
    .Name("Grid")

    .Columns(columns =>
        
                columns.Bound(p => p.FacilityGroupId);

                    //columns.Bound(@Html.ActionLink("Create Facility", "Facility"));


                columns.Bound(p =>p.FaclityGroupName);
                columns.Bound(p => p.status).Width(80);
                columns.Bound(p => p.CreationDate);
                columns.Command(command =>  command.Edit();  );
        )

        //.ToolBar(toolbar =>toolbar.Create())
        //.Editable(editable => editable.Mode(GridEditMode.PopUp))

        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditUserPopupTemplate")
            .Window(w => w.Title("Facility").Name("editWindow").Width(300).Height(300)))
        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(datasource => datasource
            .Server()
            .Model(model => model.Id(p => p.FacilityGroupId ))
            .Read("Grid", "Grid")
            .Update("Update", "Grid")

            //.Create("Create","Grid")
            //.Destroy("Destroy","Grid")
            )
                )

<script type="text/javascript">
    $(document).ready(function () 
        $("form.k-edit-form").kendoValidator();
    );

</script>

</td>
</tr>
</table>


 </td>
</tr>
</table>

现在我需要在包含超链接的“创建日期”列之前添加另一列。 请分享您的意见 谢谢

【参考方案1】：

但是如果你使用 ajax 为什么不这样做呢

Ajax().ClientTemplate("<a href='" + Url.Action("YourAction", "YourController") +"/#= Id #'" +">#=FileName#</a>");

if server()
columns.Bound(p => p.ProductID).Template(@<text>
                 @Html.ActionLink("Show Product Details", "ProductDetails", new  id = @item.ProductID  )>
                 </text>);

This example

【讨论】：

感谢您提供他们常见问题解答的链接！

我喜欢这个答案中的随机格式。这是懒散的高度。

【参考方案2】：

columns.Template(@<text></text>).ClientTemplate(
    @Html.ActionLink("Send Reset Email", "Login", new  loginButton = "reset",activate=true,fromAdmin=true,rowField="#=rowField#" ).ToHtmlString()
);

这对我有用。

【参考方案3】：

您可以使用 Template 和 ClientTemplate，获取带有超链接的列。

columns.Bound(p => p.CreationDate)
    .Template(@<text><a href="">@item.CreationDate</a></text>)
    .ClientTemplate("<a href=''>#CreationDate<a/>").Title("Link");
columns.Bound(p => p.CreationDate);

【参考方案4】：

您只需要使用模板方法进行服务器绑定。 （ClientTemplate 用于 Ajax 绑定）。除非您想将列标题关联到按该属性进行过滤/排序/分组，否则无需将其绑定到特定属性。

columns.Template(@<text>@Html.ActionLink("Create Facility", "Facility")</text>)

【讨论】：

此语法仅适用于服务器绑定。查看网格上的常见问题解答，它都在那里。

【参考方案5】：

columns.Template(@<text></text>)
       .ClientTemplate("<a href='" + Url.Action("Index", "Home") + "'>Create Facility</a>")
       .HtmlAttributes(new  style = "text-align: left;" )
       .Width(60);

这对我有用

【参考方案6】：

如果您的网格有服务器绑定，请使用：

  columns.Bound(x => x.ProjectCode)
          .Template(items => Html.ActionLink(items.ProjectCode, "Manage", "Project", new projectId = items.ProjectId, null));