CODEWITHSUNDEEP
htmlcss
karthi
karthi

Reputation:

Tabs in ASP.NET MVC

I want to bring the TAB structure in asp.net mvc page. How I can do this ? Thanks in advance.

Upvotes: 2

Views: 2191

Answers (6)

Hong Yi
Hong Yi

Reputation: 74

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);
        }
    );

}

Upvotes: 0

Vivek
Vivek

Reputation:

Check out JQuery tabs. It makes your job very simple

Upvotes: 0

Davide Vosti
Davide Vosti

Reputation: 2485

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

Upvotes: 3

griegs
griegs

Reputation: 22760

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.

Upvotes: 0

NikolaiDante
NikolaiDante

Reputation: 18639

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.

Upvotes: 0

user1228
user1228

Reputation:

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."}) %>

Upvotes: 1

Related Questions