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.
Add div tag given below to enable Kendo Tabstrip in our page.
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.
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.