图像按钮Ajax.ActionLink

Question

I am trying to create an extension of the Ajax.ActionLink. I have done the same to Html.ActionLink and its working but when i tried to make an extension of the Ajax method, its not working. What happens is that when i click on the link, it doesn't render my partial view (replace) but instead it redirect me to the view. I want to note that stranded Ajax.ActionLink method is working fine

Here is my code:

public static IHtmlString ImageActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName,
    object routeValues, object linkHtmlAttributes, AjaxOptions ajaxOptions, string imageSrc, object imageHtmlAttributes)
{
    UrlHelper urlHelper = new UrlHelper(ajaxHelper.ViewContext.RequestContext);

    //Image tag
    TagBuilder imageTag = new TagBuilder("img");
    imageTag.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
    imageTag.MergeAttributes(new RouteValueDictionary(imageHtmlAttributes), false);

    //Anchor tag
    TagBuilder anchorTag = new TagBuilder("a");
    anchorTag.InnerHtml = imageTag.ToString(TagRenderMode.SelfClosing);
    anchorTag.Attributes.Add("href", urlHelper.Action(actionName, controllerName, routeValues));
    anchorTag.MergeAttributes(new RouteValueDictionary(ajaxOptions), false);
    anchorTag.MergeAttributes(new RouteValueDictionary(linkHtmlAttributes), false);

    return MvcHtmlString.Create(anchorTag.ToString());
}

I have tried to debug the issue, so i have compared both the generated Html from both the normal and the extension method:

Normal (Working):

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#Edit" href="/Admin/Event/Edit/1">Edit</a>

Extension:

<a allowcache="False" confirm="" httpmethod="" insertionmode="Replace" loadingelementduration="0" loadingelementid="" onbegin="" oncomplete="" onfailure="" onsuccess="" updatetargetid="Edit" url="" href="/Admin/Event/Edit/1"><img src="/Content/Images/edit-icon.png"></a>

The rendered Html is different as the normal method uses the Html data-* attributes while the other not. I am not sure how to solve this issue.

Answer 1

You need to use the .ToUnobtrusiveHtmlAttributes() method of AjaxOptions to generate the correct data-ajax-* attributes. Your method should be

public static IHtmlString ImageActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName,
    object routeValues, object linkHtmlAttributes, AjaxOptions ajaxOptions, string imageSrc, object imageHtmlAttributes)
{
    UrlHelper urlHelper = new UrlHelper(ajaxHelper.ViewContext.RequestContext);

    //Image tag
    TagBuilder imageTag = new TagBuilder("img");
    imageTag.Attributes.Add("src", VirtualPathUtility.ToAbsolute(imageSrc));
    imageTag.MergeAttributes(new RouteValueDictionary(imageHtmlAttributes), false);

    //Anchor tag
    TagBuilder anchorTag = new TagBuilder("a");
    anchorTag.InnerHtml = imageTag.ToString(TagRenderMode.SelfClosing);
    anchorTag.Attributes.Add("href", urlHelper.Action(actionName, controllerName, routeValues));

    // change the following line
    anchorTag.MergeAttributes(ajaxOptions.ToUnobtrusiveHtmlAttributes());
    // recommend the following change
    anchorTag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(linkHtmlAttributes)));

    return MvcHtmlString.Create(anchorTag.ToString());
}

Side note: Refer source code for the .ToUnobtrusiveHtmlAttributes() method