Partial Views are just views which we can reuse across your ASP.Net MVC application. You can think Partial View as a reusable control. You don’t need to write code for them every time – You can drop Partial View like a block wherever you want to and content of the partial view would be displayed.
We will discuss about following things in this post
- Usage of partial views
- Creation of Partial View with example
- Different ways to pass data to partial view
Usage of partial views:
Consider the below web site of a company – it’s a usual web page where we have header, sidebar and content view.
But our point of interest is the two content blocks in side bar – “Latest News” and “Current Openings”. “Latest News” would tell you the latest news about the company and “Current Openings” shows the available jobs in the company. We might want to display these information (Latest news and Current Openings) in various places of our web application.
Instead of writing code every time to display the same piece of information for different places, we can create partial view and just call it from different places with different data.
Instead of this imaginary example, let us see some real world example – Stackoverflow.com, a site which helps developers to complete their projects on time 🙂
Creation of partial view with example :
I have created a simple ASP.Net MVC application using Empty template and added Home controller with Index action.
Below is the default content generated when I add View for the Index action method(Index.cshtml)
I would like to print “Hello World” in many of the pages- including this Index. So, I am creating Partial View to say “Hello World”
Right click Views\Home folder and select Add -> View
Below dialog box for adding view will appear.
- Give the partial a name (by convention, all partial views should start with underscore)
- Select “Create as a partial view” and click Add
And, I’m adding the below content to the partial view (_PartialSayHelloWorld.cshtml)
This is the content that I would like to reuse across different views.
Now, let us see how we can include this partial view content in our Index view.
@Html.Partial is the HTML helper that we can use for including the partial view content to our View.
Below is the complete Index view content– where we are passing the partial view name to @Html.Partial method.
When you run the application, you’ll get the output like below
The partial view we have created so far is a static one – the generated content is same always. But in many cases, we would be passing some data and we want the content to be generated using that data.
We’ll see how can do so in upcoming section.
Different ways to pass data to partial view:
There are many ways to pass data to Partial View. We’ll discuss about most frequently used methods
- Passing through ViewBag/ViewData
- Passing through strongly typed model
Passing info through ViewBag/ViewData:
I want to pass Pi value(3.14) from my controller to the partial view. I have added that pi value to the ViewBag – as shown below.
public ActionResult Index()
{
ViewBag.PiValue = 3.14;
return View();
}
And, we would be passing this pi value to the @Html.Partial method as the second parameter. Please note that we need to cast it double as we could not pass dynamic expression.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@Html.Partial("_PartialSayHelloWorld", (double)ViewBag.PiValue)
In Partial View, we can use that value by accessing @Model property
<h2>Hello World!</h2> <div> I am saying "Hello world" from the partial view.. <br/> Value passed to Partial View : @Model </div>
When you run the application, you would output like below
Passing data as strongly typed model:
Sometimes, you would need to pass the strongly typed model instead of some scalar value such as pi(3.14). Let us see how we can do that…
In Models folder, I am creating Employee class.
public class Employee
{
public string Name { get; set; }
public string Location { get; set; }
}
And, I’m creating an instance of Employee object. In real world, you would be getting this value from db.
And pass that value to the view as shown below.
public ActionResult Index()
{
//Pretend that we have got the below information from db
var model = new Employee { Name = "John", Location = "New York" };
return View(model);
}
In view(Index.cshtml), you need to make couple of changes
- You need to say what type of information, you are passing it to View- by mentioning the type name prefixed by @model keyword. In the first line, we’ve mentioned that Employee object will be passed
- You need to pass the model object to the partial view. You need to pass the model object to second parameter of @Html.Partial method.
@model PartialView.Models.Employee
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@Html.Partial("_PartialSayHelloWorld",@Model)
When you run the application, you’ll get output like below
The complete code is available at https://github.com/mugil-dotnet/PartialView
If you like this article, please subscribe. I’ll send you useful articles along the way.
[x_subscribe form=”277″]