Using Partial Views In ASP.NET MVC 5.0: Part 7

Before reading this article, I highly recommend reading the previous part of the series:

What is a Partial Views in ASP.NET MVC

Partial view is just like a WEB User Control in ASP.NET web form technology.

Partial views are used to componentize Razor views and make them easier to build and update. Partial views can also be returned directly from controller methods. In this case, the browser still receives text/html content but not necessarily HTML content that makes up an entire page.

To create the reusable components we will use the Partial Views. There are two types of Partial Views:

1. Static Partial View: Static Partial View is used to render the static data.

  • @{Html.RenderPartial(“_PartialView”);} - It will return the void. Displays the output on your view page.
  • @Html.Partial(“_PartialView”); - It will return MVC HTML string, you can store it in a particular variable.

2. Dynamic Partial View: Dynamic Partial Views are used to implement the dynamic data.

  • @{Html.RenderAction(“_PartialView”);} - It will return MVC HTML string.
  • @Html.Action(“_PartialView”);

Open Visual Studio and select “FILE", New, then Project.

New Project

In the following figure select “Templates”, Visual C#, then ASP.NET Web Application, and here I gve the name of project “HTMLHelpersWithMVC”.

You can give the project name as you wish.

And then click on “OK” button.

Web application

In the following figure as you can see the default MVC will be selected, select MVC and then click “OK” button.

select MVC

Firstly, I want to create a Controller, so right click on to "Controllers" folder and click on “Add” and then click on to Controller, to add a Controller.

Add new controller

Select the MVC 5 Controller - Empty.

Click on “Add” button to add a Controller.

add a Controller

Here I gave “MyController” name to Controller; you can give any name to your Controller as you wish.

Click on “Add” button.

MyController

In the following figure, we have an Index(), so to add a view, right click on Index() and click on “Add View”.

click on Add view

It’s a simple view, not a partial view.

Here, I’m creating the “Index” view.

Click on to the “Add” button.
Index

In the shared folder we have a “_Layout.cshtml” which is a basic designing part.

Here, I’m going to implement a simple method of static partial view that is the HTML.renderPartial.

So just cut the footer section, displayed in red area.

cut the footer section

Here, I need to create a partial view for our above footer section.

Right click on Shared folder, click ‘Add”, and then add “View”.

create a partial view for our above footer section

Here in the view name I have used (_), because it is a naming convention. Whenever you are going to add a partial view you must use (_).

Check the “Create as a partial view".

Click on “Add” button.

Create as a partial view

The cut section of footer above should be paste over here in the partial view page.

cut section of footer

Cut the following section in the “_Layout.cshtml” page.

Cut the following section

Here, I’m going to create another partial view.

Right click on “Shared” Folder, click on “Add” and then click on “View”, to add a view.

add a view

As I told, if we are adding a partial view then we use the (_), in the starting of the view name.

So, here I gave the “_MyView2” name to my view.

Click on “Add” button.

Add view

Now paste the above cut section in the following view:

cut section

Make some changes over here, in my “_Layout.cshtml” page.

Layout

Press F5 to run the application.

So here is the following output:

See output

In this section we have learned about how we can use static part.

Now we are going to learn about the second part that is Dynamic Partial views.

Here, I’ m going to perform another return type that is the “PartialViewResult”. And my action name would be Students():

PartialViewResult

So, let me create another partial view.

Right click on “Shared” folder, go to “Add”, and click on “View”.

View

My View name would be “_Students”.

Click on to “Add” to add a partial view with the name “_Students”.

partial view

Now I want to render all the Students.

render all the Students

Now make changes in the “App_Start” folder in “RouteConfig.cs”.

The Controller name is “My” and the action would be “Students”.

Controller

Now run the application, press F5 key.

We have the output.

Output

In this section we learned about how we can use render partial by using the render action method.

If you want to implement it in your “_Layout.cshtml”, then it is a very easy task.

Go to your “_Layout.cshtml” page and make changes:

Layout.cshtml

Change the action name in the “RouteConfig.cs”. My action name would be “Index” action.

RouteConfig.cs

Now the header section would be large.

 header section