Partial View in ASP.NET MVC- View


In this tutorial we will learn about partial view in ASP.NET MVC. We will learn below mentioned point.
(a)    Introduction about Partial View
(b)   Why we use partial view in ASP.NET MVC
(c)    How to create partial view in ASP.NET MVC.


Introduction about Partial View
Partial view is like ASP.NET custom control. It is a reusable view. You can create partial view in ASP.NET MVC for re-usability of code.

Fig-1.1
Some fact about Partial view you need to know-
->You can create partial view on single controller level. In that case you need to create partial view in Solution Explorer->View(Folder Name)->MyHome(Controller Name)
MyHome- It is a folder name inside view folder of my solution explorer. It is a controller name in my case. It depends on controller name.

Fig-1.2

 ->You can create partial view for all controllers level which is in your ASP.NET MVC project. In that case you need to create partial view in Shared folder. If want to know in detail about shared folder then go through article where I have described about folder structure. Read Point- Folder Structure of ASP.NET MVC Project


Fig-1.3

Why we use partial view in ASP.NET MVC
If you know the concept of reusability then you can easily understand the benefit of partial view.
·         If you want to make your MVC project clean and maintainable then you can go with Partial view concept.
·         Remove duplicity of code in your project
·         You can use partial view in more than views.
·         You can easily maintain your code from single file-partial view.
·         In case need to change in partial view code you can easily change it. It’s automatically reflected to all views where you have used partial view.
·         Save your time and effort.

How to create partial view in ASP.NET MVC
Now we are going to learn how to create partial view:
Here I will show you how you can re-use partial view in multiple views.

For this you just need to go shared folder which is inside Views folder. If you are unable to find shared folder inside Views folder just right click ->Add->New Folder. Then just give name of folder is ‘Shared’
Now I am assuming that you have ‘Shared’ folder. After that right click on Shared folder and follow below image.

 After that you will see below Add View Popup window appear. Here you just need to put your view name and select option ‘create as a partial view’ and click Add button.

After that I will write some HTML code in partial view.

Now I will explain you what is the purpose of code which I have written.  Using below code we can call any controller in MVC.
How to call controller from view?

@Html.ActionLink("DisplayText","ActionName/MethodName", "ControllerName", null,null)

So here I have created a simple menu template as a partial view which I have call from any controller.

<table>
    <tr>
        <td>@Html.ActionLink("Home", "Index", "Home", null,null)</td>
        <td>@Html.ActionLink("Service","ActionName/MethodName", "ControllerName", null,null)</td>
        <td>@Html.ActionLink("Contact Us","", "", null,null)</td>
        <td>@Html.ActionLink("About Us", "", "", null,null)</td>
    </tr>

</table>
  Now I will show you how we can call partial view from any view. Here I have created a view with name default and then call partial view using HTML helper @Html.Partial("NameOfPartialView").If you don’t know how to create view then please go through below link
Now I will press F5 and run this application then you can see below output in browser. Here you can see how partial view work.

If you want same functionality in another view then again you can call it using @Html.Partial("NameOfPartialView")

Note: If you create Partial view in shared folder then you can use it in any views. Refer Fig 1.3 for more clarification.

I will also discuss how you can restrict partial view for one controller. Follow my steps for this.
Step 1: Create Partial view- Go to->Default folder or any controller folder.
Default-My controller name Howto create controller

Step 2: Right click over there and then add view. For adding view is same process which we have already discussed in case of shared folder. So again here I will not create duplicity of content.

Step 3: Creating partial view and calling view process is same which we have already discussed in this article. Here my focus is if you want your partial view restrict for single controller then you can create partial view in this way. You can use this partial view in multiple views of single controller. For more clarification refer diagram Fig 1.2.



You can only call partial view in view1 and view2 which is inside default folder.
 If you try to call MyPartialView  in  Home.cshtml then you will get error.

Unable to find partial view name: MyPartialView  in Home folder.


  This is how you can create Partial view for controller level.
Thanks for visiting. Please leave comment in case of any suggestion.
Click Here To download complete Demo 
Author

Priti Kumari

I am technical blogger.I blogs at www.c-Sharpcorner.com and https://aspdotnetmyblog.blogspot.in/.

3 comments:

  1. hii..really ur article is very nice and i sure your giving a brief explaination with proof.Really it was an awesome article...very interesting to read..please sharing like this information.
    dot net training in velachery |
    dot net training in chennai

    ReplyDelete
  2. amazing, nice and good information, thanks for sharing your valuable time to share.
    Dot Net Training in chennai | Dot Net Training in velachery

    ReplyDelete
  3. This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Dot Net Training in Chennai. or learn thru ASP.NET Online Training . Nowadays Dot Net has tons of job opportunities on various vertical industry.

    ReplyDelete