在webgrid中使用圖像而不是文本asp mvc

Question

如何將此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"))); 


        } 

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