Search code examples
asp.netasp.net-mvcasp.net-mvc-3razorwebgrid

using images in webgrid links


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()
 ), style: "actions"),
    grid.Column("Nom"),
    grid.Column("Prenom", "Prénom"),
    grid.Column("Email")));


                    }

Solution

  • One way is to add css for hyplerlink to have a background image like this

    Example:

    a.bgImg
    {
        background: url(../Images/background.gif)
    }