Congratulations to all monthly winners of May 2013 !!! They have won INR 2900 cash and INR 27497 worth prize.
Go to DotNetFunda.com
Twitter TwitterLinkedIn
YouTubeGoogle
 Online : 40449 |  Welcome, Guest!   Register  Login
Home > Articles > ASP.NET MVC > How to create partial views (MVC tutorial number 10)?

How to create partial views (MVC tutorial number 10)?

Article posted by Questpond on 4/10/2012 | Views: 44753 | Category: ASP.NET MVC | Level: Intermediate | Points: 250 red flag

Advertisements

Advertisements
This is the 10thMVC (Model view controller) tutorial and in this article we will try to understand how we can improve reusability using partial views.

This is the 10thMVC (Model view controller) tutorial and in this article we will try to understand how we can improve reusability using partial views. In case you are completely new to MVC (Model view controller), do have a look at the previous articles and videos given at the end of the article.

Alternatively you can also see these videos to come up to speed

My half-life has been spent on writing interview questions for Microsoft technology and I hope I keep writing them. You can see my video tutorial for the same by clicking on .NET,ASP.NET,C#,MVC Interview questions and answers

Introduction

When we talk about web application reusability is the key. So as a MVC developer we would like to create reusable views. For instance we would like to create reusable views like footer and header views and use them inside one big MVC view.

Reusable views can be achieved by creating “Partial views”.


Step 1:- Create a simple view

The first step would be to create a simple view with a controller. You can see from the below snapshot, I have created a simple view called as “Index.aspx” which will be invoked via “Homecontroller.cs”.


In case you are coming to this section directly please see the previous Labs to synch up.

Step 2:- Create a simple partial view

Now that we have created the main view it’s time to create a partial view which can be consumed inside the “Index” view. In order to create a partial view , right click on the view folder and mark the check box “Create a partial view” as shown in the below figure.


Step 3:- Put something in partial view

Put some text or logic in your partial view.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
This is reusable view

Step 4:- Call the partial view in the main

Finally call the partial view in the main view using “Html.RenderPartial” function and pass the view name in the function as shown in the below code snippet.

<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div>
</body>

Also ensure that the partial view is in the same folder where your main view is. In case it’s not then you need to also pass the path in the “RenderPartial” function. You can see in the below figure I have moved the partial view in the main “Views” folder.

One more thing which is noticeable is that the icons for main view and partial are very different. You can see the yellow border in the partial view icon which does not exist in the main view icon.


Step 5:- Run the program and see the action.

Finally do a CNTRL + f5, put the proper controller path and see your hard work result. Below is the snapshot of how things should look like.


Article descriptionMVC ( Model view controller) videos MVC ( Model view controller) Article links
A simple Hello world ASP.NET MVC ( Model view controller) application. Hello word MVC Tutorial  video http://www.dotnetfunda.com/articles/article1297-how-to-create-a-simple-hello-world-aspnet-mvc-tutorial-no-1-.aspx
In this video we will see how we can share data between controller and the view using view data. MVC Tutorial video 2 Viewdata http://www.dotnetfunda.com/articles/article1310-how-to-pass-data-from-controllers-to-views-in-aspnet-mvc-tutorial-no-2-.aspx
In this article we will create a simple customer model, flourish the same with some data and display the same in a view. MVC Tutorial video 3 Simple model and view example http://www.dotnetfunda.com/articles/article1317-how-to-create-a-simple-model-in-aspnet-mvc-and-display-the-same-tutorial-.aspx
In this article we will create a simple customer data entry screen with some validation on the view. MVC tutorial video 4 Simple customer data entry screen. http://www.dotnetfunda.com/articles/article1388-how-to-create-a-simple-aspnet-mvc-data-entry-screen-tutorial-no-4-.aspx
This article will demonstrate how to expedite your MVC development process using HTML helper classes.NA http://www.dotnetfunda.com/articles/article1415-how-to-create-mvc-model-view-controller-views-faster-by-using-html-helper-.aspx
This article demonstrates how we can do unit testing in MVC (Model view controller) applications.NA http://www.dotnetfunda.com/articles/article1429-how-can-we-do-unit-test-in-mvc-model-view-controller-application-tutoria-.aspx
This article demonstrates how we can define custom routing in MVC applications.NA http://www.dotnetfunda.com/articles/article1485-what-is-mvc-model-view-controller-routing-tutorial-number-7-.aspx
This article demonstrates how we can validate data passed in MVC URL’s.NA http://www.dotnetfunda.com/articles/article1527-how-to-validate-data-provided-in-mvc-urls-mvc-tutorial-number-8-.aspx
In this article we will see how to create outbound URL’s in MVC applications.NA http://www.dotnetfunda.com/articles/article1596-how-to-create-mvc-outbound-urls-mvc-tutorial-number-9.aspx
Advertisements

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.

Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:



Please Sign In to vote for this post.

Experience:0 year(s)
Home page:http://www.questpond.com
Member since:Wednesday, September 03, 2008
Level:Starter
Status: [PanelMember] [Member] [Microsoft_MVP] [MVP] [Administrator]
Biography:

I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small
E-learning company in India. We are very much active in making training videos ,
writing books and corporate trainings. Do visit my site for 
.NET, C# , design pattern , WCF , Silverlight
, LINQ , ASP.NET , ADO.NET , Sharepoint , UML , SQL Server  training 
and Interview questions and answers

 Responses
Posted by: Samarmir | Posted on: 11 Apr 2012 03:29:18 AM | Points: 25

Thanks for a nice article, like to see that MVC is also being written about at this site.
And thanks for providing link to previous articles.

Posted by: Sruthimallinidi23 | Posted on: 09 Jun 2012 01:18:10 AM | Points: 25

hi,
Can you please post the article which will explain the how to render the parital view in different areas using Razor Syntax.

Posted by: Chiragkanzariya | Posted on: 29 Nov 2012 09:56:18 AM | Points: 25

Hello guys,

Check my blog for MVC articles and code http://www.chiragkanzariya.blogspot.in/

>> Write Response - Respond to this post and get points
Related Posts

In the previous ASP.NET MVC lab we saw how we can pass data from controller to the view. So now the next step is to create a simple model and see all the 3 ASP.NET MVC entities (i.e. model, view and controller) in action.

In this article we will try to understand how we can use data annotations for doing validations in MVC web application.

All may be familiar with auto-suggest control in ASP.NET MVC. In this article we will look into creating an auto-suggest which selects the item-name when code is entered or item-name is entered. There may be occasions when item code is known sometimes or name may be known. By using this technique you can apply both.

This is the 8th MVC (Model view controller) tutorial and in this article we try to understand how we can validate data passed in MVC URL’s. In case you are completely new to MVC (Model view controller), do have a look at the previous articles and videos given in the table below for quick start.

This is the 9th MVC (Model view controller) tutorial and in this article we will try to create outbound navigation links using MVC framework. In case you are completely new to MVC (Model view controller), do have a look at the previous articles and videos given in the table below for quick start.

More ...
About Us | Contact Us | The Team | Advertise | Software Development | Write for us | Testimonials | Privacy Policy | Terms of Use | Link Exchange | Members | Go Top
General Notice: If you find plagiarised (copied) contents on this page, please let us know the original source along with your correct email id (to communicate) for further action.
Copyright © DotNetFunda.Com. All Rights Reserved. Copying or mimicking the site design and layout is prohibited. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks. | 6/20/2013 6:31:11 AM