Displaying Multiple Image Links instead of Text in WebGrid? - asp.net-mvc

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>

Answer 1

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?

Answer 2

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()
)
)
...