Model Binding

The TabStrip enables you to bind it to a hierarchical model and populate its tabs dynamically based on a server-side model collection.

To configure the TabStrip for local data binding using a model collection, follow the next steps:

1. Create a new Action method and pass the Categories table as the model.

   C#

   public ActionResult Index()
   {
       NorthwindDataContext northwind = new NorthwindDataContext();
   
       return View(northwind.Categories);
   }

2. Add the model to the View.

   Razor

   @model IEnumerable<MvcApplication1.Models.Category>

3. Define the TabStrip and bind it to the model data.

   Razor

       @(Html.Kendo().TabStrip()
           .Name("tabstrip") // The name of the TabStrip is mandatory. It specifies the "id" attribute of the TabStrip HTML element.
           .BindTo(Model,(item,category)  =>
           {
               item.Text = category.CategoryName;
               item.ContentUrl = "/Home/TabContent?tabId=" + category.CategoryID;
           })
       )

   C#

   public PartialViewResult TabContent(int tabId) 
   {
       NorthwindDataContext northwind = new NorthwindDataContext();
       var category = northwind.Categories.Where(x => x.CategoryID == tabId).FirstOrDefault();
       return PartialView("_TabContentPartial", category);
   }

   Razor

   @model MvcApplication1.Models.Category
   
   @{
       Layout = null;
   }
   
   <!-- Tab content-->
   <h3>@Model.CategoryName</h3>
   <p>@Model.Description</p>

See Also

• Basic Usage of the TabStrip HtmlHelper for ASP.NET MVC (Demo)
• Using the API of the TabStrip HtmlHelper for ASP.NET MVC (Demo)
• TabStripBuilder Server-Side API
• TabStrip Server-Side API