Question

I been playing around with some custom html helpers and I now I am trying to make one that I can use for jquery AJAX UI Tabs.

So to do ajax tabs you need to have this format in your html code

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

so I can’t use ActionLink because I don’t think I can add anyway the tag to the actionLink.

So I want to make my own html helper that has an actionLink with a span tag in it and possibly build it up later on to have an unordered listed tag with it.

So I am not sure how to use the ActionLink to my benefit. Like the ActionLink has 10 overloaded methods and I don’t want to recreate all 10 of them since that just seems pointless. So is there away I can reference it or something like that?

I am using the way that allows my custom html helpers to show up when you do “Html.” in intellisense.

for instance I would have:

public static string Button(this HtmlHelper helper, string id, string value)

So I am not sure how to make use of this HtmlHelper I am passing in.

I also don’t understand this part of the line of code “this HtmlHelper helper”.

What confuses me is the using the keyword “this” in the parameter. I am not sure what it is refering to and why you need it. I also don’t understand how by passing this parameter but not using it somehow allows your customer Html helpers to be accesed by “Html.”.

Thanks

Answer 1

Marc’s answer is excellent. Just adding some code:

1) Create static class with your helper:

public static class MyHtmlHelpers
{
    public static string MySpecialActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues)
    {
        var innerTagBuilder = new TagBuilder("span") {
            InnerHtml = (!String.IsNullOrEmpty(linkText)) ? HttpUtility.HtmlEncode(linkText) : String.Empty
        };

        TagBuilder tagBuilder = new TagBuilder("a") {
            InnerHtml = innerTagBuilder.ToString(TagRenderMode.Normal);
        };

        var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
        var url = urlHelper.Action(actionName, routeValues);
        tagBuilder.MergeAttribute("href", url);

        return tagBuilder.ToString(TagRenderMode.Normal);
    }
}

2) Add namespace of MyHtmlHelpers class to web.config:

<pages>
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Linq" />
    <add namespace="System.Collections.Generic" />

    <add namespace="MyHtmlHelpers_Namespace" />
  </namespaces>
</pages>

3) Enjoy 🙂 :

<div id="example">
    <ul>
        <li><%= Html.MySpecialActionLink("Content 1", "action1", null) %></li>
        <li><%= Html.MySpecialActionLink("Content 2", "action2", new { param2 = "value2" }) %></li>
        <li><%= Html.MySpecialActionLink("Content 3", "action3", new { param3 = "value3" }) %></li>
    </ul>
</div>