Click here to Skip to main content
Click here to Skip to main content

Tagged as

How to Create Tab View in MVC3?

, 22 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create Tab View in MVC3?

Introduction

This is a simple tutorial to explain how to use jquery UI tab in MVC3 to create tabview in MVC. MVC does not support server side ASP.NET control like ASP.NET. MVC3 specially contains HTML helper class and Ajax class to support UI design. There is no helper class method that will provide tabview for the UI. In this tutorial, I will demonstrate how to create tabview in MVC3 using jquery UI tab plugin. I have not explained how to use jquery UI tab plugin because that is done better in jquery side. I request you to download jquery plugin and read how to use the plugin from here.

Background

Create MVC3 empty project by selecting view engine as the Razor view. Add Home Controller and Index Action. I have Database name Demo in my App_Data folder. For demo purposes, I have added Product table in my database. Product table contains the product id, product name and product description as follows:

Product Id

Product Name

Product Description

1

Bag

Cost up to 3 thousand. Manufacture product a and Product b.

2

Pen

Cost up to 500 Rs. Contain gel and ink pen.

3

Pencile

Cost up to 100 Rs. Contain 4,3,2,1 B pencile.

4

NoteBook

Cost up to 200 Rs. Contain 200 pages and 400 pages book.

My intention is to create a simple Tab view where product name is defined as the tab and product description is defined as the tab content.

Using the Code

Let's start building our TabView using Jquery UI Tab. I have created ADO.NET entity data model named Demo.edmx as my Model in Model folder of MVC project.

I have instantiated Model entity class as follows:

   DemoEntities db = new DemoEntities(); 

Let's fetch all records from product table and pass the records to the view.

        public ActionResult Index()
        {
            IList<Product> productList = new List<Product>();
            productList = (from m in db.Products select m).ToList<Product>();
            return View(productList);
        }

I have created Index action in Home controller. I have added Linq expression to fetch record from product table and type cast to List of product and pass that list to the view.

All set now, let's create TabView with just a two step process.

Step 1: For each tab, create list item having anchor tag with unique id prefix with '#' representing caption of the tab.

Step 2: For each list item, add div with same id as that of anchor tag id representing content of the tab. Div id is not prefixed with '#'.

Note: For each tab anchor tag and div tag, id is the same but anchor tag id is prefixed with # where div tag id is not.

Rest of the magic is done by the JQuery UI Tab.

I have created strongly typed Index view of typeof IEnumerable collection of product entity class and pass the list of product entity class to the View.

@model IEnumerable<TabViewDemo.Models.Product>
@{
    ViewBag.Title = "Index";
}
<div id="tabs">
    <ul>
        @foreach (var item in Model)
        {
            <li><a href=#@item.Name>@item.Name</a></li>
        }
    </ul>
    @foreach (var item in Model)
    {
        <div id=@item.Name>
         @item.Description
        </div>
    }
</div>

I have set product name as my tab caption and product description as my tab content. Tab caption is represented by the link name. Tab content is represented by the div. Link and div elements having the same id represent a tab.
Note: Link id prefix with # where div id is not. I have a unique product name in my product table. I have kept product name as link and div id where link id prefix with #.

Please confirm that you have added the following JQuery and CSS.

    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" 
    type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" 
    rel="stylesheet" type="text/css" />
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script> 

We have selected the div with id tabs as our tabview container which contains un-ordered list with anchor tag as tab caption and div tag as tab content that will be converted into tabview. Rest of the magic is done by the jquery UI tab plugin. You can customize your tab view based on your requirement by modifying CSS "content/themes/base/jquery-ui.css". This ends our simple demo of tabview. Hope you enjoyed this demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amey K Bhatkar
Web Developer Lionbridge
India India
Amey K Bhatkar, a “Microsoft .Net” Web Developer.
I am programmer by will and profession.
I have completed my MCA in 2011 and join software industry.
Presently I am working with Lion Bridge Technologies in Mumbai - India
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionFine!!!!!!! PinmemberVolynsky Alex22-Dec-13 13:09 
QuestionNice PinmemberJúnior Pacheco22-Dec-13 10:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 22 Dec 2013
Article Copyright 2013 by Amey K Bhatkar
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid