Vertical Tabs Control

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

Model

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

  • Id – a unique identifier of the element;
  • Alignment – describes where the tab is located: on the left or on the right side of the screen;
  • Top – the offset that should be applied to a control from the top of the screen;
  • 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;
  • 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.

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:

Controller

Populate a list of required tabs in a controller:

How to use

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