Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML
Tip/Trick

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 27.2K   508   8   2
Easily create vertical tabs on a web page with no JavaScript and minimum CSS.

Introduction

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

Model

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. 
C#
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:

ASP.NET
@model TabWidgetExample.Models.TabWidgetModel
<style>
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)'); }
</style>
<a id="@this.Model.Id" class="menu" href="@this.Model.Href"></a> 

How to use

Populate a list of required tabs in a controller: 

C#
List<TabWidgetModel> model = new List<TabWidgetModel>();
//Left side
model.Add(new TabWidgetModel("about", Alignment.Left, "100px", "http://supperslonic.com"));
//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:

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

License

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
https://supperslonic.com/
https://www.facebook.com/profile.php?id=100004059913750

Comments and Discussions

 
QuestionI don't see the "tabs" Pin
Florian Rappl24-Jul-13 21:09
professionalFlorian Rappl24-Jul-13 21:09 
AnswerRe: I don't see the "tabs" Pin
SupperSlonic25-Jul-13 3:30
SupperSlonic25-Jul-13 3:30 
Frlorian, thank you for your comments…

Yes, basically it is just a link. The main purpose of this article is to show how to make it look like a tab and be able to place it vertically on you web page attached to the left or right sides.

You can easily override the Href property in the model and place there either a link or a JavaScript action. In the second case you are free to do whether you like: stay on the same page, hide and display content, navigate to a different page.

In my case, I was fine using anchors. Sometimes it is better to use a simple URL, without any JavaScript so that the user is able to bookmark it if required.

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.