Asp.net MVC partial views are like reusable child views inside layout view or other views. the main purpose of partial views is to reduce the duplication of code. it is nothing but a small HTML component and component views like menu item is a component, left menu, right menu, and footer are some other components of the web page. the components are used on different pages.
Sometimes the same view needs to be reused in different layout views, at that time we can place that view inside the Shared folder.
_LayoutView.cshtml is the file where we should be specified the partial views. And we can render the different partial views in parent view using HTML helpers Methods. below are different ways of rendering partial views.
in the above snippet, the navbar menu code is hardcoded for that we can make a separate partial view. copy the navbar menu code and create a new partial view as shown below.
Right-click on Shared Folder --> Add --> View --> click on view.
in the dialogue box, give the View name as _HeaderNavBarMenu. and check the Create as a partial view.
Now we have created the partial view as _HeaderNavBarMenu.CSHTML . now let's see how to render the _HeaderNavBarMenu.cshtml partial view inside _Layout.cshtml.
The below image shows the output of the partial view.
Sometimes the same view needs to be reused in different layout views, at that time we can place that view inside the Shared folder.
_LayoutView.cshtml is the file where we should be specified the partial views. And we can render the different partial views in parent view using HTML helpers Methods. below are different ways of rendering partial views.
- Partial
- RenderPartial
- RenderAction
- Action
- JQueryLoadFunction
1 .Partial() Html helper method :
Below snippet taken from_Layout.cshtml Page. here you can find the @Html.Partial("_LoginPartial").
_Layout.cshtml :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
|
|---|
in the above snippet, the navbar menu code is hardcoded for that we can make a separate partial view. copy the navbar menu code and create a new partial view as shown below.
Right-click on Shared Folder --> Add --> View --> click on view.
in the dialogue box, give the View name as _HeaderNavBarMenu. and check the Create as a partial view.
| _HeaderNavBarMenu.cshtml : <div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
|
|---|
Now we have created the partial view as _HeaderNavBarMenu.CSHTML . now let's see how to render the _HeaderNavBarMenu.cshtml partial view inside _Layout.cshtml.
1.Partial() HTML Helper method :
THE partial HTML helper method does not need to be enclosed braces. and it returns an HTML string. no need to end with a semicolon.
| _Layout.cshtml : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
Html.Partial("_HeaderNavBarMenu")
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
|
|---|
2. RenderPartial() HTML Helper method :
The Renderpartial HTML helper method needs to be enclosed with braces. and it returns void. and it must be required to end with a semicolon.| _Layout.cshtml : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET All Tech Geeks Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@{
Html.RenderPartial("_HeaderNavBarMenu");
}
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET All Tech Geeks Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html> |
|---|
The below image shows the output of the partial view.
Post a Comment (0)