ASP.NET MVC (Model View Controller) Basic Tutorial For Beginners

In ASP.NET, MVC (Model View Controller) framework is widely used for more than a decade. The MVC framework is intended to be one of the dominating frameworks in the market. It separates the design, data, and the logic. In this tutorial, you will learn about the basics of MVC and create a basic ASP.NET MVC application.

Introduction to MVC Framework

MVC (Model View Controller) is a pattern which describes the architecture of your application. It works on three of the main components of the application i.e. Model (contains data), the view (contains user-interface) and the controller (contains the logic to populate view from the model). MVC (Model View Controller) is becoming an industry standard. ASP.NET widely uses MVC as it is enhancing day by day. Microsoft has also introduced a new version of MVC i.e. MVC 6 also known as MVC Core 1.0.

MVC Components in Detail

Model

The Model contains all the data used in the application. For the database driven applications, the database populates the model and then it is used in the application. The Model acts like traditional Data Access Objects to populate the view or data source. It can be called a bridge between the data source and the application.

View

The view is the User Interface that displays the data to the user. It includes text boxes, buttons etc. When the user wants to provide any data to the application, the View gets the data and the controller saves the data in the Model.

Controller

The Controller is an interface between the Model and the View. It contains all the logic of the application i.e. The complete business logic of the application, manipulates the data, handles views and controllers etc.

ASP.NET MVC

ASP.NET contains three basic development models i.e. Web Forms, Web Pages, and MVC. There are no more Web Forms in MVC 6 and ASP.NET 5 only Web Forms and Web APIs are there in MVC 6. System.Web.Mvc contains all the MVC logic for ASP.NET which includes Model binding, HTML helper. Data Annotations, Routing and Filters etc.

ASP.NET MVC has previously defined view engines if you use its built-in ASP.NET Razor of ASPX view engine. The component-based design of the reduces the complexity of the large-scale applications by logically dividing the application into the Model, View, and the Controller. The View State is excluded from ASP.NET MVC which gives the ultimate control to the developers.

Creating First Application in ASP.NET MVC

Visual Studio 2015 already supports MVC. If you are using Visual Studio 12 or lower versions of Visual Studio, you must install MVC (Which is not actually installing MVC, it is adding MVC files to Visual Studio). When starting MVC 6, you must have Visual Studio with update 3 to add .NET core to Visual Studio. .NET core is only supported by update 3.

Basic MVC 5 Application in Visual Studio 2015

Open Visual Studio 2015 with Administrator Privileges. Create a new Project from File > New >Project and choose

ASP.NET Web Application (.NET Framework) 

It will create a new MVC 5 Web Application.

First MVC 5 Web Application
First MVC 5 Web Application

Choose an Empty Template and check MVC from the check boxes given below in Add Folder and Core References

Empty ASP.NET MVC 5 Template
Empty ASP.NET MVC 5 Template

Now you will have a simple ASP.NET MVC 5 Project. As you already added MVC folders so you will have Models, Views and Controllers folders in the directory.

Directory Structure of ASP.NET MVC 5 application
Directory Structure of ASP.NET MVC 5 application

It’s time to add the Controller and a View to understand the working of the MVC framework.

  1. Right-click on Views folder and add a new empty MVC Controller.
    From the menu, select Add > View (Create Empty View and Rename the View to Index)

    Add an Empty View
    Add an Empty View

    This will add an empty cshtml file.

  2. Right-click on Controllers folder and add a new empty MVC Controller.
    From the menu, select Add > Controller (Add MVC 5 Controller – Empty)

    New Empty ASP.NET MVC Controller
    New Empty ASP.NET MVC Controller

    Rename the controller as HomeController. 

    Home Controller
    Home Controller

Populating View from Controller (ViewBag)

The Controller uses ViewBag object to populate View from Controller. To understand ViewBag, add a view bag object in the controller and put something in the ViewBag.

Now call the ViewBag in the View. You can call ViewBag.version with the @ sign in the body of the View.

When you will run the example, it will display the MVC version.

Display MVC version in the View From Controller
Display MVC version in the View From Controller

 

Running the project on Local IIS

Right-click on the Project in the Solution Explorer and open properties of the Project. From the tabs at the left side, choose Web. Select Local IIS from the drop-down list in the Servers.

Select Local IIS Server From Properties
Select Local IIS Server From Properties

Before saving the properties, Visual Studio 2015 will ask whether to create the virtual directory or not. Click on Yes button to create Virtual directories. It will automatically configure the virtual directories.

Set Local IIS to run the project
Set Local IIS to run the project

Now, when you again run the project, it will run on Local IIS Server.

Local IIS Server Displaying MVC Version
Local IIS Server Displaying MVC Version

URL and Controller Mapping (ASP.NET Routing)

The Index Method in the Controller invokes the Index file. If the Index file is not present in the Views, IIS Server will generate an error. To Understand the URL Mapping, consider the below given image.

URL Mapping with the Controller
URL Mapping with the Controller

As in WebForms URLs are mapped to Physical files but in MVC, URLs are mapped to Controller’s Action Methods.

To understand this concept in more detail, open ASP.NET RouteConfig.cs from App_Start folder.

Default routes in MVC
Default routes in MVC

As you can see in the image, Controller and Action are not specified in the URL but they are called. This is because of the default routes. The id Parameter is optional so if you don’t mention the id in the URL, it will not affect the functionality.

Getting values from URL

Let’s pass the optional id in the URL.

Pass id as URL parameters
Pass id as URL parameters

You will see that it will have no effect on the result. This id goes as the parameter of the Index method. so to retrieve this value you will need to pass a string variable as the id in the Index method of your controller and simply return it. Also, change the return type of Index method to string.

Now again when you pass the id in URL, it will display the id.

Passing id as parameter in URL
Passing id as the parameter in URL

what if you want to pass another parameter with some name? There are two possible ways to do this.

First one is through Request.QueryString[“name”]

The second one is by passing the name as parameters.

Getting two parameters from URL
Getting two parameters from URL

Download First ASP.NET MVC 5 Project Source Code

Here you go. You have learned the basics of MVC.

Stay tuned for more upcoming tutorials. Don’t forget to give your precious feedback.

Stay Blessed!

Leave a Reply

Your email address will not be published. Required fields are marked *