MVC Tutorial

What is the MVC framework?

MVC is nothing but a model view controller that is available in the form of a design pattern. This framework is commonly used to design a user interface and this divides the related programming logic into three interconnected elements they are model, Controller, and View. The main purpose of using the MVC framework is to offer a fundamental piece of designing the framework for Desktop, Mobile, and also for web applications. The MVC model allows programmers to design the barrier to organize the codes that allow programmers to compartmentalize functional methods. MVC framework provides front-end and back-end for the database systems, the users, and many other data processing components.

MVC architecture: 

The below architectural diagram explains the work nature and functionalities of the MVC framework. Let me explain it briefly.

MVC framework consists of mainly three components they are known as;

1. Model

2. View

3. Controller

MVC is also known as the Model view controller. This is a type of software pattern used to develop web applications. Let me explain these components one by one;

1. Model: this is the lower level pattern this is used for maintaining the data structures.

2. View: this type of component is used to display the data or any portion of the data mainly used by users.

3. Controller: this component consists of software codes. These codes are often used to control the interactions between the Model and View components.

As we already know that MVC is a popular tool and this isolates the application logic from the available user interface layer and also supports the separation of software concerns. The main function of the controller is to receive all the requests for the application developments and then it works with the model that prepares any data which are needed by the View component. The view then makes use of these data structures prepared by the controller component to create final presentable responses. The view is a script-based templates system available in the following programming languages like JSP, ASP, PHP, and also it is very easy to integrate with AJAX technologies.

MVC frameworks feature:

Below are the important framework features provided by MVC technology:

1. POJO Forms and POJO Actions: This framework feature is an integral part of the technology. This is used to receive the data in the form of input with the help of the available POJO class.

2. Tag support: this feature is used to improve the form tags and new data tags. This feature also helps developers to write fewer program codes.

3. AJAX support:  this feature has developed by Web 2.0 technologies and has integrated with AJAX support. These products are developed into products by creating          AJAX tags and which are similar to standard Tags.

4. Easy Integration: This feature is used to integrate with any other framework in the form of spring, tiles, and site mesh.

5. Template Support: This template is used for generating different types of views using these templates.

6. Plugin Support: this feature is used to enhance and augmented by using various plugins.

7. Profiling: This profiling feature is used to debug and profile the application to integrate with the help of debugging tools.

8. Easy to modify tags: this type of feature is used to build the templates without using any programming languages like JSP, HTML, XML, and CSS knowledge.

9. Promote less configuration support:  with the help of default values, you don’t have to perform any type of configuration.

10. View technology tools: MVC feature supports multiple view options like a free marker, velocity, and XSLT.

Advantages of the MVC framework:

Below are the major advantages of using the MVC framework:

1. With the help of the MVC framework, complex applications are easy to manage and integrated with three divisions such as Model, View, and controller.

2. Offers a strong routing mechanism with the help of the front controller pattern.

3. Support more control over web application behavior with the elimination of view state and server-based application firms.

4. Offers better support for test-driven development or TDD.

5. MVC tools work well for development with large teams with large software development teams with multiple web application developers and also web designers.

6. Offers reusability of the model, as we know that the same MVC model can be used for different purposes.

7. MVC tool encourages well-defined interfaces.

8. Simplicity, Each MVC part is simple to use and very easy to understand, implement, and View.

MVC lifecycle:

MVC performs a complex page life cycle when it comes to other .NET platforms like windows applications have their own life cycle. One important thing is that all these technologies should process the pipeline leverage features and MVC is no different.

MVC comes up with two different life cycles:

1. The application life cycle

2. The request life cycle

1. The application life cycle:

This application life cycle refers to the time in which all the applications process starts running the IIS platform and this process continues until time stops it. This process will be marked by the application and end the events in the startup files of the given application.

2. The Request Life cycle:

This type of cycle represents the sequence of events, which will happen every time an HTTP request is handled by your own application.

MVC Routing:

Every point of application starts with routing, MVC platform consists of requests, this helps to find out how can we handle through the URL routing module. Modules in MVC component that can be hooked up into the multiple application life cycle management and also add the functionality. This routing module also responsible for matching any incoming URL to route any application.

The above figure explains the routing mechanism;

The main function of the MVC framework helps to converts the route data into a controller that can be used to handle requests. Once you have created the controller, next it comes to the execution part. These components are known as action invoker, this helps users to find and select the appropriate Actions. Once you finish the action result action next stage is to trigger the actions which are known as Trigger execution. MVC model declares the execution results and if your result type is View type then the View engine will be called and helps to find the views.

If the result type is not a View type, the actions will be executed on their own. This result event will be generated by original HTTP requests.

MVC Version History:

The below column explains the various versions of the MVC model:

MVC studio: visual studio: .NETframeworks: released date: features

1.MVC version 1.0: VS 2008: .net3.5: 13/03/2009: features included are: MVC architecture with web form engine, routing, HTML helpers, supports auto binding, and             AJAX supports.

2. MVC version 2.0: VS 2008: .Net 3.5/4.0: 10/03/2010: features included are Area, Asynchronous controllers, modified HTML helper methods with lambda expressions,        data annotations attribute, client side validation, custom templates, and scaffolding.

3. MVC version 3.0: VS 2010: .Net 4.0: 13/01/2011: features included are unobtrusive javascript validations, Razor view engine, global filters, remote validations, and dependency resolver for IoC and View bag.

4. MVC version 4.0: VS 2010 SP1: .net4.0/.net 4.5: 15/08/2012: features are, offers mobile project template, bundling and minification, and supports the AJAX windows         SDK.

5. MVC version 5.0: VS 2013: .net 4.5: 17/10/2012: features included are authenticate filters, bootstrap supports, new scaffolding items and ASP.net identity.

6. MVC 5.2 current version: VS 2013: .net 4.5: 28/08/2014: features are offers attributes based routing, bug fixes and minor features update.

Create First MVC App:

Now I am going to use MVC version 5.2 and Visual studio 2017 edition, .NET framework 4.6 to create our first MVC application:

The steps included are:

1. First you have to download the latest version of the visual studio from Visualstudio.microsoft.com/downloads.

2. Now open the visual studio 2017-> select the file menu -> new -> project as shown in the below figure,

Now expand the Visual C# node -> select the web in the left panel -> choose ASP.NET web application (.NET framework) in the middle panel. Now you should enter the name of your project such as MyMVCApplication1. Here you can also change the location of MVC just by clicking on the Browse tab-> finally, click OK as shown below.

User can also change the authentication by clicking on the Change Authentication button -> now you can select the appropriate authentication mode for the given application as shown in the below diagram:

Here we are keeping the authentication as a default one for our application which is no longer available for the authentication process. Now you have to wait for the sometimes to create your first simple MVC application by using default templates as shown below;

Now Click on the F5 button to run the project only in debug mode or you can also use ctrl + F5 to run your project without debugging the code. This will now open the home page in the Browser as shown below.

Java Certification Training

• Master Your Craft
• Lifetime LMS & Faculty Access
• 24/7 online expert support
• Real-world & Project Based Learning

Explore Curriculum

By default MVC 5 project consists of javascript and CSS files to bootstrap the application and you can also create the appropriate web pages. Then automatically the user interface will change the look and also modify the screen size of the devices. In the below figure, you will see how the top menu changes in the mobile device.

MVC Folder Structure:

Now I am going to explain the folder structure available in the MVC visual studio:

The below figure will explain this;

Let’s explain these significances one by one;

1. App_data: This app_data consists of various application data files such as Local DB, .mdf files, XML files, and other data files. An IIS service in the database server never consists of the App_Data folder.

2. App_start: This App_start folder consists of several class files, and these files will be executed only when the application begins. Typically this folder consists of configuration files like AuthConfig.cs, BundleConfig.cs, FilterConfig.cs, RouteConfig.cs, and RouteConfig.cs etc. MVC version 5.0 includes the folders like BundleConfig.cs, FilterConfig.cs, and RouteConfig.cs files by default.

You can see them in the below figure;

3. Content: this content folder consists of static files like CSS files, Icon files, and images. The content folder may include the following files like bootstrap.css, bootstrap.min.css, and site.css, etc. by default.

4. Controller: This controller file consists of many class files. The controller handles the user request and returns the responses. Here all you need is to require the name of the controller and the name should end with the suffix “Controller”.

5. Fonts: this font file consists of custom font files for any application.

6. Folder: The folder in MVC contains model class files. This model class includes several Public properties and these properties will be used to hold and manipulate the application data.

7. Scripts: This script in the MVC folder includes files like Java Scripts or VB script files. MVC version 5 consists of JavaScript, JQuery 1.10, and modernizer.

8. Views:

This View folder holds HTML files for each controller. This View file is like a .cshtml file, here the user can write HTML and C# or Visual basics.NET codes. This View folder consists of a separate folder for each controller. For example, layout files.

Additionally MVC version 5 also consists of other configuration files:

1. Global. asax:

This is a type of configuration file; this allows users to write codes, these are used to run the program applications. They are Application_BeginRequest, application_start, application_error, session_start, and session_end, etc.

2. Packages. config:

This type of configuration file is managed by Nuget used to track any packages and versions that you have installed in the application.

3. Web. config:

This type of configuration file contains application-level configurations.

MVC Controller:

The main purpose of using Controller in MVC is to handle any incoming URL requests. The controller is a type of class, which is derived from the base class namely the system. web.MVC.controller. Generally, a controller method consists of various kinds of public methods known as “Actions”. Both these controllers and Action handle all the incoming requests, retrieve necessary data model information, and also return the appropriate responses.

How to add a controller:

I am going to explain step by step to know how to add a new controller in MVC application visual studio.

Here we are going to create StudentController class as shown below.

1. First go to the visual studio -> right click on the MVC controller method folder-> select add -> click on the Controller as shown below;

This opens the add scaffold folder like below:

Subscribe to our youtube channel to get new updates..!

Subscribe

This Add Scaffold dialog box contains various templates to generate a new controller. Now select the “MVC 5 Controller Empty” -> click add method. This will open the ADD controller check box, as shown in the below diagram.

Go to the Add controller check box -> give the name for the controller -> name should ends with Controller-> write StudentController -> now click Add button.

This will create the StudentController class, and index () method in StudentController.CS -> file the Controller folder as shown in the below program:

Using System; //method name default

Using System.Collections.Generic; //method name default

Using System.Linq; //default method

Using System.web ; //default method name

Using System.Web.MVC;

Namespace MVC_BasicTutorials.Controllers //given the controller name

{

         Public class StudentController: Controller //this will get the student list

           Public ActionResult Index ()

                 {

                        Return View ();

                  }

       }
}

You can see this programming code in the routing section URL request http: //Localhost/ student or Http: //localhost/student/index handled by index () methods.

Action methods in MVC:

In this section you will be learning what is all the action methods will be used in MVC;

As I said earlier, all the public methods of the controller class are known as the “action” method. Below are the few rules which we should follow while working with MVC:

1. Action methods should be of public type. It never is private or protected.
2. Action methods cannot be overloaded.
3. Action methods cannot be static methods.

The following diagram illustrates the Action methods in the Controller class:

In the above figure, the Index () method is public, this returns the method “ActionResult” by using the “View ()” method. This will be defined in the “Controller” base class and which return the appropriate “ActionResult”.

Default Action method:

Every Controller in MVC can have a default action method this is done as per the configuration route. By default “RouteConfig” class can be used here and also Index () method is a default method action.

Action Result:

MVC framework adds the various “Result” classes; this can be returned from the action methods in the controller. The “result” class represents various types of responses; they are HTML, FILE, Strings, JavaScript, and JSON, etc.

The below column explains the different types of Action results and responses:

Result class and it’s descriptions:

1. View Result = this class represents the HTML and Markup responses.
2. EmptyResults = this class represents no response is available.
3. ContentResults = this class represents the string literal responses.
4. FILEcontentResult/ FILE streamResults/ FILE pathResults = this class represents the file contents.
5. JAVA scriptResults = this class represents the JAVAscript responses.
6. JSON results = this represents the JSON response that can be used in AJAX.
7. REDIRECTRESULTS = this class represents the redirection to the new URL requests.
8. RedirectToRouteResult = this class represents the other action of the same response and other controllers.
9. PARTIALVIEW results = this class returns the HTML from partial view.
10. HTTPunauthorised Results = this class returns 403 status.

The following are the base controller methods can be used for these Result Classes;

VIEWRESULT controller method -> uses the VIEW ()

CONTENTRESULT -> CONTENT ()

FILEContentRESULT, FILEPATHRESULT, FILESTREAMRESULT -> FILE ()

JAVASCRIPTRESULT -> JAVASCRIPT ()

JSONRESULT -> JSON ()

REDIRECTRESULT -> REDIRECT ()

REDIRECToRouteRESULT -> REDIRECTTOROUTE ()

PartialVIEWRESULT -> PARTIALVIEW ()

Action Method Parameters:

Every action in the method can have multiple input parameters as shown in the below programming example;

[HTTP POST]

PUBLIC ActionResult EDIT (Student STD)

PUBLIC ActionResult EDIT (Student STD)

{

   //now update to the student database

 RETURN RedirectTOACTION (“INDEX”);

}

[HTTPDELETE]

PUBLIC ACTIONResult DELETE (INT id)

{

  // this method deletes the student database

   Returns REDIRECTTOACTION (“INDEX”);

}

ACTION Selectors:

Action selectors are attributes that can be applied to action methods. The main purpose of using an Action selector is to help the routing engine to select the action method to handle the request. MVC version 5 supports the following attributes such as;

1. Action name
2. Action Verbs
3. Non-Action

Let me explain them one by one; first will start with Action name;

1. Action Name: The “ACTION NAME” attribute allows users to specify the different action names than the method names.
2. Non Action: By using the “Non-action” attribute, when the user wants to use the public method in a CONTROLLER method and then this cannot be used in an action method.
3. Action Verbs: Action verb is a selector attribute which is used to handle HTTP requests. The MVC version 5.0 framework consists of the following requests such as HTTP GET, HTTP PUT, HTTP ACTION, HTTP OPTIONS, and HTTP PATCH.

The below column explains the usage of HTTP method requests:

HTTP methods and usage:

1. GET = this is used to retrieve the server information, and the parameter will be appended in the query string methods.
2. POST = this is used to create the new resources.
3. PUT = this HTTP method is used to update or modify already existing resources.
4. HEAD = this HTTP method is used to get the parameter which will not be returned to the message body in the server.
5. OPTIONS = this method represents the request information used for communication options supported by users.
6. DELETE = this is used to delete the existing resources. 
7. PATCH = this is used to update the resources in either fully or partially.

Razor Syntax in MVC:

Razor is a type of View supported in the ASP.NET MVC framework. With the help of Razor, users can write a mix of HTML and server-side code such as C# or Visual basic. The syntax is as follows;

Visual basic syntax -> .vbhtml files extension

C# syntax -> .cshtml Files extension.

This Razor syntax has the following characteristics:

1. Easy to learn: Razor syntax offers very easy to learn and you can use familiar languages like C# or visual basic.
2. Compact: Razor syntax is compact and it minimizes the characters used and keystrokes required to write the code.
3. Intellisense: Razor Syntax supports users to complete the statements within the Visual studio.

The following are the few conditional statements that will be used in MVC Framework uses the Razor Syntax.

Drawbacks of MVC architecture:

 Below are the few disadvantages of using MVC Architecture:

1. This MVC architecture is too complex to implement any application.
2. MVC architecture is not suitable for smaller applications; implementing this pattern in such applications will have an adverse effect on application performance and design.
3. While implementing the project, there will be a chance of getting code duplication.
4. And also close coupling between MVC view and MVC controller components.
5. Sometimes it’s difficult to control HTML and also you need to tag HTTP requests on “Single page”.

Conclusion :

In this tutorial, I have explained the MVC framework, versions, components, features, and creating your first MVC application. Learning this tutorial will help you to gain knowledge in MVC technology. To enhance your industry-oriented knowledge in this tool, you can take any online course and you will also get hands-on experience. We offer the best training in the current market and also our course contents are designed by the SME team. Our technical team also provides 24/7 online support for any course-related queries.