2012-08-04 5 views
2

어떻게이 webgrid의 작업 링크를 이미지로 변경할 수 있습니까? PS : 나는 모든 이미지가webgrid에서 텍스트 대신 이미지 사용 asp mvc

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


        } 
+2

CSS 클래스 여기에이 사용하는 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") )); } 

을 해결 그리고 한 같은 열에 표시 할! :-) – davethecoder

답변

3

내가 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; 
}