在 webgrid asp mvc 中使用图像而不是文本答案

【问题标题】：use images instead of text in webgrid asp mvc在 webgrid asp mvc 中使用图像而不是文本
【发布时间】：2012-08-04 11:59:05
【问题描述】：

如何将此 webgrid 中的操作链接更改为图像？ ps：我希望所有图片都出现在同一列中

@{
var grid = new WebGrid(Model, canPage:true ,canSort:true, rowsPerPage :6);
grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "datatable" },
    headerStyle: "Header",
    alternatingRowStyle: "alt",
    columns: grid.Columns(grid.Column(header: "", format: (item) =>
 new HtmlString(
       Html.ActionLink("Détails", "Details", new { id = item.id_client }).ToString() +
       Html.ActionLink("Modifier", "Edit", new { id = item.id_client }).ToString() +
                Html.ActionLink("Supprimer", "Delete", new { id = item.id_client }).ToString()
 )),
    grid.Column("Nom"),
    grid.Column("Prenom", "Prénom"),
    grid.Column("Email")));


                    }

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-3 razor webgrid

【解决方案1】：

我已经使用 css 类解决了这个问题

@{
         var grid = new WebGrid(Model, canPage:true ,canSort:true, rowsPerPage :6);
            grid.Pager(WebGridPagerModes.NextPrevious);
            @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "datatable" },
            headerStyle: "webgrid-header",
            selectedRowStyle : "webgrid-selected-row",
            footerStyle : "webgrid-footer",
            rowStyle: "webgrid-row-style",
            alternatingRowStyle: "webgrid-alternating-row",
            columns: grid.Columns(
            grid.Column(header: "", format:  (item) =>
            Html.ActionLink("Détails", "ObtenirDifficulte", new { id = item.id_diff}, 
            new { @class = "details" }), style: "actions"),
            grid.Column(header: "", format:  (item) => Html.ActionLink("Modifier", 
            "Edit",
            new { id = item.id_diff }, new { @class = "modifier" }),style : "actions"),
            grid.Column(header: "", format: (item) => Html.ActionLink("Supprimer",
            "Delete", new { id = item.id_diff }, new { @class = "supprimer" }),
            style: "actions"),
            grid.Column("titre", "Titre"),
            grid.Column("description", "Description"),
            grid.Column("tache.nom_tache", "Tâche correspondante")
            ));
}

这里是 css 类

.modifier
{
    background: url(../Images/modifier.png) no-repeat top left ;
    display: block;
    width: 18px;
    height: 24px;
    text-indent: -9999px;
}
.details
{
    background: url(../Images/details.png) no-repeat top left ;
    display: block;
    width: 26px;
    height: 32px;
    text-indent: -9999px;
}
.supprimer
{
    background: url(../Images/supprimer.png) no-repeat  ;
    display: block;
    width: 18px;
    height: 24px;
    text-indent: -9999px;
}

【讨论】：