如何在 WebGrid Header 上显示图像答案

【问题标题】：How to display image on WebGrid Header如何在 WebGrid Header 上显示图像
【发布时间】：2012-03-14 15:17:37
【问题描述】：

我正在尝试在我的 MVC3 应用程序中使用 WebGrid，并且在我的网格中的两列标题中我想显示图像。所以请为此举一些例子。通过使用“格式”选项，我在列中显示图像但不在标题中，所以请告诉我如何在网络网格中实现这一点

【问题讨论】：

@MvcHtmlString.Create(grid.GetHtml( columns: grid.Columns( grid.Column(header: "{Tree}", format: @), grid.Column("Name") )).ToString().Replace("{Tree}", "")).
实际可行 :D 但是还有其他不那么“hacky”的解决方案吗？

【解决方案1】：

如果你想显示多张图片，你可以在你的视图中使用 Html.ActionLink 属性，如下所示。在此示例中，我使用详细/编辑/删除图像作为操作列下的按钮。

注意： 根据您的项目在 Html.ActionLinks 中键入“Title”、“Controller”和“Action”名称。如果您使用空标题，只需使用“”。

....
//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
 new HtmlString(
       Html.ActionLink("Show Details", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink("Edit Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink("Delete Record", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,
           title = "Delete",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/delete.png')"
       }, null).ToString()
 )
)
....


<style type="text/css">
    a.icon-link {
        background-color: transparent; 
        background-repeat: no-repeat; 
        background-position: 0px 0px;
        border: none;
        cursor: pointer; 
        width: 16px;
        height: 16px;
        margin-right: 8px; 
        vertical-align: middle;
    }
</style>

对于我的完整示例，您可以查看此处：How to use WebGrid in a cshtml view?

问候。

【讨论】：