Post
Ask Question

TabStrip In Kendo UI For ASP.NET MVC

This is a sample program to show TabStrip in Kendo UI.

Gold

Platinum

Table

Steps

  • We need one Controller.
  • We need one Index Action.
  • Three different Action and Views to call inside the Index Action view.

Add a Controller

Add controller

Add a View to the Controller.

Index Action Method - Right click and Add View.

Add view

Before designing the Index view add a View Model to the Project named ClsSchemeViewModel.

Right Click Model Folder and Add Class.

Add class

Model class

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace KenCloudClient.Models  
  7. {  
  8.     public class ClsSchemeViewModel   
  9.     {  
  10.         public int SchemeId  
  11.         {  
  12.             set;  
  13.             get;  
  14.         }  
  15.   
  16.         public string SchemeName  
  17.         {  
  18.             set;  
  19.             get;  
  20.         }  
  21.   
  22.         public decimal DiscPercentage  
  23.         {  
  24.             set;  
  25.             get;  
  26.         }  
  27.   
  28.         public string SchemeDetails  
  29.         {  
  30.             set;  
  31.             get;  
  32.         }  
  33.     }  
  34. }  
Design the View Page for Index Action
  1. @model KenCloudClient.Models.ClsSchemeViewModel  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6.   
  7. <h2>Scheme Details</h2>  
  8.   
  9. <div class="container">  
  10.     <div class="row">  
  11.         @(Html.Kendo().TabStrip()  
  12.           .Name("tabstrip")  
  13.                   .HtmlAttributes(new { style="heigh:300px;width=800px;"})  
  14.           .Items(tabstrip =>  
  15.           {  
  16.               tabstrip.Add().Text("Gold")  
  17.                   .Selected(true)  
  18.                   .Content(@<text>  
  19.                     <div class="col-lg-11" style="float:left;">  
  20.                         @Html.Action("Gold")  
  21.                     </div>  
  22.   
  23.                 </text>);  
  24.   
  25.               tabstrip.Add().Text("Platinum")  
  26.                   .Content(@<text>  
  27.                     <div class="row">  
  28.                         @Html.Action("Platinum")  
  29.                     </div>  
  30.   
  31.                 </text>);  
  32.   
  33.               tabstrip.Add().Text("Enterprise")  
  34.                   .Content(@<text>  
  35.                     <div class="row">  
  36.                         @Html.Action("Enterprise")  
  37.                     </div>  
  38.   
  39.                 </text>);  
  40.           })  
  41.         )  
  42.     </div>  
  43. </div>  
  44.   
  45. <style type="text/css">  
  46.     #forecast {  
  47.         width: 360px;  
  48.         height: 337px;  
  49.         margin: 30px auto;  
  50.         padding: 80px 15px 0 15px;  
  51.         background: url('@Url.Content("~/Content/web/tabstrip/forecast.png")') transparent no-repeat 0 0;  
  52.     }  
  53.   
  54.     .sunny, .cloudy, .rainy {  
  55.         display: inline-block;  
  56.         margin: 20px 0 20px 10px;  
  57.         width: 128px;  
  58.         height: 128px;  
  59.         background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;  
  60.     }  
  61.   
  62.     .cloudy{  
  63.         background-position: -128px 0;  
  64.     }  
  65.   
  66.     .rainy{  
  67.         background-position: -256px 0;  
  68.     }  
  69.   
  70.     .weather {  
  71.         width: 800px;  
  72.         padding: 40px 0 0 0;  
  73.         float:left;  
  74.     }  
  75.   
  76.     #forecast h2 {  
  77.         font-weight: lighter;  
  78.         font-size: 5em;  
  79.         padding: 0;  
  80.         margin: 0;  
  81.     }  
  82.   
  83.     #forecast h2 span {  
  84.         background: none;  
  85.         padding-left: 5px;  
  86.         font-size: .5em;  
  87.         vertical-align: top;  
  88.     }  
  89.   
  90.     #forecast p {  
  91.         margin: 0;  
  92.         padding: 0;  
  93.     }  
  94. </style>  
Explanation to the View Page

View Page

At The Controller

Declare ActionResult for Tab Item like Gold, Platinum, and Enterprise.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using KenCloudClient.Models;  
  7.   
  8. namespace KenCloudClient.Controllers  
  9. {  
  10.     public class SchemeController : Controller  
  11.     {  
  12.         ClsSchemeBusiness ClsBusiness = new ClsSchemeBusiness();  
  13.   
  14.         // GET: Scheme  
  15.         public ActionResult Index()  
  16.         {  
  17.             return View();  
  18.         }  
  19.   
  20.         public ActionResult Gold()  
  21.         {  
  22.             #region -- Action Method for Gold --   
  23.   
  24.             var data = ClsBusiness.GetGoldScheme().ToList();  
  25.   
  26.             ViewBag.GoldData = data;  
  27.   
  28.             return View();  
  29.  
  30.             #endregion  
  31.         }  
  32.         public ActionResult Platinum()  
  33.         {  
  34.             #region -- Action Method For Platinum --    
  35.   
  36.             var data = ClsBusiness.GetPlatinumScheme().ToList();  
  37.   
  38.             ViewBag.PlatinumData = data;  
  39.   
  40.             return View();  
  41.  
  42.             #endregion  
  43.         }  
  44.         public ActionResult EnterPrise()  
  45.         {  
  46.             #region -- Action Method For EnterPrise --    
  47.   
  48.             var data = ClsBusiness.GetEnterPriseScheme().ToList();  
  49.   
  50.             ViewBag.EnterPriseData = data;  
  51.   
  52.             return View();  
  53.          
  54.             #endregion  
  55.         }  
  56.   
  57.     }  
  58. }  
Add three different view pages for the TabPages.

These Views will display inside each TabPages.

Gold.cshtml
  1. @{  
  2.     Layout = "";  
  3. }  
  4.   
  5. <h2>Gold</h2>  
  6.   
  7. <div class="col-lg-7" style=" float:left;">  
  8.     @{  
  9.         if (ViewBag.GoldData != null)  
  10.         {  
  11.             // Specify the type of the grid  
  12.              @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.GoldData)  
  13.                 .Name("GoldGrid")                  
  14.                 .Columns(columns =>  
  15.                 {  
  16.                     columns.Bound(p => p.SchemeId).Visible(false);  
  17.                     columns.Bound(p => p.SchemeName).Width(200);  
  18.                     columns.Bound(p => p.DiscPercentage).Width(200);  
  19.                     columns.Bound(p => p.SchemeDetails).Width(300);  
  20.                 })  
  21.                 .Pageable()  
  22.                 .Selectable(X => X.Mode(GridSelectionMode.Single))  
  23.                 .Filterable()  
  24.                 .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))  
  25.                 .Events(ev => ev.Change("onchange"))  
  26.             )  
  27.         }  
  28.     }  
  29.     
  30. </div>  
Platinum.cshtml
  1. @{  
  2.     Layout = "";  
  3. }  
  4.   
  5. <h2>Platinum</h2>  
  6.   
  7. <div class="col-lg-7" style=" float:left;">  
  8.     @{  
  9.         if (ViewBag.PlatinumData != null)  
  10.         {  
  11.             // Specify the type of the grid  
  12.             @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.PlatinumData)  
  13.                 .Name("PlatinumGrid")  
  14.                 .Columns(columns =>  
  15.                 {  
  16.                     columns.Bound(p => p.SchemeId);  
  17.                     columns.Bound(p => p.SchemeName);  
  18.                     columns.Bound(p => p.DiscPercentage);  
  19.                     columns.Bound(p => p.SchemeDetails);  
  20.                 })  
  21.                 .Pageable()  
  22.                 .Selectable(X => X.Mode(GridSelectionMode.Single))  
  23.                 .Filterable()  
  24.                 .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))  
  25.                 .Events(ev => ev.Change("onchange"))  
  26.             )  
  27.         }  
  28.     }  
  29.   
  30. </div>  
Enterprise.cshtml
  1. @{  
  2.     Layout = "";  
  3. }  
  4.   
  5. <h2>EnterPrise</h2>  
  6.   
  7.   
  8. <div class="col-lg-7" style=" float:left;">  
  9.     @{  
  10.         if (ViewBag.EnterPriseData != null)  
  11.         {  
  12.             // Specify the type of the grid  
  13.             @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.EnterPriseData)  
  14.                 .Name("EnterPriseGrid")  
  15.                 .Columns(columns =>  
  16.                 {  
  17.                     columns.Bound(p => p.SchemeId);  
  18.                     columns.Bound(p => p.SchemeName);  
  19.                     columns.Bound(p => p.DiscPercentage);  
  20.                     columns.Bound(p => p.SchemeDetails);  
  21.                 })  
  22.                 .Pageable()  
  23.                 .Selectable(X => X.Mode(GridSelectionMode.Single))  
  24.                 .Filterable()  
  25.                 .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))  
  26.                 .Events(ev => ev.Change("onchange"))  
  27.             )  
  28.         }  
  29.     }  
  30.   
  31. </div>  
Business Logic Code at ClsSchemeBusiness.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using KenCloudClient.Models;  
  6. namespace KenCloudClient.Models  
  7. {  
  8.     public class ClsSchemeBusiness  
  9.     {  
  10.         internal List < ClsSchemeViewModel > GetGoldScheme()  
  11.         {  
  12.             using(KenClientModel ObjContext = new KenClientModel())  
  13.             {  
  14.                 var SchemeData = ObjContext.SysSchemes.ToList();  
  15.                 var Temp = (from A in SchemeData where A.SchemeName == "Gold"  
  16.                     select new ClsSchemeViewModel  
  17.                     {  
  18.                         SchemeId = A.SchemeId,  
  19.                             SchemeName = A.SchemeName,  
  20.                             DiscPercentage = Convert.ToDecimal(A.DiscPercentage),  
  21.                             SchemeDetails = A.SchemeDetails  
  22.                     }).ToList();  
  23.                 return Temp;  
  24.             }  
  25.         }  
  26.         internal List < ClsSchemeViewModel > GetPlatinumScheme()  
  27.         {  
  28.             using(KenClientModel ObjContext = new KenClientModel())  
  29.             {  
  30.                 var SchemeData = ObjContext.SysSchemes.ToList();  
  31.                 var Temp = (from A in SchemeData where A.SchemeName == "Platinum "  
  32.                     select new ClsSchemeViewModel  
  33.                     {  
  34.                         SchemeId = A.SchemeId,  
  35.                             SchemeName = A.SchemeName,  
  36.                             DiscPercentage = Convert.ToDecimal(A.DiscPercentage),  
  37.                             SchemeDetails = A.SchemeDetails  
  38.                     }).ToList();  
  39.                 return Temp;  
  40.             }  
  41.         }  
  42.         internal List < ClsSchemeViewModel > GetEnterPriseScheme()  
  43.         {  
  44.             using(KenClientModel ObjContext = new KenClientModel())  
  45.             {  
  46.                 var SchemeData = ObjContext.SysSchemes.ToList();  
  47.                 var Temp = (from A in SchemeData where A.SchemeName == "EnterPrise "  
  48.                     select new ClsSchemeViewModel  
  49.                     {  
  50.                         SchemeId = A.SchemeId,  
  51.                             SchemeName = A.SchemeName,  
  52.                             DiscPercentage = Convert.ToDecimal(A.DiscPercentage),  
  53.                             SchemeDetails = A.SchemeDetails  
  54.                     }).ToList();  
  55.                 return Temp;  
  56.             }  
  57.         }  
  58.     }  
  59. }  
That is all!
Thank you.

 


Similar Articles