title: Image Button Ajax.ActionLink
body: <p>I am trying to create an extension of the <code>Ajax.ActionLink</code>. I have done the same to <code>Html.ActionLink</code> 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 <code>Ajax.ActionLink</code> method is working fine</p>
  
  <p>Here is my code:</p>
  
  <pre><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());
  }
  </code></pre>
  
  <p>I have tried to debug the issue, so i have compared both the generated Html from both the normal and the extension method:</p>
  
  <p>Normal (Working):</p>
  
  <pre><code>&lt;a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#Edit" href="/Admin/Event/Edit/1"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>Extension:</p>
  
  <pre><code>&lt;a allowcache="False" confirm="" httpmethod="" insertionmode="Replace" loadingelementduration="0" loadingelementid="" onbegin="" oncomplete="" onfailure="" onsuccess="" updatetargetid="Edit" url="" href="/Admin/Event/Edit/1"&gt;&lt;img src="/Content/Images/edit-icon.png"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The rendered Html is different as the normal method uses the Html <code>data-*</code> attributes while the other not. I am not sure how to solve this issue.</p>