Dynamic images and formatting parameters with @Aja

Question

I’m trying to change the following working code into Ajax.

   <a href="@Url.Action("Index", new { pn = pc })"> 
   <img src="@Url.Content("~/Photos/" + @photoFile[pc])", id = "imgnb" width = "100px" height = "150px" alt = "Photo" /></a>  <br />

The code needs to handle a string[] variable, @photoFile[pc]), and take formatting, ( id = "imgnb" width = "100px" height = "150px" alt = "Photo"). (imgnb is css, no image border)

Soe Moe built an Ajax helper here Problem with ajax.actionlink helper, return string.

His code works great with a static image with no paratmeters.

         @Ajax.ImageActionLink("../../Photos/Children/albersona1.jpg", "Index", new { pn = pc }, new AjaxOptions
    {
      UpdateTargetId = "Selected Thumbnail",
      InsertionMode = InsertionMode.Replace,
      HttpMethod = "GET" })

Would anyone know how to modify this helper to convert the URL.Action into Ajax so that it handles dynamic images and formatting parameters.

Any help greatly appreciated.

Thanks, Joe

Answer 1

public static class ImageActionLinkHelper
{
    public static IHtmlString ImageActionLink(
        this AjaxHelper helper,
        string imageUrl,
        string actionName,
        object routeValues,
        object htmlAttributes,
        AjaxOptions ajaxOptions
    )
    {
        var builder = new TagBuilder("img");
        builder.MergeAttribute("src", imageUrl);
        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);
        var html = link.ToHtmlString().Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing));
        return new HtmlString(html);
    }
}

and then:

@Ajax.ImageActionLink(
    Url.Content("~/Photos/" + photoFile[pc]),
    "Index",
    new { pn = pc },
    new { id = "imgnb", width = "100px", height = "150px", alt = "Photo" },
    new AjaxOptions
    {
        UpdateTargetId = "foo"
    }
)