Partial View In MVC With Kendo UI TabStrip

Prerequisite

Basic knowledge of MVC.
Basic knowledge of Kendo UI.
Basic knowledge of jQuery.

Article flow

Introduction about Partial View.
Create Project.
Integrate Kendo Tabstrip in View.
Create Partial View.
Injecting all Partial View into Kendo Tabstrip.
Different ways of injecting Partial View in View.
Difference between View and Partial View.
Benefits of Partial View.

Introduction about Partial View

Partial View is a resuable view, which can use in multiple places/views. We can use Partial View in the Layout View as well as other content views. Here, we can say it's same as UserControl in ASP.NET.

Partial View is like a regular view in the extension of .cshtml and by default, its name starts with "_"(underscore).

Create Project

To create a new project, follow the steps given below.

After giving the proper name, select Empty Project in MVC, as shown below.

Create Controller

To create Controller, right click Controller folder under Your Project and Add to Select Controller.

After selecting Controller, select Empty controller and click Add.

Now, give the controller name as Kendo and Click Add to Create Controller in the name of KendoController.

Create Normal View

To create View, right click the Action method in Controller and select Add view.

To create a view without modal, proceed, as shown below.

Integrate Kendo Tabstrip with MVC View

After creating View, you can see the _Layout.cshtml View in shared foler under View. To Integrate Kendo Tabstrip, we should add CSS and Script given below in _Layout.cshmtl page.

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

Add div tag given below to enable Kendo Tabstrip in our page.

<div id="example">
<div class="demo-section k-content">
<div id="tabstrip">
<ul>
<li class="k-state-active"> Tab-1 </li>
<li> Tab-2 </li>
<li> Tab-3 </li>
<li> Tab-4 </li>
</ul>
<div> <span class="rainy"> </span>
<div class="weather">
<h2>Tab<span>º1</span></h2>
<p>Example Content</p>
</div>
</div>
<div> <span class="sunny"> </span>
<div class="weather">
<h2>Tab<span>º2</span></h2>
<p>Example Content</p>
</div>
</div>
<div> <span class="sunny"> </span>
<div class="weather">
<h2>Tab<span>º3</span></h2>
<p>Example Content</p>
</div>
</div>
<div> <span class="cloudy"> </span>
<div class="weather">
<h2>Tab<span>º4</span></h2>
<p>Example Content</p>
</div>
</div>
</div>
</div>
</div>

Add sciprt tag to enable Kendo Tabstrip for the respective div.

<script type="text/javascript">
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});
</script>

#tabstrip represents the id of div tag given above. Finally, the Index.chtml view will be depicted, as shown below.

@ {
ViewBag.Title = "Index";
} < head > < script type = "text/javascript" > $(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
}); < /script> < /head> < body > < div id = "example" > < div class = "demo-section k-content" > < div id = "tabstrip" > < ul > < li class = "k-state-active" > Tab - 1 < /li> < li > Tab - 2 < /li> < li > Tab - 3 < /li> < li > Tab - 4 < /li> < /ul> < div > < span class = "rainy" > & nbsp; < /span> < div class = "weather" > < h2 > Tab < span > & ordm;
1 < /span></h
2 > < p > Example Content < /p> < /div> < /div> < div > < span class = "sunny" > & nbsp; < /span> < div class = "weather" > < h2 > Tab < span > & ordm;
2 < /span></h
2 > < p > Example Content < /p> < /div> < /div> < div > < span class = "sunny" > & nbsp; < /span> < div class = "weather" > < h2 > Tab < span > & ordm;
3 < /span></h
2 > < p > Example Content < /p> < /div> < /div> < div > < span class = "cloudy" > & nbsp; < /span> < div class = "weather" > < h2 > Tab < span > & ordm;
4 < /span></h
2 > < p > Example Content < /p> < /div> < /div> < /div> < /div> < /div> < /body>

Now, change the RouteConfig .cs under App_Start folder.

Give your Controller name in Controller and Action Method name in action. Here, I mentioned as "Master" as Controller and "Index" as action.

namespace PartialDemo {
public class RouteConfig {
public static void RegisterRoutes(RouteCollection routes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
controller = "Kendo", action = "Index", id = UrlParameter.Optional
});
}
}
}

Now, build and run the Application to see the enabled Kendo-Tabstrip in our Application and the screen will be depicted, as shown below.

Use of Tabstrip

We can load multiple pages in Single View.
We can perform Multiple Redirection in single URL or in single view.

Create Partial View

We had already seen the introduction about Partial View. Follow the steps given below to create Partial View. Right click on View or Specific Controller View to add Partial View.

Partial View always starts with underscore "_". Now, give the proper name to create Partial View. Here, I am giving the name as "_Tab1Content".

Similarly, create Four Partial View in same controller ("_Tab2Content","_Tab3Content","_Tab4Content").

Now add few static contents in Partial View. Here, I am adding div tag given below in _Tab1Content.cshtml.

<div>
<p>am _Tab1 Content Example</p>
</div> Like this i added content to all partial view _Tab2Content.cshtml
<div>
<p>am _Tab2 Content Example</p>
</div> _Tab3Content.cshtml
<div>
<p>am _Tab3 Content Example</p>
</div> _Tab4Content.cshtml
<div>
<p>am _Tab4 Content Example</p>
</div>

Injecting all Partial View into Kendo Tabstrip

Now, render Partial View in an Index page.

Now, run your Application and you can see Partial View content is loaded with Kendo UI Tabstrip.

Different ways of injecting Partial View in View

We injected Partial View, using @Html.Partial. Now, we can call Partial View in two ways in Razor View. We may call the Partial View, using @Html.RenderPartial also.

Calling in two ways

@Html.Partial()
@Html.RenderPartial()

Both types overloads the methods given below.

Partial/RenderPartial(HtmlHelper, String).
Partial/RenderPartial(HtmlHelper, String, Object).
Partial/RenderPartial(HtmlHelper, String, Object, ViewDataDictionary).
Partial/RenderPartial(HtmlHelper, String, ViewDataDictionary).
Partial/RenderPartial(this HtmlHelper htmlHelper,string partialViewName,object model,ViewDataDictionary viewData).

In the next article, we will see how to use the multiparameter while calling Partial View. Now, change into @html.Partial("Partialviewname") into @html. RenderPartial is used ("Partialviewname") to see the difference in an Index View.

Now, run your Application to find the difference.

In the screen given above, we can not find any difference because it returns the same result.

Difference Between @Html.Partial() and @Html.RenderPartial()

@Html.Partial()	@Html.RenderPartial()
1. This method renders the View as HTML-encoded string. We can store the method result in a string variable.	1.This method returns Nothing(Void) since it's written directly into HTTP response. It means that this method uses the same TextWriter object, as used by the current View.

Difference Between View and Partial View

Here we have used the Partial view as well as view, Lets discuss the difference?

View	PartialView
1.It may have many markup tags (HTML, body, head, title, meta).	1. It's specially designed to render the result into View. It doesn't contain the markup tags.
2.We can use the Layout page or may not use the Layout page.	2. We can't use the Layout page.
3.It's not lightweight when compare to PartialView.	3.It's lightweight.
4.We can use when we want to load more process.	4.we can use when we want re-use one process.

Benefits of Partial View

Re-usable
Lightweight
We can access the parent data without affecting the parent data.

Summary

In this article, we have seen how to integrate Kendo Tabstrip with MVC, how to work with Partial View and its uses and difference. In the next article, we will see how to pass the parameter to Partial View.

I hope, It's helpful.