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

Add links into a webgrid


I'm working on an mvc .net web application. I used a webgrid to show data from my database.

@{
    var grid = new WebGrid(Model, canPage:true , rowsPerPage :6);
    grid.Pager(WebGridPagerModes.NextPrevious);
      @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: 
      new {id="datatable" },headerStyle: "Header", alternatingRowStyle : "alt",
      columns: grid.Columns(grid.Column("Nom"), grid.Column("Prenom"),     
      grid.Column("Email")));
}

I just want to add 3 action links to each row. how to do that. Here are my action links (I used images instead of text)

<a href="@Url.Action( "Details", new { id = item.id_client })">
    <img src="~/Images/details.png" alt =""/></a>
<a href="@Url.Action( "Edit", new { id = item.id_client })">
    <img src="~/Images/modifier.png" alt =""/></a>
<a href="@Url.Action( "Delete", new { id = item.id_client })">
    <img src="~/Images/supprimer.png" alt =""/></a>

Solution

  • Muliple answers from SO

    Method 1

    <a href="@Url.Action("Edit", new { id=MyId })"><img src="@Url.Content("~/Content/Images/Image.bmp")", alt="Edit" /></a>
    

    Method 2

    grid.Column(header: "Details",
                format: @<text><img src="@Url.Content("~/Content/Images/view-fullscreen.png")"
                 style="cursor: pointer" onclick="openPopup('@item.EncryUserId')"                                                                        
                 alt="View Detail" title="View Detail"/></text>) 
    

    Method 3

    @Html.ActionLink("Update", "Update", @item.Price, new { @class = "imgLink"})
    
    .imgLink
    {
      background: url(YourImage.png) no-repeat;
    }
    

    Choose wisely ;)

    Update :

    @Html.ActionLink("Update", "Update", new{@postID =@item.PostID}, new { @class = "imgLink"})