Kim Harding Design ApS

Jeg arbejder i øjeblikket på en web-app som implementeres i ASP.NET MVC. Jeg har bl.a. brug for at generere en navigator som ser sådan her ud:

I HTML ser det sådan her ud:

<a class="activenavitab" href="/">Start</a><span class="hide"> | </span>
<a class="navitab" href="/news">Nyheder</a><span class="hide"> | </span>
<a class="navitab" href="/articles">Artikler</a><span class="hide"> | </span>
<a class="navitab" href="/videos">Video</a><span class="hide"> | </span>
<a class="navitab" href="/about">Om os</a><span class="hide"> | </span>
<a class="navitab" href="/contact">Kontakt</a><span class="hide"> | </span>

Navigatoren sidder på en masterpage og der skal derfor genereres HTML efter hvilken side, der er den aktive. CSS klassen på <a> skal være enten "activenavitab" eller "navitab" alt efter den aktive side.

Første bud på en implementation kunne være:

namespace KimHarding.CS.Web {
    public class NavigatorTab
    {
        public String Title;
        public String Url;
        public int Id;
    }

    public static class HtmlHelper {

        public static String Navigator(int selectedTabId, IEnumerable<NavigatorTab> tabs)
        {
            StringBuilder sb = new StringBuilder();
            foreach (var tab in tabs)
            {
                sb.AppendFormat(
                    "<a class=\"{0}\" href=\"{1}\">{2}</a><span class=\"hide\"> | </span>" , 
                    selectedTabId == tab.Id ? "activenavitab" : "navitab",
                    tab.Url,
                    tab.Title);
            }
            return sb.ToString();
        }
    }
}

I vores view vil vi kunne generere en navigator ved

<%= HtmlHelper.Navigator(selectedTabIndex, myTabs) %>

ASP.NET MVC ViewPage og HtmlHelper

I ASP.NET MVC er et view en subklasse af ViewPage og man bruger ikke kontroller til at generere HTML. Istedet har man i sit view adgang til et Html object som indeholder en række metoder til at generere HTML.

For at oprette et hyperlink kan man f.eks. gøre følgende i sit view:

<%= Html.ActionLink("Opret ny artikel", "New", "Articles") %>

og man vil få genereret:

<a href="/Articles/New">Opret ny artikel</a>

Egne metoder på HtmlHelper

I stedet for at lave sine egne utility-klasser med HTML genereringsmetoder, kan vi bruge extension-metoder til at sætte vores egne metoder ind på HtmlHelper.  Så vi i stedet for

<%= HtmlHelper.Navigator(selectedTabIndex, myTabs) %>

kan skrive

<%= Html.Navigator(selectedTabIndex, myTabs) %>

En let refactoring af vores kode giver den ønskede effekt:

namespace KimHarding.CS.Web {
    public class NavigatorTab
    {
        public String Title;
        public String Url;
        public int Id;
    }

    public static class HtmlHelperExtensions {

        public static String Navigator(
            this HtmlHelper htmlHelper,
            int selectedTabId,
            IEnumerable<NavigatorTab> tabs)
        {
            StringBuilder sb = new StringBuilder();
            foreach (var tab in tabs)
            {
                sb.AppendFormat(
                    "<a class=\"{0}\" href=\"{1}\">{2}</a><span class=\"hide\"> | </span>" , 
                    selectedTabId == tab.Id ? "activenavitab" : "navitab",
                    tab.Url,
                    tab.Title);
            }
            return sb.ToString();
        }
    }
}

For at få ASP.NET til at "loade" vores extension-metoder ind i rette scope skal der lige laves en tilføjelse til Web.config.