Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

MVC 3 - Razor Layouts

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[] [] [John Galloway] Hi, this is John Galloway with Microsoft and this is an ASP.NET MVC 3, Quick Hit Video. In this video, we will be continuing our look at the Razor view engine, by digging into Razor layouts. Razor layouts serve a similar goal as master pages did in web forms and previous versions of MVC. The idea is that while content will change from page to page in your application, there's quite a bit that will stay the same and should be reused between you different pages. You've got header content, navigation, other common page layout items. Additionally, you've got common page mark-ups, such as CSS links and script, that you don't want to have to continue to write in each page. So for an example, let's look at this page. We've got page specific information that's in the white section in this page. And that matches up to what we see in the view. Here in the view we can see exactly that same information being written out. You don't see all the header, the log in, the navigation stuff. That's because that's included in our layout. Since the layout information is shared between the different views in our site, that's exactly where we'll find it in our application. In a default MVC 3 application, you'll find it in the views shared folder. And it will be named _layout.cshtml. That underscore indicates that that page shouldn't be served all by itself, it's used in conjunction with other views. Here we can see how that layout page is organized. We've got our html shell including the head information. We've got our body. We have a call to render partial, which writes out the log in link at the top. Then we have our menu container. Finally, after all that, we're ready for our page specific information and that's when we call render body. When render body is called, the view is executed and so this information will be displayed. The layout selection is included in the new view dialogue. So when I select Add View, I have the option here where I can say use a layout or master page. If I leave that checked, that's going to use a layout. When I use a layout, I don't need to specify the path as I would with a master page. As you can see from the information directly below that box. It says leave empty if it is set in a razor view start file. And if we take a look at that view start, see that's exactly what happens. View start fires for each view inside this view folder, and that sets the layout to views/shared_layout.cshtml. So if I wanted to add other logic or change my layout, that's where I'd do it. So if diagrams help you, we've got a layout pictured on the left and view content pictured on the right. And when we call render body, that sucks the content out of view and injects it into that layout. So that's great, but what if you need some more flexibility? That's where render section comes in. So looking at our layout, we've now split our content into 2 sections, Fred and Bob. And we define our content with Fred and Bob on the right side using the at section directive. This is, of course, hugely simplified to fit on a diagram. We could have a lot of content between Fred and Bob, and we could also use render body in conjunction with the 2 of these. So let's write some code to see that in action. Here in the layout we've been looking at, let's add in those render section calls. And now let's go to our index view where we can write out that content. First of all, we'll split this up a little bit. Let's change this to a Bob section. We need to surround it with braces. And we'll put a little information for context. Now we'll declare the Fred section the same way. And now let's let Fred say, "Hi." When we run it we can see this in action. Now notice because we called render section Fred before we called render body, we see it above the page content. So looking again at our layout, we called render section Fred, render body, render section Bob. And of course the order on our layout is what's important. So since we called render section Fred, that got rendered at the top of the page, despite the fact that our index view wrote the Fred section out last. One more important thing to know about is handling sections that are not required. So I'll add in an absent section. And when we refresh the page, razor says, "Hey, you told me to render a section called absent," "but your view didn't provide that information." And our index page doesn't want to provide that information, it's just not applicable for the index view. What we can do there is go into our layout page, and when we call render section, we have the opportunity to specify whether or not it's required. So I'm going to say the absent section is not required. And when we refresh this page, it renders just fine without it. Later we decide that our index view will specify some absent information. So we'll go into index, and we'll add an absent section that just says, "I am no longer absent." Refreshing the page, we see that that information is there. You can learn more about razor layouts in the web matrix tutorials, that's at And that wraps up our quick look at razor layouts. []

Video Details

Duration: 6 minutes and 42 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 18, 2013

In this video we will continue our look at the Razor view engine by learning how to use layouts to handle site-wide content.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.