explain to me about rendering of partial view in Razor view in MVC with an example.
How we Render Partial View in Asp.Net MVC?
678
11-Feb-2020
Updated on 11-Feb-2020
Nishi Tiwari
11-Feb-2020Partial Views in asp.net MVC razor is almost similar to user control in ASP.NET Webforms. In asp.net MVC web application in case if we want to display some similar part of the content in various parts of web application then we need to create a Partial View for that part. Generally partial can be reusable in multiple views and it helps us to reduce code duplication.
For rendering partial view we will create the following items in our application
1) Creating Model
2) Creating Controller
3) Creating a Partial view
4) Creating View
Creating Model
First, we will create a model (CarModel) in our asp.net MVC application for that right click on Models Folder Select Add then select Class now new pop up will open in that select class and give name as CarModel and click Add button.
Now after completion of creating CarModel now we will create a Controller for that right click on Controllers folder select Add click on controller Give name as CarController and then select template as Empty MVC Controller and click add.
Creating Controller
Now we add a controller for this we are going to create an object of CarModel and assign value to it and also we will add data to ListCar which is a list of type Car and then return a model.
Now after completion of creating CarController now we will create a View.
Creating the Partial View
Now to create a Partial view just right click inside the controller action method then a new dialog box will pop up with Name Add View in that we will enter view name CarPartialView and then select view engine as Razor. Now we select the option Create a strongly-typed view and then in Model class give name as CarModel. We will select Scaffold template as List and select Create as a partial view option once everything done click on Add button and it will be shown below image
Clicking on Add button the Scaffold template will generate code for us and it will generate a list with a model which we used to it which would be like as shown below
Now after completion of Creating Partial view now, we have to create a View in which we will render this Partial view.
Creating a View for Rendering Partial view
To create a view right-click inside the controller action method then a new dialog will appear with Name Add View in that give view name Index and select View engine as Razor. Here we are going to select an option Create a strongly-typed view and then in Model class give name as CarModel. Now select Scaffold template as Empty and Uncheck option Use Layout or Master Page and click Add button as shown below
When after clicking on the Add button the Scaffold template will generate code and also it will generate an Empty view with the model we had passed to it which will be like as shown below
Now we have to render a partial view inside Index view and for rendering view we are going to use Html Helper class like shown below
@Html.Partial("Partial View Name" , "Model which is required")Once we add partial view inside of view then it will be shown like below:-
At last run application and see the output here the outer most view is Parent view and views with Brown color is Partial view (Child view).