Click here to Skip to main content
15,797,984 members
Articles / Web Development / HTML

Lightweight vertical tabs using ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
22 Aug 2013CPOL1 min read 26.8K   508   8   2
Easily create vertical tabs on a web page with no JavaScript and minimum CSS.


I wrote for my web site a pretty control, based on a Partial View, which allows you to place vertical tabs on your web page easily with no JavaScript and minimum CSS.

Image 1

Using the code


Everything begins with a model that describes a tab control. This model has the following properties:

  1. Id: A unique identifier of the element. 
  2. Alignment: Describes where the tab is located: on the left or on the right side of the screen.
  3. Top: The offset that should be applied to a control from the top of the screen. 
  4. Href: Specifies where the browser should navigate on a click event. If not specified, will automatically generate an anchor based on the ID value, for instance, “#description”. You can override it with any custom URL. 
  5. TabImage: For this tab control, image should be used as a background. This property is resolved automatically by searching for an image with name equal to the ID property. For instance, “~/Content/img/description.png”. You can change this behavior, for me it was just convenient. 
public class TabWidgetModel
    public TabWidgetModel(String id, Alignment alignment, String top)
        this.Id = id;
        this.Alignment = alignment;
        this.Top = top;
        this.Href = "#" + this.Id;

    public TabWidgetModel(String id, Alignment alignment, String top, String href)
        this.Id = id;
        this.Alignment = alignment;
        this.Top = top;
        this.Href = href;

    public String Id { get; set; }

    public Alignment Alignment { get; set; }

    public String Top { get; set; }

    public String Href { get; set; }

    public String TabImage
        get { return "~/Content/img/" + this.Id + ".png"; }

Partial View

All common styles for tabs are stored in a CSS file. All styles particular for the specific tab are automatically generated in a view:

@model TabWidgetExample.Models.TabWidgetModel
body a#@Model.Id, body a#@Model.Id:link
{@Model.Alignment: 0;top: @this.Model.Top !important;margin-@this.Model.Alignment: -5px 
  !important;background-image: url(@Url.Content(this.Model.TabImage));}
body a#@this.Model.Id:hover
{ margin-@this.Model.Alignment: -3px !important; }
* html a#@this.Model.Id, * html a#@this.Model.Id:link
{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@Url.Content(this.Model.TabImage)'); }
<a id="@this.Model.Id" class="menu" href="@this.Model.Href"></a> 

How to use

Populate a list of required tabs in a controller: 

List<TabWidgetModel> model = new List<TabWidgetModel>();
//Left side
model.Add(new TabWidgetModel("about", Alignment.Left, "100px", ""));
//Right side
model.Add(new TabWidgetModel("shop", Alignment.Right, "100px"));
model.Add(new TabWidgetModel("news", Alignment.Right, "201px"));
model.Add(new TabWidgetModel("search", Alignment.Right, "302px"));
return View(model); 

Generate an HTML for the tabs in any place of you view using a Partial View:

@using TabWidgetExample.Models;
@model IList<TabWidgetModel>
    ViewBag.Title = "Index";
        <title>Tab Widgets</title>
        <link href="~/Content/css/tabWidget.css" 
           rel="stylesheet" type="text/css" />
    @foreach (TabWidgetModel tabWidget in this.Model)
    { @Html.Partial("TabWidget", tabWidget) }


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

Written By
Software Developer (Senior)
United States United States

Comments and Discussions

QuestionI don't see the "tabs" Pin
Florian Rappl24-Jul-13 22:09
professionalFlorian Rappl24-Jul-13 22:09 
AnswerRe: I don't see the "tabs" Pin
SupperSlonic25-Jul-13 4:30
SupperSlonic25-Jul-13 4:30 

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

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