Introduction to MVC
MVC means Model-View-Controller. The Model View Controller (MVC) of ASP.NET is an open source lightweight and test-driving framework designed by Microsoft that contains three components - Model, View, and Controller. MVC provides the Model, View, Controller pattern and it allows software developers to build a web application as a composition of three parts or components, such as Model, View, and Controller. The MVC model works on the basis of three tiers architecture. The MVC model has no drag and drop server controls, server events and state management techniques. The Microsoft Visual Studio and Microsoft Visual Web Developer Tools are used to design and build the ASP.NET MVC applications. Following are the details of the three layers or three parts of the ASP.NET MVC programming model,
Model
The Model component of MVC application represents the state of a particular data part or data portion of the application and it usually interacts with the file, database, and the web service etc. The Model part of the MVC application handles the application logic for the application data. It usually stores and retrieves the data from the database. It contains all of the application business logic, validation logic, and database access logic. If we want to access the database, we can create our database classes in the Models folder of the application.
View
The View component of MVC application represents the user interface and it contains all the user interactions. The View component accepts information from the Controller component and delivers a user interface to display that information. The View component of MVC application handles the display operations such as to display the data and information. It provides a visual shape to the Model, for example, when Model retrieves data then View provides a visual shape to that data and responses back to the browser. The View component of MVC provides Graphical User Interface (GUI) and application-specific entry forms or interactive windows to the user that sends data to the user and receives input from the user using the GUI interface such as Web Forms and Control objects such as textboxes, checkboxes, radio buttons, combo boxes, and command buttons etc. This part of the MVC application is also called Presentation Layer because it physically represents data and other information to the user. Since this part of the application is related to the user directly, therefore, if it is designed well, user-friendly, validated for data entry, comprehensive, and responsive, the whole application will be attractive for the users and will more beneficial and efficient. If this part of the application is designed poorly, the whole software application will be unprofessional and will not attractive for the users.
Controller
The Controller component of MVC works between the Model and the View components and it is responsible for controlling the application logic and flow of the application execution. The Controller handles any incoming URL request. When we send a request to MVC application, a controller handles our request and returns a response to that request. The Controller accepts input from the users and converts it to commands then sends to the View component where it is displayed in the user interface. The Controller also sends commands to the Model to update the state of the Model, for example, editing a document etc. The Controller accepts input from the user using the View component of MVC and sends to the Modal component for processing and logical operations then sends a response back to the requested user using View. The Controller uses the basic logic of MVC application and processes the commands, make logical decision and evaluations, for example, if a user sends data, the Controller decides which Model to use in order to process the user input. The MVC application contains one or more Controllers and each Controller in MVC is a class that contains different methods. The methods of a Controller are called action methods. Each action method returns action result.
Different Versions of ASP.NET MVC
The MVC programming model of ASP.NET has different versions such as MVC1, MVC2, MVC3, MVC4, MVC5, and MVC6 etc. Each version of MVC has its own programming templates. The MVC was released on March 2009 that runs on the .NET Framework 3.5 with Visual Studio 2008 and Visual Studio 2008 SP1. The MVC2 was released on March 2010 that runs on the .NET Framework 3.5 with Visual Studio 2008 and Visual Studio 2010. The MVC3 was released on January 2011 that runs on the .NET Framework 4.0 with Visual Studio 2010. The MVC3 pattern supports different View Engines. The Razor View Engine is the default View Engine of the MVC3 pattern. The MVC4 was released on August 2012 that runs on the .NET Frameworks 4.0 and 4.5 with Visual Studio 2010 SP1 and Visual Studio 2012. The MVC4 pattern supports different View Engines. The Razor View Engine is the Default View Engine of the MVC4 pattern. The MVC4 provides various programming templates for the designing of Web applications such as Empty, Basic, Internet Application, Intranet Application, Mobile Application, and Web API. The MVC5 was released on October 2013 that runs on the .NET Framework 4.5 and 4.5.1 with Visual Studio 2013.
Designing Web Applications using ASP.NET MVC 5
MVC Web application provides different versions such as MVC1, MVC2, MVC3, MVC4, and MVC5. Each version of MVC has its own programming templates. The MVC5 programming model runs on the .NET Framework 4.5 or later version. To design ASP.NET MVC5 Web application using Microsoft Visual Studio.NET 2015, follow the following steps,
- Open Microsoft Visual Studio.NET 2015 Enterprise Edition.
- From the File Menu of Visual Studio.NET, select New then select Project.
- When we select Project, it opens the New Project dialog box. The New Project dialog box contains three Panes or columns. The first Pane of the New Project dialog box contains a list of programming languages provided by Microsoft Visual Studio.NET. The second Pane or the middle Pane of the New Project dialog box displays a list of different Project types of a particular Programming Language. The third pane displays a brief description of the selected project type.
- Now we select a programming language we want to use for the ASP.NET MVC Web Application from the first Pane of the New Project dialog box.
- After selecting a programming language, we select ASP.NET Web Application from the second Pane of the New Project dialog box.
- After selecting the ASP.NET Web Application, we select a target Framework for the application development from the drop-down list that is displayed above the second Pane of the New Project dialog box. It should be noted that using Microsoft Visual Studio.NET 2015, the MVC Web application template is available in the .NET Framework 4.5 and later versions, therefore, to open a new project of ASP.NET MVC Web application, always select the .NET Framework 4.5 or later version.
- Now we give a name to our new ASP.NET Web Application project using the Name text box of the New Project dialog box. The Name text box is displayed under the first Pane of the New Project dialog box.
- After given a name to the Web Application project, now we specify a location where to save our Web application project using the Location drop-down list displayed under the Name text box of the New Project dialog box. To specify a location manually, we type the location string in the Location text box otherwise, we use the Browse button of the New Project dialog box and we select a specified location in a computer system for our new MVC Web application project.
- Now we give a name to the solution of the Web application project using the Solution Name text box. The Solution Name text box is displayed under the Solution drop-down list. If we do not want to give a name to the solution, the Microsoft Visual Studio.NET by default uses the project name as a solution name.
- Now press the OK button of the New Project dialog box. When we press the OK button, a new window is displayed that contains different types of project templates such as Empty, Web Forms, MVC, Web API, Single Page Application etc. Select the MVC template and press the OK button.
Folders and Files Structure of MVC 5 Web Application
When a new project of ASP.NET MVC 5 Web application is created, the default folders and files are created. The default folders and files contain all the Web content files or Web pages such as ASP.NET and HTML files, Source files, Assemblies files such as .dll and .exe files, Data Source files (.mdb files), References, and other files such as Images and Configuration files. The default folders and files are contained in the Solution and they make up the complete structure of ASP.NET MVC Web application. The default folders and files create the default structure of the ASP.NET MVC Web application but we can also define our own structure by adding more folders and files. The default structure of folders and files make it easier to work with the ASP.NET MVC Web application. Microsoft Visual Studio.NET creates a single project file for the entire ASP.NET MVC Web application project that stores information about the project such as the list of files and folders that are included in the project and any other references which reference other projects. The extension of the project file depends on the programming language that is used for the development of ASP.NET MVC Web application. If the C# programming language is used, the project file extension will be .csproj and if the Visual Basic programming language is used, the project file extension will be .vbproj. The ASP.NET MVC5 Web application creates the following Folders and Files by default and displays them in the Solution Explorer window of Microsoft Visual Studio.NET. Following is the list of Folders and Files of MVC5 application,
- Properties
- References
- App_Data
- App_Start
- Content
- Controllers
- Fonts
- Models
- Scripts
- Views
- Global.asax
- packages.config
- Web.Config
Properties
The Properties file of ASP.NET MVC Web application project provides the general configuration settings and general information about the Web application project. The properties file contains different Tabs that provide various configuration settings and general information about the MVC Web application project.
References
The References file of ASP.NET MVC project contains all the references associated with the ASP.NET MVC project such as Assemblies, DDL dependencies, Namespaces etc.
App_Data Folder
The App_Data folder is responsible to store the data sources we used in our ASP.NET Web application. This folder usually contains application data files including .mdf database files, XML files, and other data store files.
App_Start Folder
The App_Start folder contains class files which are executed when the application starts. Usually, these class files are config files like AuthConfig.cs, BundleConfig.cs, FilterConfig.cs, RouteConfig.cs etc. The RouteConfig.cs class file contains the default format of the URL that should be supplied in the browser to navigate to a specified page.
Content Folder
This folder contains a cascading style sheet file that is Site.css and bootstrap files such as bootstrap.css and bootstrap.min.css. The style sheet file extension is .css that indicates the Cascading Style Sheet. The Cascading Style Sheet is a style sheet language that provides different styles and formatting for documents written in markup language. The Site.css file is created automatically in this folder when a new project of ASP.NET MVC Web application is created. The Site.css file provides different colors, margin settings, behavior, font style, font size, headings, paragraphs, layouts, padding settings, background color, text transformation, text decoration, font variant, borders styles and setting, line height, and some other formats for ASP.NET MVC Web application.
Controllers Folder
The Controllers folder is responsible for the user interactions such as processing the user incoming requests, handling the input data, saving the input data, and sending a response back to the user. The Controllers folder contains two different files AccountControler.css, and HomeController.css. The file AccountControler.css handles the user account information such as the username and password, change password, new user registration, and user authentication. The HomeController.css file is responsible to handle the user general inputs and responses such as the user contact information, telephone information, and index information.
Fonts Folder
This folder contains the custom font files for the ASP.NET MVC Web application project.
Models Folder
The Models folder contains Models of the application that handles the application logic and data. Each Model in the Models folder contains one or more classes that represent the application Models. Each class represents a single Model of the application. Models hold and manipulate the application data. When we create a new project of ASP.NET MVC, it creates a file AccountModels.cs automatically that contains models for the application security such as RegisterModel class that handles the user registration, LogOnModel that handles the user login, and ChangePasswordModel that handles the user password change.
Scripts Folder
This folder stores the JavaScript files of the MVC application. By default Visual Studio.NET and Visual Web Developer fills this folder with the standard MVC, AJAX, and jQuery files.
Views Folder
The Views folder contains the HTML files for the application to display the output to the users. It is basically a user interface that allows users to interact with the application and send or receive information to and from the application. The Views folder contains one folder for each controller. The View folder contains different subfolders and files. Following is the list of these folders and files,
| File / Folder | Description |
| Account Folder | The Account folder contains various pages related to the user accounts such as create a new user account, manage the user accounts, the user local login account, reset the user password, change the user password, and register external login. |
| Home Folder | The Home folder contains three main important HTML pages that are About.cshtml, Contact.cshtml, and Index.cshtml, The page About.cshtml is used to provide additional information. The Contact.cshtml page is used to provide the contact information such as residential address, email address, and telephone number etc. The Index.cshtml page is used to provide the index information. This is the default index file and it is created automatically when we create the ASP.NET MVC project. This file contains some default contents or information and it allows us to put our own contents or information in this file. |
| Shared Folder | The Shared folder is used to store views shared between controllers such as master pages and layout pages. The Shared folder contains three main files such as _Layout.cshtml file, _LoginPartial.cshtml file, and Error.cshtml file. The first file _Layout.cshtml represents the layout of each page in the application. This file contains a default code for the layout of pages but we can also add our own code for the layout of the pages. The second file _LoginPartial.cshtml is associated with the user’s authentications. The third file Error.cshtml is associated with the errors when occurs in the application. This file allows us to define our own error messages. |
| _ViewStart.cshtml File | The _ViewStart file is located in the View folder and it contains the following content: @{ Layout = "~/Views/Shared/_Layout.cshtml"; }. This code is automatically added to all views displayed by the application. If we remove this file, we must add this line to all views. |
Global.asax
This is a global file for the entire MVC Web application project that represents the Global class of MVC web application and contains methods or event handlers that run at various points in the application. The Global.asax is an optional file that allows us to execute codes using the methods or events handlers. The methods or events handlers of the Global.asax handle the application and the application sessions. The methods or events handlers of the Global.asax file are Application_BeginRequest, application_start, application_error, session_start, session_end etc. The Global.asax file is responsible to execute the code for responding to application-level events raised by ASP.NET or HttpModules.
Web.config
The Web.config is an XML file that contains configuration settings for the ASP.NET MVC Web application. This file allows us to establish the MVC Web application project specific settings for security, compilation options, user authentication, debugging, tracing, connection strings, and for error handling etc. The configuration settings affect all the Web applications on a server, a single application, individual pages, or it affects individual folders in a web application.
packages.config File
The Packages.config file is managed by NuGet to keep track of what packages and versions we have installed in the application.
Adding Layout to pages
When we create a new project of ASP.NET MVC web application, its pages have the default layout. We can change the default layout of the pages using our own layout. To change the default layout of the pages, the new layout style is placed in the file _Layout.cshtml that is located inside the Shared folder and Shared folder is located inside the View folder.
System.Web.Mvc Namespace
The System.Web.Mvc namespace contains classes and interfaces that support ASP.NET MVC framework for designing Web applications. The classes of this namespace represent Controllers, Controller factories, Action Results, Views, Partial View, Model Binders etc.