How to render partial view in MVC application
Partial view in MVC application
In this article we will learn, how to create partial
view in MVC application. Partial view is very similar with user control in
normal web form application. Partial view is needed when we want to show content
of one view in another view. Sometimes it needed to create default header and
footer to give same look and feel throughout the application. In this scenario partial
view comes into play.
Create Controller
To see working example of partial view, at first we have to
create one controller. Here we have created Test controller which contains
Index action. Within index action we are calling Index view.
public class TestController : Controller
{
public ActionResult Index()
{
return View("Index");
}
}
Add partial view
Now, we will add partial view in this application. To add
partial view, we have to right click on view folder and click on add view
option. Then below window will appear.
Here we have chosen view as a partial view. Once you click
on OK button, one view will create in application like below.
Content of partial view
By default, the content of partial view will be blank. Let’s
add below content in this view.
This is simple partial View.
Add main view
Now we will add one main view, from where we will call
partial view. Here is the content of main view.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div>
This is normal Page.
@{Html.RenderPartial("_Partial");}
</div>
</body>
</html>Html helper method to call partial view
To render partial view from any view we have to use
RenderPartial() function of HTML helper class. There are four overloaded function of
RenderPartial() and we have chosen the first one which takes view name as
argument. We have supplied _Partical argument which is nothing but our partial
view.
Here is the output
Conclusion:-
In this article we have learned how to use partial view in MVC application. Hope you have understood the concept.