TabStrip In Kendo UI For ASP.NET MVC

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







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 a View to the Controller.

Index Action Method - Right click and Add View.



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

Right Click Model Folder and Add Class.



Model class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace KenCloudClient.Models
{
    public class ClsSchemeViewModel
    {
        public int SchemeId
        {
            set;
            get;
        }

        public string SchemeName
        {
            set;
            get;
        }

        public decimal DiscPercentage
        {
            set;
            get;
        }

        public string SchemeDetails
        {
            set;
            get;
        }
    }
}

Design the View Page for Index Action

@model KenCloudClient.Models.ClsSchemeViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Scheme Details</h2>

<div class="container">
    <div class="row">
        @(Html.Kendo().TabStrip()
          .Name("tabstrip")
                  .HtmlAttributes(new { style="heigh:300px;width=800px;"})
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Gold")
                  .Selected(true)
                  .Content(@<text>
                    <div class="col-lg-11" style="float:left;">
                        @Html.Action("Gold")
                    </div>

                </text>);

              tabstrip.Add().Text("Platinum")
                  .Content(@<text>
                    <div class="row">
                        @Html.Action("Platinum")
                    </div>

                </text>);

              tabstrip.Add().Text("Enterprise")
                  .Content(@<text>
                    <div class="row">
                        @Html.Action("Enterprise")
                    </div>

                </text>);
          })
        )
    </div>
</div>

<style type="text/css">
    #forecast {
        width: 360px;
        height: 337px;
        margin: 30px auto;
        padding: 80px 15px 0 15px;
        background: url('@Url.Content("~/Content/web/tabstrip/forecast.png")') transparent no-repeat 0 0;
    }

    .sunny, .cloudy, .rainy {
        display: inline-block;
        margin: 20px 0 20px 10px;
        width: 128px;
        height: 128px;
        background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;
    }

    .cloudy{
        background-position: -128px 0;
    }

    .rainy{
        background-position: -256px 0;
    }

    .weather {
        width: 800px;
        padding: 40px 0 0 0;
        float:left;
    }

    #forecast h2 {
        font-weight: lighter;
        font-size: 5em;
        padding: 0;
        margin: 0;
    }

    #forecast h2 span {
        background: none;
        padding-left: 5px;
        font-size: .5em;
        vertical-align: top;
    }

    #forecast p {
        margin: 0;
        padding: 0;
    }
</style>

Explanation to the View Page



At The Controller

Declare ActionResult for Tab Item like Gold, Platinum, and Enterprise.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KenCloudClient.Models;

namespace KenCloudClient.Controllers
{
    public class SchemeController : Controller
    {
        ClsSchemeBusiness ClsBusiness = new ClsSchemeBusiness();

        // GET: Scheme
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Gold()
        {
            #region -- Action Method for Gold --

            var data = ClsBusiness.GetGoldScheme().ToList();

            ViewBag.GoldData = data;

            return View();

            #endregion
        }
        public ActionResult Platinum()
        {
            #region -- Action Method For Platinum --

            var data = ClsBusiness.GetPlatinumScheme().ToList();

            ViewBag.PlatinumData = data;

            return View();

            #endregion
        }
        public ActionResult EnterPrise()
        {
            #region -- Action Method For EnterPrise --

            var data = ClsBusiness.GetEnterPriseScheme().ToList();

            ViewBag.EnterPriseData = data;

            return View();

            #endregion
        }

    }
}

Add three different view pages for the TabPages.

These Views will display inside each TabPages.

Gold.cshtml

@{
    Layout = "";
}

<h2>Gold</h2>

<div class="col-lg-7" style=" float:left;">
    @{
        if (ViewBag.GoldData != null)
        {
            // Specify the type of the grid
             @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.GoldData)
                .Name("GoldGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.SchemeId).Visible(false);
                    columns.Bound(p => p.SchemeName).Width(200);
                    columns.Bound(p => p.DiscPercentage).Width(200);
                    columns.Bound(p => p.SchemeDetails).Width(300);
                })
                .Pageable()
                .Selectable(X => X.Mode(GridSelectionMode.Single))
                .Filterable()
                .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
                .Events(ev => ev.Change("onchange"))
            )
        }
    }

</div>

Platinum.cshtml

@{
    Layout = "";
}

<h2>Platinum</h2>

<div class="col-lg-7" style=" float:left;">
    @{
        if (ViewBag.PlatinumData != null)
        {
            // Specify the type of the grid
            @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.PlatinumData)
                .Name("PlatinumGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.SchemeId);
                    columns.Bound(p => p.SchemeName);
                    columns.Bound(p => p.DiscPercentage);
                    columns.Bound(p => p.SchemeDetails);
                })
                .Pageable()
                .Selectable(X => X.Mode(GridSelectionMode.Single))
                .Filterable()
                .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
                .Events(ev => ev.Change("onchange"))
            )
        }
    }

</div>

Enterprise.cshtml

@{
    Layout = "";
}

<h2>EnterPrise</h2>


<div class="col-lg-7" style=" float:left;">
    @{
        if (ViewBag.EnterPriseData != null)
        {
            // Specify the type of the grid
            @(Html.Kendo().Grid((IEnumerable<KenCloudClient.Models.ClsSchemeViewModel>)ViewBag.EnterPriseData)
                .Name("EnterPriseGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.SchemeId);
                    columns.Bound(p => p.SchemeName);
                    columns.Bound(p => p.DiscPercentage);
                    columns.Bound(p => p.SchemeDetails);
                })
                .Pageable()
                .Selectable(X => X.Mode(GridSelectionMode.Single))
                .Filterable()
                .DataSource(data => data.Ajax().PageSize(5).ServerOperation(false))
                .Events(ev => ev.Change("onchange"))
            )
        }
    }

</div>

Business Logic Code at ClsSchemeBusiness.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using KenCloudClient.Models;
namespace KenCloudClient.Models
{
    public class ClsSchemeBusiness
    {
        internal List < ClsSchemeViewModel > GetGoldScheme()
        {
            using(KenClientModel ObjContext = new KenClientModel())
            {
                var SchemeData = ObjContext.SysSchemes.ToList();
                var Temp = (from A in SchemeData where A.SchemeName == "Gold"
                    select new ClsSchemeViewModel
                    {
                        SchemeId = A.SchemeId,
                            SchemeName = A.SchemeName,
                            DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
                            SchemeDetails = A.SchemeDetails
                    }).ToList();
                return Temp;
            }
        }
        internal List < ClsSchemeViewModel > GetPlatinumScheme()
        {
            using(KenClientModel ObjContext = new KenClientModel())
            {
                var SchemeData = ObjContext.SysSchemes.ToList();
                var Temp = (from A in SchemeData where A.SchemeName == "Platinum "
                    select new ClsSchemeViewModel
                    {
                        SchemeId = A.SchemeId,
                            SchemeName = A.SchemeName,
                            DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
                            SchemeDetails = A.SchemeDetails
                    }).ToList();
                return Temp;
            }
        }
        internal List < ClsSchemeViewModel > GetEnterPriseScheme()
        {
            using(KenClientModel ObjContext = new KenClientModel())
            {
                var SchemeData = ObjContext.SysSchemes.ToList();
                var Temp = (from A in SchemeData where A.SchemeName == "EnterPrise "
                    select new ClsSchemeViewModel
                    {
                        SchemeId = A.SchemeId,
                            SchemeName = A.SchemeName,
                            DiscPercentage = Convert.ToDecimal(A.DiscPercentage),
                            SchemeDetails = A.SchemeDetails
                    }).ToList();
                return Temp;
            }
        }
    }
}

That is all!
Thank you.