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

Use the Layout Features in WebMatrix

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
[Microsoft] [ASP.net] [www.ASP.net] Hello and welcome to the 9-part "How Do I" video series on Microsoft WebMatrix. You are currently watching part 4 of the series, "How Do I: Use the Layout Features in WebMatrix?" In this example, we will demonstrate how to use the layout features in WebMatrix to put all of the common HTML code such as the header and footer content, into one location and have it automatically generated for different webpages. Before we start applying these features, let's have a look at the final result of part 3 of the series. The page is showing the header, footer, and movie names with all of the CSS styles applied on it. In this part of the series, we will create various dynamic webpages to use the layout features. So let's continue to apply these features on the movies site. Let's begin with creating the first dynamic webpage. To do this click New and then click New File. The New File dialog box opens up. Here select CSHTML as a file type and name it movies.cshtml and then click Ok. The movies.cshtml file opens up with the basic HTML code. After this replace the content of this page with the movies list div that is specified in the default HTML. Now run the page in the web browser to see the result. The page works fine even without including the basic HTML tags such as head and body. Next let's create a new page named PageHeader.cshtml and copy everything that is above the movies list div from the default.HTML into the new page created. To do this, click New and then click New File. The new file dialog box opens up. Here select CSHTML as the file type and name it PageHeader.cshtml. Now enter the code that is above the movies list div from the default.html into the PageHeader.cshtml page. Similarly, create a new page named PageFooter.cshtml and copy everything that is below the movies list div from default.html into it. Next we will use the Razor syntax to dynamically add the header and footer. The Razor syntax allows us to write in-line code on the page using the C# language. The Razor and HTML codes can be differentiated by using the at character. This character is placed before any lines of the code that are instructions to the server regarding what to do. So let's apply the Razor code by implementing the RenderPage commands in the movies.cshtml file. The RenderPage commands will cause the server to load the HTML from the specified page name and enter the Razor code at this place within the current file. Now run the page in the web browser to see the result. The page shows the same header and footer that are specified in the PageHeader.cshtml and PageFooter.cshtml files. Next let's create a layout to be used as a template for every page and then include the specific content in this page. To do this, create a new CSHTML page and name it _siteLayout.cshtml. Replace the content of this page with the default.html page. Now remove the movies list div and replace it with the RenderBody command. This command will render the content of the movieslist.cshtml page at this location. After this remove the RenderPage commands from the movies.cshtml file. Next let's see how to implement the functionality of the _sitelayout.cshtml page in the movies.cshtml page. To do this create a new CSHTML page and name it as _PageStart.cshtml. This page will be called whenever any CSHTML page is opened in the web browser. Now replace this code to set the layout variable so that the layout of the entire site can be driven by the _sitelayout.cshtml page. Now run the movies.cshtml page in the web browser to see the result. The page shows similar results as earlier. Next let's create another page named about.cshtml. Replace the content of this page with some new headings. Now run this page in the web browser to see the result. The page shows the same header and footer along with the new content. This sample application shows how you can use the built in layout mechanisim in WebMatrix to build the sites easily by taking all the common code for all your pages and putting it into the layout files. Also it shows how to use the Razor syntax for programming different webpages and creating a powerful layout engine. Thanks for watching the video, hope you enjoyed it, and see you next time. [Microsoft] [ASP.net] [www.ASP.net]

Video Details

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

Part 4 teaches you layout and how you can use layout in WebMatrix for common code across your pages.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.