使用图像而不是文字的WebGrid ASP MVC

问题描述

我怎样才能改变这种的WebGrid成图像的操作链接？ PS：我想所有的图像出现在同一列

  @ {
VAR电网=新的WebGrid（型号，canPage：真的，canSort：真的，rowsPerPage：6）;
grid.Pager（WebGridPagerModes.Next previous）;
    @ grid.GetHtml（TABLESTYLE的WebGrid，htmlAttributes：新{ID =数据表}，
    headerStyle：页眉，
    alternatingRowStyle：ALT，
    列：grid.Columns（grid.Column（标题：，格式：（项目）=＆GT;
 新HtmlString（
       Html.ActionLink（详细信息，详细信息，新{ID = item.id_client}）的ToString（）+
       Html.ActionLink（修改，编辑，新{ID = item.id_client}）的ToString（）+
                Html.ActionLink（Supprimer，删除，新{ID = item.id_client}）的ToString（）
 ））
    grid.Column（标称），
    grid.Column（preNOM，Prénom），
    grid.Column（电子邮件）））;
                    }
 

解决方案

我已经解决了这个使用CSS类

  @ {
         VAR电网=新的WebGrid（型号，canPage：真的，canSort：真的，rowsPerPage：6）;
            grid.Pager（WebGridPagerModes.Next previous）;
            @ grid.GetHtml（TABLESTYLE的WebGrid，htmlAttributes：新{ID =数据表}，
            headerStyle的WebGrid头
            selectedRowStyle的WebGrid选择行
            footerStyle的WebGrid躯
            rowStyle的WebGrid排式，
            alternatingRowStyle的WebGrid-交替行
            列：grid.Columns（
            grid.Column（标题：，格式：（项目）=＆GT;
            Html.ActionLink（详细信息，ObtenirDifficulte，新{ID = item.id_diff}，
            新{@class =详细信息}），风格：动作），
            grid.Column（标题：，格式：（项目）=＆GT; Html.ActionLink（修改，
            编辑，
            新{ID = item.id_diff}，{新@class =修改}），风格：动作），
            grid.Column（标题：，格式：（项目）=＆GT; Html.ActionLink（Supprimer
            删除，新{ID = item.id_diff}，{新@class =supprimer}）
            风格：操作），
            grid.Column（滴度，标题），
            grid.Column（说明，说明），
            grid.Column（tache.nom_tache，环节correspondante）
            ））;
}
 

和这里的CSS类

  .modifier
{
    背景：网址（../图像/ modifier.png）不重复左上角;
    显示：块;
    宽度：18像素;
    family：宋体;
    TEXT-INDENT：-9999px;
}
.details
{
    背景：网址（../图像/ details.png）不重复左上角;
    显示：块;
    宽度：26px;
    高度：32PX;
    TEXT-INDENT：-9999px;
}
.supprimer
{
    背景：网址（../图像/ supprimer.png）不重复;
    显示：块;
    宽度：18像素;
    family：宋体;
    TEXT-INDENT：-9999px;
}
 

How can I change the action links in this webgrid into images? ps: I want all the images to appear in the same column

@{
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")));


                    }

解决方案

I've solved this using css classes

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

And here are the css classes

.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;
}

这篇关于使用图像而不是文字的WebGrid ASP MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！