Learn to create simple MVC application in asp.net

Hi all, Today we are going to learn about asp.net MVC. What is MVC, what is model, view and controller, how MVC request is processed and how to create simple asp.net MVC project.

What is MVC
What is MVC! MVC is a design pattern. In asp.net MVC framework is used for developing web application using MVC (Model View Controller) design.

• The Model is the object which handles the logic for the application data. It is the business layer. Model represents the data or event activity. Model layer is divided into several different layers like Service layer, Data Access layer and Value Objects layer.
• The View handles the display of the data. It is the display layer.
• The Controller handles user interaction. It is used to communicate between classes in the model and view. It job is to translate incoming requests into outgoing responses.

How MVC handles the requests coming from client (user browser)

1) At the first step request go to the asp.net stack and then it then handed to the routing engine.
2) According to routing configuration, route engine look for the appropriate controller, if the controller is not found route engine it returns controller not found.
3) After route engine find the appropriate controller, the controller interacts with the model.
4) Model retrieves the data for data source and returns to the controller.
5) After retrieving data controller then request for the appropriate view with or without data model.

Below diagram show how request came from client and how MVC handles the request.

Advantages of MVC

1) It is the advance structure of 3 tire architecture.
2) Less coupling between layers.
3) Its supports multiple views.
4) Rapid development.
5) No View State resulting increased page size so reduced performance.

Now let’s learn how to create simple MVC project.

1) First step is open visual studio, then click on file->new->project.
2) Pop up will open re-name project to mvcdemo and click ok.

3) After clicking another pop up will open select internet application and view engine as razor and click on ok.

4) Project is created. Delete all the files in Model, View and Controller folder. Also delete Filter Folder; we will study about filter in another topic.

5) Now Right click on Model folder and Click on Add and click on class and rename it to DemoModel.
Add the below code in demomodel

       public DemoModel(string FName, string LName)
            {
                this.FirstName = FName;
                this.LastName = LName;
            }
            public string FirstName { get; set; }
            public string LastName { get; set; }

            public string GetUserName() { return FirstName + ' ' + LastName; }

6) Now Right click on controller and click on add new controller and rename it DemoController.
Add the below code in Index Method on democontroller

           DemoModel objModel = new DemoModel("Vincent","Kapoor");
            return View(objModel);

7) Now Add Demo folder under View Folder and then Right click on Demo folder and click on Add and the View rename it to Index and check the checkbox on create strongly type view and select DemoModel from the suggestionlist and then click on Add.
Add the below code in demoview

@model MVCDEMO.Models.DemoModel
@{Layout = null;}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DemoView</title>
</head>
<body>
    <div style="font-size:14px;">
        Welcome @Model.GetUserName();!<br />
        First Name : @Model.FirstName;<br />
        Last Name: @Model.LastName;
    </div>
</body>
</html>

8) Now open your RouteConfig.cs file in App_Start folder and remove code written in RegisterRoutes and paste below code.

ROUTECONFIG FILE IS USED TO MAP THE CONTROLLER TO THE PARTICULAR ACTION.

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Demo", action = "Index", id = UrlParameter.Optional }
            );