Displaying Multiple Image Links instead of Text in WebGrid?

Question

I have a WebGrid definition and three links in a single column by using Html.ActionLink. But, when I do not use "LinkText" property, the applicantId property is passed as null value to the Controller.

On the other hand, when just using LinkTexts instead of " ", the id parameters can be passed successfully (Types as "My Link Text" below). However, I do not want to display text on the link and I just wanted to display Image.

I think there might be a typing mistake or there would be another ways suitable for MVC4 Razor like @Url.Action, etc. Here is my code in Razor View.

Could you help me please?

Thanks in advance.

View:

//for using multiple Html.ActionLink in a column using Webgrid
grid.Column("Operations", format: (item) =>
 new HtmlString(
       Html.ActionLink("My Link Text", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,               
           title = "Detail",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/detail.png')"
       }, null).ToString() +
       Html.ActionLink(" ", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID, 
           title = "Edit",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/edit.png')"
       }, null).ToString() +
       Html.ActionLink(" ", "Edit", "Admin", new
       {
           applicantId = item.ApplicantID,
           title = "Delete",
           @class = "icon-link",
           style = "background-image: url('../../Content/icons/delete.png')"
       }, null).ToString()
 )
)



<style type="text/css">
    a.icon-link {
        background-color: transparent; 
        background-repeat: no-repeat; 
        background-position: 0px 0px;
        border: none;
        cursor: pointer; 
        width: 16px;
        height: 16px;
        margin-right: 8px; 
        vertical-align: middle;
    }
</style>

Are you using the same Edit Action for Display, Edit, and Delete functions, or you just forgot to change the Action name in your `Html.ActionLink`s? — ataravati, Nov 03 '13 at 15:22
Also, it seems like you did not explain the problem correctly. The id is null when you do not use a link text or when you do use it? — ataravati, Nov 03 '13 at 15:25
When I do not use linktext, applicantId property returns null value. I simply want to use three image link (without text) instead of text link inside HtmlString() in one coulumn above. Thanks. — Jack, Nov 03 '13 at 16:23
The answer provided below is good, but you don't have to do that. You can just assign css classes to your links, and give them background images in your stylesheet. — ataravati, Nov 04 '13 at 19:35
Similar method had already been in the question, but it does not seem to be working good (at least without "title" property at here"). So, as far as I see, for multiple item into one column in WebGrid, this approach maybe a need. However, if you could give an example as you described and change the code above according to your example maybe @H.Johnson apply it and inform us if it works properly. — Murat Yıldız, Nov 04 '13 at 21:05
Thanks for reply. I have tried your answer and saw that it does not make any sense regarding to the result. On the other hand, regarding to the Delete method, if [HttpPost] is removed it should work. @H.Johnson: Could you please also check answer and this opt? — Murat Yıldız, Nov 06 '13 at 10:12
@MuratYILDIZ: Yes, by removing the [HttpPost], the id field can be passed without any problem and I think I can use Delete method like that. Thanks. — Jack, Nov 06 '13 at 10:14

Murat Yıldız · Answer 1 · 2023-02-07T21:40:01.277

You could use custom HTML Helper method in order to use it easily. To do this:

Create a folder called HtmlHelpers and create a class named MyHelpers in this folder. Then define your class like below (you might improve it by adding some extra properties).

MyHelpers.cs:

using System;
using System.Web.Mvc;

namespace <YourProjectName>.WebUI.HtmlHelpers
{
    public static class MyHelpers
    {            
        public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
           string action, string controllerName)
        {
            return ActionImage(html, imagePath, alt, cssClass, action, controllerName, null);
        }

        public static MvcHtmlString ImageLink(this HtmlHelper html, string imagePath, string alt, string cssClass,
           string action, string controllerName, object routeValues)
        {
            var currentUrl = new UrlHelper(html.ViewContext.RequestContext);
            var imgTagBuilder = new TagBuilder("img"); // build the <img> tag
            imgTagBuilder.MergeAttribute("src", currentUrl.Content(imagePath));
            imgTagBuilder.MergeAttribute("title", alt);
            imgTagBuilder.MergeAttribute("class", cssClass);
            string imgHtml = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
            var anchorTagBuilder = new TagBuilder("a"); // build the <a> tag
            anchorTagBuilder.MergeAttribute("href", currentUrl.Action(action, controllerName, routeValues));
            anchorTagBuilder.InnerHtml = imgHtml; // include the <img> tag inside
            string anchorHtml = anchorTagBuilder.ToString(TagRenderMode.Normal);
            return MvcHtmlString.Create(anchorHtml);
        }
    }
}

Rebuild your project and then add this line to your Razor View:

@using .WebUI.HtmlHelpers
Then use this Html Helper method in your View like this:

@Html.ImageLink("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID })

Smilarly, if you want to use multi image link in the same column you can merge html strings like that:

View:

....
grid.Column("Operations", style: "your-class", format: (item) =>
 new HtmlString(
      @Html.ActionImage("../../Content/icons/detail.png", "Detail", "your-class", "Detail", "Admin", new { item.ApplicantID }).ToString() +
      @Html.ActionImage("../../Content/icons/edit.png", "Edit", "your-class", "Edit", "Admin", new { item.ApplicantID }).ToString() +
      @Html.ActionImage("../../Content/icons/delete.png", "Delete", "your-class", "Delete", "Admin", new { item.ApplicantID }).ToString()

 )
)
...

Thank you very much for this wonderful explanations. I could easily place my image link into one column in my WebGrid. Regards. — Jack, Nov 04 '13 at 13:49

score 0 · Answer 2 · edited May 23 '17 at 10:24

Your Action Links are not being called correctly. You are adding the Html Attributes to your Route Values. Your Action Links should look like this:

   Html.ActionLink("My Link Text", "Detail", "Admin", new
   {
       applicantId = item.ApplicantID              
   }, new 
   {            
       title = "Detail",
       @class = "icon-link"
   })

Check this link to see how you can hide the link text, and display an image instead using css: CSS Hide Text But Show Image?

Displaying Multiple Image Links instead of Text in WebGrid?

2 Answers2