Razor
allows the most maintainable view engine available with numerous sophisticated
tools to define site layout, sub navigation and even the rendering of specific
sub-items inside of a page. It allows you to set individual parameters
including the ability to map parameters to areas of the page.
Layouts
Razor layouts are
analogous to the familiar ASPX master page. They allow you to define elements
you want to be common across your site and define the regions of a page that
you want specific views to render.
Razor gives you a lot more control in
what is sent from the server to the client than classic ASP.NET.
Classic ASP.NET included viewstate and multiple standard Microsoft
supplied JavaScript libraries. Users of ASP.NET Ajax added several more
mandatory Microsoft supplied JavaScript libraries. The result was a basic
starter ASP.NET page that had about six to eight external resources that
had to be loaded.
Microsoft recognized this as an
opportunity to update the server-side
portions of their framework to be cross-compatible with popular JavaScript
libraries such as jQuery so developers could leverage all of the great server-side
capabilities provided by Microsoft without adding to the download weight on the
client. Razor even helpfully includes jQuery in its default Scripts folder.
Layouts can be specified manually CSHTML
file or they can be set implicitly by your _ViewStart.cshtml files. To set it
manually, set the Layout property at the top of your view as seen in the
following code block.
@{
Layout = "~/Shared/_Layout.cshtml";
ViewBag.Title = "This is my page title.";
}
Using _ViewStart.cshtml
You can also specify layouts implicitly
by using _ViewStart.cshtml files. These files have the advantage of applying
themselves in an inheritable fashion to all of your views. This means that
instead of setting the layout of your specific views by setting a property in
the header, you can do it in a way that cross-cuts your files. Likewise you can
include common code you want run on all page views within a specified scope.
When you create a new ASP.NET MVC3
Razor site, it will include a _ViewStart.cshtml file in the Shared folder.
This file will be run on all view pages across your entire MVC3 site
unless there is a more specific _ViewStart.cshtml file in scope on one of your
other views. The code block below shows the default content of this file, which
calls out the specific layout that should be applied by default. In this case
it is the _Layout.cshtml file defined in the /Shared folder. You can either
customize the _Layout.cshtml file to apply your site layout to your entire site
or you can define a new layout and specify that layout in the _ViewStart.cshtml
file.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Although the most common use for
customizing the _ViewStart.cshtml file is to define the layout you want applied
across your pages, you can also define code blocks here that do anything you
want.
If you define another _ViewStart.cshtml
file inside of a more specific directory than the shared folder, then that
_ViewStart.cshtml file will be called after your universal one. Since it is
called after your universal file, the properties set in your more specific file
will override the universal one allowing you to choose different layouts for
specific directories.
Building a Layout
The layout files themselves are mainly
HTML with a few special Razor commands thrown in. The @ViewBag.Title contains
the page’s title being rendered. The @RenderBody() function renders the body of
the view the layout is being applied to.
In addition to the RenderBody() function,
which renders the view inside of the layout, you can define as many named
sections as you need using the @RenderSection() function. This function’s
arguments are a string name of the section and a Boolean indicating whether or
not the view page must define this section or if it is optional.
@RenderSection("TestSection",false)
In your view page, to render the
specified section declare, use the @section SectionName syntax to declare your
section block.
@section TestSection
{
This is my test section.
}
You can define your sections in
conditional blocks in your layout page. For example, if you wanted to only show
a particular section if a user has a valid login, you could define that section
inside of a conditional and it won’t break your view page.
If you want to define default section
content to be displayed when your view doesn’t define a given section, you can
use the IsSectionDefined function to test whether or not your view page defines
that section.
@if (IsSectionDefined("TestSection"))
{
@RenderSection("TestSection", false)
}
else
{
<div>The view didn't define the TestSection</div>
}
Partial Views
Partial views in MVC3/Razor allow you to
define common shared parts of a page that can be leveraged by multiple pages in
your site. To define a partial view, add a method to your controller that
returns PartialViewResult to your controller.
public PartialViewResult ViewName()
{
return new PartialViewResult();
}
Once you have defined the method in your
controller, you can right click the method name and choose "Add
View". In the dialog that appears, make sure you check the Partial View
checkbox. Visual Studio.NET 2010 will generate a blank .cshtml for you
to define your partial view in.
To call your partial view from your view
page, use the @Html.Partial("ViewName") helper function. You can also
optionally pass in a model or leave it blank for the current view data to be
passed in.
Conclusion
Razor layouts are inheritable and scoped
allowing you great flexibility in making site wide changes to your ASP.NET MVC
3 web application. You can also specify layouts to use on a given view and
render partial views to provide user interface layer code reuse.
Razor allows the most maintainable view engine available with
numerous sophisticated tools to define site layout, sub navigation and even the
rendering of specific sub-items inside of a page. It allows you to set
individual including the ability to map parameters to areas of the page.
About the Author
David Talbot has over 14 years of
experience in the software industry with experience ranging from license plate
recognition using neural networks to television set-top boxes to highly scalable
web applications. His main focus is building rich user interface web
applications on the .NET platform. He is also the author of Applied ADO.NET and
numerous articles on technology.
