Beruflich Dokumente
Kultur Dokumente
BackgroundCreate 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:
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.
Let's fetch all records from product table and pass the records to the view.
I have created Index action in Home controller. I have added Linq expression to fetch record
from producttable and type cast to List of product and pass that list to the view.
1
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. Divid
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.
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.
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.
2