Skip to main content

First MVC Application

Now we are familiar with basic concepts of MVC. Now we will see how we can create our first MVC application.
We are using visual studio 2017 for creating MVC application.You can also use Visual studio 2013 or 2015. You can download community edition of Visual Studio 2017 from microsft’s website.

Below is the URL for downloading commnunity edition of visual studio 2017:
https://my.visualstudio.com/Downloads?q=visual%20studio%202017

You need to login first with microsoft account to download.

Creating Project:

Open Visual studio and click on File Menu –> New –> Project
See below screenshot :

Select language Visual C# and select project type ‘ASP.Net Web Application(.Net Framework)’.

Select Empty project template and click on MVC chekbox and click on OK button.

It will take some time to create the project. Now we will see project structure.

The App_start folder will contain all the files which needs to be executed on the first request such as RouteConfig.cs, FilterConfig.cs etc.
The Controllers contain all the controllers in the project.The Models folder contain all the model classes in application. The Views folder contains all the view in application. This folder name is fixed, we can not rename Views folder. Views folder will contain folders for each controller.

For example, there is ‘Home’ folder under views for ‘HomeController’. It will contain all views for HomeController.
Now we are going to create one controller with some views. Controller receive the request and defines the execution flow of the application. Controller invokes model and view.

Creating Controller
Right click on Controllers folder and select Add –> Controller

Select ‘MVC 5 Controller – Empty’ option and click on Add button

Now specify the controller name. Lets create a controller named ‘Home’

Click on Add button. We can add controllers as per our requirement. For example , we can create a controller ‘Category’ to manage categories.
We can add ‘Customer’ controller for managing customers. Each controller should have suffix ‘Controller’ in its name.

Please see below the code of Home Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

The most important namespace is System.Web.MVC, this namespace contains most of the predefined classes to work with ASP.Net MVC.
In above code , there is a class HomeController which is derived from System.Web.MVC.Controller parent class. Every controller class should have suffix controller.

This parent class provides properties and methods which are useful for every controller.For example it provides properties like ViewData, ViewBag and TempData.
The controller mainly contains action methods. An action method represents an operation such as Adding a Customer, searching customers etc.
Action method does not contain presentation logic directly. Action method invokes a view and provides essential data to the view.
The view contains the presentation logic.

In above code, Index is action method in HomeController. Inside action method , you can return different types of ActionResult for example return View, return content etc.
Index method has single statement to return a view.
Now we will add a view.For adding a view, right click on Index method and select ‘Add View’.

It is recommended to give view name same as action method but it is not mandatory.Select template as Empty(Without model).Do not select check box for ‘Use a layout page’
and click on Add button, view file will be created. You can find it inside View folder. Visual studio automatically creates a folder named ‘Home’ inside views folder and creates Index view file there.
File extension is ‘.cshtml’ because we are using c# language , for VB.Net extension will be ‘.vbhtml’
All the view of a controller must be placed in the folder with same as controller inside Views folder.
For example, if there is a Customer Controller then all the Views of Customer will be placed inside ‘Customer’ folder and ‘Customer’ folder will be created inside View folder.

Below is the initial markup of index view:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
       <h2>Welcome to first MVC application</h2>
    </div>
</body>
</html>

I have added a <h2> tag to show welcome message.If view name is different the we have to mention view name in return view() statement.
Please see below code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View("search");
        }
    }
}

Here in above code, different view ‘search’ is mentioned to be returned. Index action method will return search view.

Now first MVC application is ready , press F5 to start debugging.
Below is the screenshot of our first application:


So we have seen step by step the creation of our first MVC application.

One thought to “First MVC Application”

Comments are closed.