Render Partial View in Asp.Net MVC 4 Razor Example

  Total Views : 3454
  Comments : 0
 
  Keywords : How to use partial view in asp.net mvc razor,create partial views in asp.net mvc 4 razor application, Understanding partial views in asp.net mvc application

The Partial Views in asp.net mvc razor is 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 content in various part of web application then we need create a Partial View for that part. Generally partial can be reusable in multiple views and it helps us to reduce code duplication. 

 

Here we will learn partial view with simple example. For that create following items in your applicaiton

 

    1) Creating Model (CarModel)

    2) Creating Controller ( CarController) 

    3) Creating Partial view (Child)

    4) Creating View (Parent)

Creating Model

Now we will create 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 open CarModel file and write the code like as shown below 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace Tutorial5.Models

{

public class CarModel

{

public int CarID { get; set; }

public string CarType { get; set; }

public int CarPrice { get; set; }

public string CarColor { get; set; }

 

public List<CarModel> Listcar { get; set; } // List of Car

}

}

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 select template as Empty MVC Controller and click add.

Creating Controller

In this controller we are going to create an object of CarModel and assign value to it and also we will add data to ListCar which is list of type Car and then return a model. Now open our controller (CarController) and write the code like as shown below

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Tutorial5.Models;

namespace Tutorial5.Controllers

{

public class CarController : Controller

{

public ActionResult Index()

{

CarModel objcar = new CarModel();

objcar.CarID = 1;

objcar.CarColor = "Brown";

objcar.CarPrice = 20000;

objcar.CarType = "sporty";

 

List<CarModel> objlistcar = new List<CarModel>();

objlistcar.Add(objcar);  // add item in list

objcar.Listcar = objlistcar; // assigning value to CarModel object

return View(objcar); // Returning model

}

}

}

After completion of creating CarController now we will create a View.

Creating Partial View

To create Partial view just right click inside the controller action method then a new dialog will pop up with Name Add View in that enter view name CarPartialView and select view engine as Razor. Here we are going to create a strongly-typed view that's why we need to select option Create a strongly-typed view and then in Model class give name as CarModel. Now select Scaffold template as List and select Create as a partial view option because we are going to create a partial view once everything done click on Add button. Our View options will be like as shown below image

 

Create Partial View in Asp.net MVC application

 

After clicking on Add button the Scaffold template will generate code for us and It will generate a list with model which we assed to it that 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>

After completion of Creating Partial view now we have to create a View in which we have to render this Partial view

Creating View for Rendering Partial view

To create view just right click inside the controller action method then a new dialog will popup with Name Add View in that give view name Index and select View engine as Razor.Here we are going to create a strongly-typed view that why we need to select 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 lastely click Add button like as shown below

 

Add view for partial view example in asp.net mvc

 

After clicking on Add button the Scaffold template will generate code for us. It will generate an Empty view with model you had passed to it that 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 partial view inside Index view. For rendering view we are going to use Html Helper class that will be like as shown below

 

@Html.Partial("Partial View Name" , "Model which is required")

Once we add partial view inside of view that 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 style="background-color:whitesmoke;">

<div>

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

</div>

</body>

</html>

Finally just run application and check output that will be like as shown below. The outer most view is Parent view and the view with Brown color is Partial view (Child view).

 

Output of Partial View example in asp.net mvc

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User