Html.ActionLink extension

Question

I am trying to extend the Html.ActionLink as I want to add a custom meta data for a shared component (in this case a modal).

My aim is to further extend the LinkExtensions class within .Net MVC which will add a value to the html class attribute and add a custom data attribute resulting in the following:

<a href="/Controller/Action/id" class="show-in-modal style1 style2" data-title="Modal title">Link</a>

The helper will look similar to the MVC method:

public static MvcHtmlString ModalLink(this HtmlHelper htmlHelper, string title, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
    // Add 'show-in-modal' class here
    // Add 'data-title' attribute here

    return htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes);
}

@Html.ModalLink("Modal title", "Link", "action", "controller", new { id = "id" }, new { @class = "style1 style2" });

This issue I am having is I cannot easily modify the htmlAttributes object to add my class name and data attribute, which makes sense as this is a read only anonymous object.

Is there a way I can easily apply the required values/meta data without having to rip everything apart with reflection and put back together again?

I noticed MVC has overloads which accepts html attributes in the form of an IDictionary<string, object>, is there an extension method which converts anonymous types to a modifiable dictionary?

All i get within searching is how to use the Html.ActionLink() method.

Answer 1

The function you are looking for is:

HtmlHelper.AnonymousObjectToHtmlAttributes()

https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.anonymousobjecttohtmlattributes(v=vs.118).aspx

Here is one version of the ModalLink Extension:

public static MvcHtmlString ModalLink(this HtmlHelper htmlHelper, string title, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
  // Add 'show-in-modal' class here
  // Add 'data-title' attribute here

  var htmlAttr = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

  const string classKey = "class";
  const string titleKey = "data-title";

  const string classToAdd = "show-in-modal";
  if (htmlAttr.ContainsKey(classKey) == true)
  {
    htmlAttr[classKey] += " " + classToAdd;
  }
  else
  {
    htmlAttr.Add(classKey, classToAdd);
  }

  if (htmlAttr.ContainsKey(titleKey) == true)
  {
    htmlAttr[titleKey] = title;
  }
  else
  {
    htmlAttr.Add(titleKey, title);
  }

  return htmlHelper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(routeValues), htmlAttr);
}