Tabs in ASP.NET MVC

The tab structure is a simple ul-li

<ul id="tabs" >  
   <li>Tab1</li >  
   <li>Tab2</li >  
<ul >

It's important that when you navigated to a tab, you set the elelment (li) a different class that box the element with some kind of border (in this css is with activeLi)

CSS:

#tabs a:link, #tabs a:visited
{
    color : #666;
    padding:5px;
}

#tabs a:link:active, #tabs a:visited:active, #tabs a:hover, .ui-state-active {
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px;
}

.activeLi a
{
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px; 
}

#tabs
{
    text-align:right;
    border-bottom : 1px solid #8EDF53;
    margin-bottom:20px;
}

#tabs li
{
    display:inline;
}

This code will look like: alt text http://s3.amazonaws.com/twitpic/photos/large/17838970.png?AWSAccessKeyId=0ZRYP5X5F6FSMBCCSE82&Expires=1247824102&Signature=X6%2F8QujBSGzp9iPvh5ocvEj5a8c%3D

Of course jQuery has a plugin too: jQuery core and jQuery tabs

You have to build them from HTML yourself. Follow any of the many examples out there (here's one!) to construct the tabs from HTML. Then use <%= Html.ActionLink("Action Links","to create", new { hurf="the links in the tab's anchors."}) %>

Send information down in ViewData that will enable you to create a ul / li structure in the html of the MVC page and use CSS to transform it. Maybe spruce it up a little with JQuery.

This is a nice tutorial for the display side of things.

The NerdDinner sample on asp.net has a tab.

In fact, when you use Visual Studio to create you an MVC solution, the Master page comes with a tab.

Check out JQuery tabs. It makes your job very simple

using Bootstrap along with jQuery:

HTML codes:

<div id="tabs">
            <ul style="list-style: none;" class="nav nav-tabs">
                <li><a id="orthForm" href="#" onclick="getRelatedItemList('orthForm', @Model.CaseID)">Orthodontic Form</a></li>
                <li><a id="xray" href="#" onclick="getRelatedItemList('xray', @Model.CaseID)">X-Ray</a></li>
                <li><a id="fileTab" href="#" onclick="getRelatedItemList('files', @Model.CaseID)">Files</a></li>
                <li><a id="visitTab" href="#" onclick="getRelatedItemList('visits', @Model.CaseID)">Visits</a></li>
                <li><a id="noteTab" href="#" onclick="getRelatedItemList('notes', @Model.CaseID)">Notes</a></li>
            </ul>
            <div class="tab-content" id="tabContent">

            </div>
        </div> 

jQuery Ajax:

function getRelatedItemList(itemType, caseId) {
console.log(itemType);
console.log(caseId);

var controller = "File";
var action = "CaseFiles";

if (itemType === "visits") {
    controller = "Visits";
    action = "CaseVisits";
}
else if(itemType==="notes") {
    controller = "Notes";
    action = "CaseNotes";
}
else if (itemType === "xray") {
    controller = "Home";
    action = "UnderDeveloping";
}
else if (itemType === "orthForm") {
    controller = "Home";
    action = "UnderDeveloping";
}

$.ajax(
    {
        url: "/" + controller + "/" + action,
        data: { caseId: caseId }
    }
    ).done(
        function(data) {
            console.log(data);
            $('#tabContent').empty();
            $('#tabContent').append(data);
        }
    );

}