We are now going to work with Razor and explore the functionality it provides. The ASP.NET MVC 4 project template created a default _ViewStart.cshtml view (shown in Listing 1). The view actually uses another view to render content. This is a Razor feature called layouts in which the Layout property of the view defines a shared view that will be used as a template for the content in the view that implements it (similar to what a master page is in the ASPX view engine).
Using layouts helps you to keep look-and-feel consistency across your entire web site. You also get the benefit of having a centralized place from which to make changes.
Listing 1. Content of _ViewStart.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
The view named _Layout.cshtml (located in the Views/Shared directory) contains the HTML content for the
“layout” (or “master”). When creating views with the Add View dialog, you can refer directly to _Layout.cshtml by specifying it in the layout input box. The content of _Layout.cshtml is presented in Listing 2.
Listing 2. Content of _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("your logo here", "Index", "Home")
</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Listing 2 has two commands in the <head> portion of the page: @Scripts.Render() and @Styles.Render(). They are used to create script and style references to external files, respectively. The code in the page will produce the following HTML:
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
As with the ASPX view engine, you can include HTML sections where content from views will be “slotted in” to the layout page—in the case of Razor they are called sections, as opposed to ContentPlaceHolders in the ASPX view engine.
The syntax to create a section is @RenderSection("name of section"). Note in Listing 2 the section named “featured” that will be rendered just above the body content. Pages are obliged to provide content for a section unless the section is defined as not required with an additional parameter. To define a section as not required, use @RenderSection("name of section", required : false).
Sections in Razor views created with @RenderSection() are a totally different concept from the HTML5 semantic tag <section>. When you use @RenderSection(), don’t expect to get a <section> tag in the rendered HTML.
@RenderBody() renders the main content for a view page—that is, any content that isn’t part of a named section. The view presented in Listing 3 has one named section (featured), denoted by @section featured {...}. The featured section is followed by HTML that is not enclosed in a @section{...} block. Razor automatically treats this as the “body” section and merges it into the layout page where indicated by @RenderBody().
Listing 3. View with a Named Section (Featured) and an Unnamed Section (Body)
@{
ViewBag.Title = "Home Page";
}
@section featured {
<div class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the
most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our
forums</a>.
</p>
</div>
</div>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
<a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more...</a>
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more...</a>
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more...</a>
</li>
</ol>
Using layouts helps you to keep look-and-feel consistency across your entire web site. You also get the benefit of having a centralized place from which to make changes.
Listing 1. Content of _ViewStart.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
The view named _Layout.cshtml (located in the Views/Shared directory) contains the HTML content for the
“layout” (or “master”). When creating views with the Add View dialog, you can refer directly to _Layout.cshtml by specifying it in the layout input box. The content of _Layout.cshtml is presented in Listing 2.
Listing 2. Content of _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("your logo here", "Index", "Home")
</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Listing 2 has two commands in the <head> portion of the page: @Scripts.Render() and @Styles.Render(). They are used to create script and style references to external files, respectively. The code in the page will produce the following HTML:
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
As with the ASPX view engine, you can include HTML sections where content from views will be “slotted in” to the layout page—in the case of Razor they are called sections, as opposed to ContentPlaceHolders in the ASPX view engine.
The syntax to create a section is @RenderSection("name of section"). Note in Listing 2 the section named “featured” that will be rendered just above the body content. Pages are obliged to provide content for a section unless the section is defined as not required with an additional parameter. To define a section as not required, use @RenderSection("name of section", required : false).
Sections in Razor views created with @RenderSection() are a totally different concept from the HTML5 semantic tag <section>. When you use @RenderSection(), don’t expect to get a <section> tag in the rendered HTML.
@RenderBody() renders the main content for a view page—that is, any content that isn’t part of a named section. The view presented in Listing 3 has one named section (featured), denoted by @section featured {...}. The featured section is followed by HTML that is not enclosed in a @section{...} block. Razor automatically treats this as the “body” section and merges it into the layout page where indicated by @RenderBody().
Listing 3. View with a Named Section (Featured) and an Unnamed Section (Body)
@{
ViewBag.Title = "Home Page";
}
@section featured {
<div class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the
most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our
forums</a>.
</p>
</div>
</div>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
<a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more...</a>
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more...</a>
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more...</a>
</li>
</ol>
No comments:
Post a Comment