Question

I have created an asp.net mvc2 project using the standard visual studio template which contains 2 tabs Home and About.

In the Home tab I want to add sub tabs from here http://labs.silverorange.com/archive/2003/september/simplecsstabs

How do I do this : can I create sub-component and sub-controller or what ?

I’m beginner at asp.net and MVC so can’t there be a beginner solution that is close as much as possible to t to the plain css tabs ?

Answer 1

You could write a custom HTML helper that will generate those sub tabs based on the current controller and action. Here’s an example to get you started:

public static class HtmlExtensions
{
    public static MvcHtmlString SubTabs(this HtmlHelper htmlHelper)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");

        // TODO: base on the current action and controller 
        // generate proper tabs       

        var ul = new TagBuilder("ul");
        var lis = new StringBuilder();
        var li = new TagBuilder("li");
        li.InnerHtml = htmlHelper.ActionLink("sub 1", "sub1", "home").ToHtmlString();
        lis.AppendLine(li.ToString());
        li = new TagBuilder("li");
        li.InnerHtml = htmlHelper.ActionLink("sub 2", "sub2", "home").ToHtmlString();
        lis.AppendLine(li.ToString());

        ul.InnerHtml = lis.ToString();
        return MvcHtmlString.Create(ul.ToString());
    }
}

and then in your view:

<%= Html.SubTabs() %>

Obviously in my example everything is hardcoded. You might want to keep some centralized hashtable of sub tabs corresponding to given controller and action. Once you get the proper markup simply apply the CSS from the site you are referred to in your question and you are good to go.