MVC Beginner's Application

• Download source code - 4.39 MB

Introduction

In my last blog, we have read about the life cycle of MVC. Visit MVC Introduction. Now, we will make our first MVC application. MVC 4 is the latest version. We will make our application in MVC 4 by using Microsoft Visual Studio 2012. Visual Studio 2010 also supports MVC 4 but we need to install it additionally. It can be installed using the Web Platform installer (http://www.microsoft.com.web/gallery/install.aspx?appid=MVC4VS2010).

MVC 4 needs the following configuration:

Let us create the application named Employee Information. Open VS 2012 and select File -> New Project. (MVC is a Project template and not a web site). Select ASP.NET MVC 4 Application and give it a name as EmployeeInformation and click OK.

As we click on ok button, it will ask us to select a template –

Project Templates

• Empty template - it has only basic folder structure and assemblies. Rest all we can develop according to our need.
• Basic template - it has basic folders, CSS and MVC application infrastructure. If we run the application created with Basic template, it will give us the error. We need to code. It is basically intended for experienced developers who want to configure the things exactly how they want.
• Internet Application template - it contains the beginnings of MVC application enough that we can run the application immediately after creating it.
• Intranet Application template - it is just same as internet application template. The difference is that Account management functions run against Windows accounts rather than ASP.NET membership system.
• Mobile Application template - it is for the development of mobile applications. It includes mobile visual themes, touch optimized UI and support for AJAX navigation.
• Web API template - ASP.NET web API is a framework for creating HTTP services. It is similar to the internet application template but there is no user account management functionality.

We will select Internet Application template.

Next comes View Engine drop down.

It contains two different view engines – Razor View engine and web forms view engine. We will select Razor. Razor works with HTML and is to provide the clean, lightweight, simple view engine. It minimizes the amount of syntax and extra characters and puts a little syntax as possible.

Next comes Create a unit test project checkbox. We will select it and unit tests will get created. Click on OK and the solution will get created with two projects – one for the application and the other for unit tests. Automatically, many files and folders will get added into our project as shown below –

We will add all the controllers in controllers folder, Models in Models folder etc. I.e., everything in their respective folders. Scripts folder contains all the necessary javascript files that support JQuery. Content folder contains Site.css file through which we can do the designing part.

These default files provide us the basic structure for a working application with Home, About and Login/Logout pages/Registration pages.

Naming Convention - how to name the files to be added in the MVC application:

• Controllers – Each Controller’s class name ends with Controller suffix. For example: HomeController.
• Views – there is a single Views Folder in every application. In Views folder, there are Sub folders that are named as the name of Controller without Controller suffix. For example: for HomeController there will be a folder under Views folder named Home.
• Models - Name of Model will be according to Table name with the Model suffix. For example: Name of Account Model will be AccountModel.

The structure of the project is created. Now we need to add our functionality. We are going to create a project on employee information. This is an Entity framework. So, we need to create Models first of all. Right click on Models folder and add new class named – EmployeeModels.cs and add the properties –

DepartmentModels.cs –

CityModels.cs –

StateModels.cs –

We can see that Employee Model consists of two properties against each Department, City and State. We call them navigational properties. Using Employee, we can navigate to Department name, city Name and State name through dot operator.

These Models will interact with the database. Now we will add Controllers for actions –

Right click on Controllers folder and Add New Controller and Name that EmployeeController. We will be asked for Controller Name, name that as EmployeeController.

Scaffholding Options - Scaffholding in ASP.NET MVC will generate Create, Read, Update and Delete (CRUD) functionality in an application. Scaffholding knows how to create the Views, how to name the Views and where to place all the things.

So, in Template Drop down, we will select MVC Controller with read/write actions and views, using Entity Framework. In Models drop down, we will select our EmployeeModels. For the DataContext class, when we click on it and select <Data Context Type> a pop up will come –

It will add EmployeeController in Controllers folder and automatically add code for Create, Read, Update and Delete functionality and create Views accordingly. In Controllers, there are ActionResult methods. Name of ActionResult method must be same as that of name of view. And name of Folder of View that contains that View must be same as that of Controllers name without controller suffix.

As we build the application, it will automatically create the tables in local database –

Now, our application is ready for basic functionality –

Run the application and against the localhost, type – Employee. It is the Controller, that will run. According to Employee table, it will create columns. We can edit them through Index View.

How it works - when we run our MVC Application, we have to provide “Controller/View/ID” in the URL, in which ID is optional. As we know that Controller is one who interacts with both, Model and View. So, we need to write Controller/View. A controller has many ActionResult methods. So, the question is how the controller knows which ActionResult to execute when we call a particular controller. The answer is the naming convention of Views. Under Views folder, we need a folder whose name will be same as that of Controller without Controller suffix. And under that folder we have different views whose name will be same as that of ActionResult method of that controller. So, in our URL, we provide Controller/View. This is how the controller knows which view to run.

Let us create a record. When we click on Create New, Create.cshtml View will get the call.

Through this screen shot, we can see that how Create View will get open on clicking on Create New Link. Following screen will get open –

We can add as many records. We can edit the headings of attributes through Create.cshtml.

After creating a record, we can edit and delete that record. We can also do modifications at design level.

This is a simple application in MVC. Now, do modifications in your code and see the changes accordingly.