I am trying to populate a WebGrid cell with an image that will open up a "Details" popup based on which row is selected. Currently, I have this for the details column:
grid.Column(header: "Details", format: (item) => @Ajax.ActionLink("pop", "GetDetails", new { id = item.FormId }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "formdetails", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" })
, style: "colImages"),
This opens up the popup fine, but there is the text "pop" in the column instead of an image.
I have seen a number of sites talking about creating a separate "ImageActionLink" class to assist in creating ActionLink objects with images. That code looks like this:
public static class ImageActionLinkHelper
{
public static IHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
{
var builder = new TagBuilder("img");
builder.MergeAttribute("src", imageUrl);
builder.MergeAttribute("alt", altText);
var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)));
}
}
However, I can't seem to get that code to work WITHIN a WebGrid. This is mostly due to the fact that I need the "(item) =>" part to get the ID of the row so that the correct details window will pop up.
How can I get the "Details" column to contain a small icon that will bring up the correct popup when clicked? Thanks in advance.
Edit: Here's a couple ways I tried to use ImageActionLink
grid.Column(... format: (item) => @Ajax.ImageActionLink( ... ) ),
Error: Argument 3: cannot convert from 'lambda expression' to 'System.Func'
grid.Column(... format: (item) => @(new HtmlString(@Ajax.ImageActionLink( ... ) ),
Error: Keyword, identifier, or string expected after verbatim specifier: @
grid.Column(... format: (item) => @HtmlString(@Ajax.ImageActionLink( ... ) ),
Error: 'System.Web.HtmlString' is a 'type' but is used like a 'variable'
grid.Column(... format: @HtmlString((item) => @Ajax.ImageActionLink( ... ) ),
Error: 'System.Web.HtmlString' is a 'type' but is used like a 'variable'
I've created a small repro and with the following syntax it's working for me. One important thing: you need to include a using for your namespace of the ImageActionLinkHelper
class at the top of your view.
@using namespaceofImageActionLinkHelper
...
grid.Column(header: "Details",
format: (item) =>
@Ajax.ImageActionLink(
@Url.Content("~/Content/images/image.jpg"),
"alt of the image",
"GetDetails",
new { id = item.FormId },
new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "formdetails", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" })
, style: "colImages")