forum

home / developersection / forums / how we render partial view in asp.net mvc?

Ask Question

How we Render Partial View in Asp.Net MVC?

Anonymous User 718 11-Feb-2020

explain to me about rendering of partial view in Razor view in MVC with an example.

asp.net mvc asp.net mvc 
Updated on 11-Feb-2020
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Nishi Tiwari

Nishi Tiwari

11-Feb-2020

Partial 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

How we Render Partial View in Asp.Net MVC?

  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 

 
@model IEnumerable<Tutorial5.Models.CarModel> 
 
<table style="background-color: rosybrown; border:dashed;"> 
<tr>

<td colspan="3"><h2>Child View</h2></td>

</tr>

<tr>

<th>

@Html.DisplayNameFor(model => model.CarID)

</th>

<th>

@Html.DisplayNameFor(model => model.CarType)

</th>

<th>

@Html.DisplayNameFor(model => model.CarPrice)

</th>

<th>

@Html.DisplayNameFor(model => model.CarColor)

</th>

</tr>

@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(modelItem => item.CarID)

</td>

<td>

@Html.DisplayFor(modelItem => item.CarType)

</td>

<td>

@Html.DisplayFor(modelItem => item.CarPrice)

</td>

<td>

@Html.DisplayFor(modelItem => item.CarColor)

</td>

</tr>

}

</table>

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

How we Render Partial View in Asp.Net MVC?

  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 

@model Tutorial5.Models.CarModel

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>Index</title>

</head>

<body>

<div>

 

</div>

</body>

</html>

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:- 

 
@model Tutorial5.Models.CarModel 
@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>Index</title>

</head>

<body style="background-color:whitesmoke;">

<div>

@Html.Partial("CarPartialView", Model.Listcar)

</div>

</body>

</html>

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).

How we Render Partial View in Asp.Net MVC?

Liked By