Telerik Extensions for ASP.NET MVC
Contents

This topic shows how to use Telerik TabStrip for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the tabstrip).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

TabStrip definition

The TabStrip is made of TabStripItem objects. Here is how to define a simple Telerik TabStrip for ASP.NET MVC with two items and a content:

CopyView
<% 
    Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(items =>
        {
            items.Add().Text("Item 1")
                 .Content(()=>
                 {%>
                     <p>Content</p>
                 <%});
            items.Add().Text("Item 2");
        })
        .Render(); 
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the tabstrip which is later output as the id HTML attribute and used by Telerik Extensions for ASP.NET MVC. Setting the name is mandatory and exception would be thrown otherwise.
  • The Items method is used to define the items of the tabstrip. The passed action sets the properties of the items.
  • The Add method adds a new TabStripItem to the tabstrip.
  • The Text method sets the text displayed by the TabStripItem object.
  • The Content method is used to specify the content of the TabStripItem object.
  • Finally the Render method outputs the HTML of the tabstrip.
    Important
    It is mandatory that the Render method is called. If not the component will not output any HTML.

See Also