Post
Ask Question

ASP.NET MVC - Layout View

Introduction

 
In this article we are going to explore the concept of ASP.NET MVC vs WebForms and the advantages of using the MVC architectural design pattern in ASP.NET.  Also we are going to create a demo project for layout view.
 
Prerequsites
  • Visual C#, ASP.NET Web Forms and .NET Framework 4.5 
  • Visual Studio 2012 or above for application development

What is MVC?

  • The Model-View-Controller (MVC) is an architectural design pattern for developing enterprise web applications.
  • This pattern separates an application into three main components, the Model, the View and the Controller.
Model
 
Represents the data and the objects within the application. It implements the logic for the application's data domain.
 
View
 
The component that displays the application's User Interface (UI)
 
Controller
 
The component that handles user interaction, works with the model, and ultimately selects a view to render and display the UI.
 
Now let's see the the concept of ASP.NET MVC and Webforms,
 
 Feature  ASP.NET MVC ASP.NET Webforms
 Seperation of Concern  Yes  Yes
 Event driven Model  No  Yes
 Layout pages/Masterpages  Yes  Yes
 Viwebag, ViewData, Tempdata  Yes  No
 Server Controls No Server Controls; only HTML Controls and Third Party Controls  Yes
 State Management Viewbag,ViewData, TempData,Session,Cookies, Querystring  ViewState, Session, Cookies, QueryString

Partial View  User Control
 
Now let's see the advantages of using MVC framework,
  • Separation of Concerns
    The MVC Framework helps us create applications that separate the different aspects of the application by providing a loose coupling between input logic (controller), business logic and user interface(UI) logic elements.

  • Parallel Development
    The loose coupling also helps in parallel development. For example, a designer can work on the view, a developer can work on the controller logic, and another developer can focus on the business logic in the model

  • Less Complex
    The separation (loose coupling) between the three main components of an MVC application enables the developer to focus on one aspect of the implementation at a time, thus aiding in managing complexity.

  • Performance
    ASP.NET MVC does not support view state. This reduces the page size and the load on browser, improving the performance.

  • More Control over User Interface
    Views generated using standard HTML and CSS code can be easily integrated with JavaScript and jQuery.

  • Extensive Support for Test Driven Development
    ASP.NET MVC applications facilitates easy and automated unit testing for its various components.

ASP.NET MVC Execution process

 
Now we are going to see the steps the application undergoes while executing,
  • Receive first request for the application
  • Perform Routing
  • Create MVC Request handler
  • Create Controller
  • Execute Controller
  • Invoke Action
  • Execute Result
Problem Statement
 
Let us discuss the steps to be followed by the VehiclePurchaseManagement system to create the website Home Page, and to update the Layout View to get the required output.
 

DemoSteps

 
Step 1
 
Open Visual Studio integrated development environment (IDE) and select File > New Project. 
(Tip: For demo project i am using Visual Studion 2017)
 
Step 2
 
Select Visual C# - Web Template on the left pane and then select ASP.NET MVC 4 Web Application. Name the project as "VehiclePurchaseManagement" and then click OK. 
 
Step 3
 
In the New ASP.NET MVC 4 Project dialog box, select Internet Application. Ensure Razor is the default view engine and click OK. 
 
Note
The Internet Application template is selected, since the website should be accessible across internet and user authentication is through Forms Authentication - Login form 
 
Step 4
 
By now, the ASP.NET MVC project is created with the required files and folders.
 
Step 5
 
From the Debug menu, select Start Debugging (or use the key-board shortcut 'F5'). This causes Visual Studio to start IIS Express. Visual Studio then launches a browser and opens the application’s home page. 
 
Notice that the address bar of the browser says localhost. The local host always points to our own local computer, which in this case is running the application we just built for the VehiclePurchaseManagement. When Visual Studio runs a web project, a random port is used for the web server. 
 
The URL does not contain file name in it. But we can see the output of the index action of Home controller in the browser window. How is it working ?
 
The Routing engine will take care of it. We are going to see the detailed explanation in the next article. 
 
By now, an ASP.NET MVC application of Internet Application template has been created for the VehiclePurchaseManagement website. Let's see how the VehiclePurchaseManagement developer manages to update the master page to get the required changes.
 
Step 1 - Updating the Site Title
 
The <head> section of the Layout View (_Layout.cshtml) page is updated as shown below,
  1. <head>    
  2.     <meta charset="utf-8" />    
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    
  4.     <title>@ViewBag.Title - Vehicle Purchase Management</title>    
  5.     @Styles.Render("~/Content/css")    
  6.     @Scripts.Render("~/bundles/modernizr")    
  7. </head>   
The default Layout view is available under View-Shared folder.
 
Step 2 - Adding hyperlink to site home page
 
The <header> section of the Layout View is updated as below,
  1. <div class="navbar-header">    
  2.                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">    
  3.                    <span class="icon-bar"></span>    
  4.                    <span class="icon-bar"></span>    
  5.                    <span class="icon-bar"></span>    
  6.                </button>    
  7.                @Html.ActionLink("Vehicle Purchase Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })    
  8.            </div>  
@html.ActionLink - This method provides the hyperlink to navigate from one view to another view.
Action Method - Method inside the controller is called Action or Action method.  
 
Step 3 - Adding the copyright disclaimer at the page footer
 
The <footer> section of the Layout view is updated as below,
  1. <div class="container body-content">    
  2.        @RenderBody()    
  3.        <hr />    
  4.        <footer>    
  5.            <p>© 2020- Vehicle Purchase Management System</p>    
  6.        </footer>    
  7.    </div>     
Step 4
 
Build and execute the project. Observe the output. The required changes are implemented as below,
 
 

Summary

 
In this article we explored the concept of ASP.NET MVC vs WebForms and Advantages of using MVC architectural design pattern in Asp.Net. Also we have created a demo project for Layout View. I hope you liked the article. Until Next time- Happy Learning Cheers


Similar Articles