ASP.NET MVC 5 From Scratch : _ViewStart.cshtml The Default Layout

In ASP.NET MVC there is a default layout file that the application use when one exists.  If you look at the markup at the top of the "Index.cshtml" file you will see that there is a markup to specify the layout of the page in the code below.

@{
    Layout = null;
}

The code above tells ASP.NET MVC to not assign any layout to the page because it is being set to null. In this blog we will build on our existing MvcApp project and add a default layout view to the project so that each page in the project will have a common layout.  This is similar what you would a master page for in web forms.

Step-By-Step Instructions:

1. Open the MvcApp project in Visual Studio
2.  Right-click on the Views folder then select Add → New Item







3. Now select Visual C# → Web → Razor → Web Page (Razor v3) , name the file _ViewStart.cshtml, then click "Add"

























4.  Now you will see the _ViewStart.cshtml file in the "Views" folder






5.  Delete all the markup in the _ViewStart.cshtml file, then type in the following lines of code, then save the file
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

6.  Right-click on the "Views" folder again, then this time create a folder call "Shared"







7.  Right-click on the "Shared" folder then select Visual C# → Web → Razor → Layout (Razor v3), name the file "_Layout.cshtml"


























8.  When you are finish you should have the following folder structure in your "Views" folder








9.  In the _Layout.cshtml file you will see the following markup


<!DOCTYPE html>
<html>
    <head>
        <title>@Page.Title</title>
        @RenderSection("head", required: false)
    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        @RenderBody()
    </body>
</html>

In the code above the line @RenderSection("head", required: false) tells MVC to render the head section if it's there in the web page, however it is not required. Then in the line @RenderBody() tells MVC to render the body. We added the line <h1>This is from the _ViewStart.cshtml</h1> as an indicator that _ViewStart.cshtml file is being applied.

10.  Now we are going to use the default _ViewStart.cshtml layout with our "Index.cshtml" file
11.  Open the "Index.cshtml" file and delete all the markup for it if you have any
12. Now type in the following markup for the page

<h3>This is from Index.cshtml</h3>

In the code above all we have to do is type in the markup for our page, the common tags like the head and body tag has been taken care of by the layout. If you run the application by pressing Ctrl+F5 you will the following
















As you can see even though we didn't define any layout in our "Index.cshtml" file all we have was the <h3>This is from Index.cshtml<h3> markup, the layout specified in the _ViewStart.html file was automatically applied to our page.  If you look the generated html page you will see that it's a complete HTML5 page, with the head and body tag. This is possible because of the _ViewStart.cshtml page.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        
    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        

<h3>This is from Index.cshtml</h3>
    
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"e06cac45479d4bfe8fcf5ab10b04ce35"}
</script>
<script type="text/javascript" src="http://localhost:51916/ec2fbdd4a59342ca8fe98bb63b3b5e82/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

SQL: GROUP BY And HAVING

Image
SQL GROUPING allows you to segregate data into groups so that you can work on it separately from the rest of the table records. Let's say you want to get the number of products in a category in the Northwind database Products table. You would write the following query: SELECT COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The query above gives you the following results: The query gives you the number of products in each category, however it's not very useful. You don't really know what category the count is for in each record. You might want to try to change the query into something like this: SELECT CategoryID,COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The above query is more useful the preceding one, however it only gives you the CategoryID number not the CategoryName in the Categories table. Being the perfectionist that you are you say to yourself, I can do better. "Yes, I can". I think that was a ca
Read more

Installing AdventureWorks Sample Databases from Microsoft

Image
1. Type in the following URL into your browser's address bar       http://msftdbprodsamples.codeplex.com/ 2.  Click on the "Download" button on page 3.  Click on the recommended download link 4.  Unizp the file you just downloaded 5.  Open the SQL Server Management Studio, then right click on "Databases" and then select "Restore Database" 6.  Select "Device" under "Source" 7.  Click on the "..." button, and the "Select" backup devices will appear, select "File" for "Backup media type" 8.  Click on the "Add" button, and select the "AdventureWorks2014.bak" file, then click "OK" 8.  Click "OK" on the "Select backup devices" screen 9.  Click "OK" on "Restore Database" window 10.  A message will pop up that says you have successfully restored the AdventureWorks2014 database 11.  The "AdventureWorks2014" database is now
Read more

ASP.NET MVC 5 From Scratch : Add JQuery UI Library Using NuGet

Image
In the previous blog we've added the Bootstrap library to our empty ASP.NET MVC project.  Now let's add another commonly used JQuery library to our project.  In this blog we will add the JQuery UI library to our empty project. Step-By-Step Instructions: 1. Open the empty ASP.NET MVC 5 project that you've just created 2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages" 3.  In the search box on the right of NuGet window type "jquery ui combined", the search result will be displayed, the package that you want to install is highlighted below.  Notice it's the third choice which is called the jQuery UI (Combined Library) 4.  Click on the "Install" button next to the "jQuery UI (Combined Library)" package. 5.  Once the JQuery UI library has been installed a green check mark is displayed, click on the "Close" button 6.  Now you should see the JQuery UI
Read more