Layouts and Partial Views in Razor

Friday Mar 25th 2011 by David Talbot
Share:

Razor gives you powerful new tools to maximize your view's modularity and enhance code re-use.

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.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved