MVC Basics

Model View Controller [MVC]


MVC is a design pattern which separates the Business Logic, User Interface and Controlling user inputs. It consists of Model, View and Controllers. 


Let we see about each components...


Model


Model represents the data model which contains the all DB related operations including select, insert, delete and update. I have used Entity Data Model(edmx) to build model for my application. We can also have classes to represent the DB operations like DAL.


View


The view describes the user interface which will appears to the user. Normally the page files(.aspx) with html design is called views. It doesn't contain the code behind file. since its not event driven.


Controller  


Controllers are class file which should be derived from the base class Controller. Basically controllers determine which view should be called based on the URL routes. The default route is defined in the Application_Start() event of Global.asax.


Sample Application


I'd like to create one sample application so that you could understand more clearly how the model, view and controllers are interacting each other with real time scenario.


Purpose


To display all the Employees from Northwind database Employees table.


Step 1 : Creating ASP.NET MVC Web Application


Create ASP.NET MVC Web Application under .Net Framework 3.5. Note that we have created MVC Framework 1.0. Refer the below image how the solution looks,

If you look at the project structure, you could find Controllers, Models and Views folder to hold the respective files.

Step 2 : Add Controllers

Right click on the Controllers folder and select Add Controller menu, it will open a popup (see the below image) to give the controller name with suffix of controller.

It also has the check box to Add action methods for create, update and Details scenarios. If you check this box it will create controller action for the Create, update and details action.

Step 3 : SampleController File

After you click that Add button, it will add controller file to Controllers folder. Look at the below image how it looks like.

The Class contains Index method with the type of ActionResult and return View(). The controller is ready now. We have to create Model and View to make this work.

Step 4 : Create Model

Creating model is very easy as we are going to use Entity Data Model(edmx). Right click on the Model folder and select New Item. Select Data from Category then select ADO.NET Entity Data Model. A pop up will open and select Generate From Database. 

Click Next and select the server and database to create Model.You could find the Model1.edmx under Model folder.

Good.. Model is ready to consume the data from Database.

Step 5 : Add Code in Controller file

Add Model Namespace to controller file in order to get the classes from the Model.

public ActionResult Index()

{

NorthwindEntities nw = new NorthwindEntities();

var emp = nw.Employees;

return View("Index",emp);

}

Add the above code into method Index of the controller file created. The first line is creating the instance for the model which we have created from Northwind/any other DB. The Employees is a ObjectQuery which will return all the employees from the database. The var defines the Object which can be bind to the View. The last line return the View with the view name called "Index" and the datasource object.

Note: Here we are calling the view from Controller.

Step 6 : Creating View

Right click on the Above ActionResult Index and click Add View. Now you could see the below image...

The View name will come by default. Check Create a strongly-typed view and  you have to choose the Model from the Model(.edmx) class here am using Employees. In addition with select view content, We are going to display all the employees so select List. Note that the user can select the Master page for the view.

Finally click Add. 

Step 7 : Index View

If you look at the Views Folder, new folder has created with the controller name(Sample). Inside Sample folder, file named Index.aspx created with all the table fields to display the list of employees.

Its really amazing when see it first time. No need to drag and drop any controls or write any html code to build the tables. Simply all the html codes are in the view.If you look in deep you could see the binding has also been included in the html code.

Index View Code

It loop through all the items in the Model(The model selected for this view is Employees) and build the html table. The arrow indicates the loop and how the field has been binded with the table cell. Also note that the Edit/Details/Delete links are created for each row. This will help you to edit the particular row or to see the details about the row. Don worry about this at present. We have to build view to display the details/edit the row.

The Application is ready except one below configuration settings step. 

Step 8 : Configure in Global.asax

The Global.asax is located in the applications root directory and open it.

Global.asax

The Application_Start() call the RegisterRoutes method and pass the RouteTable.Routes as parameter. We are going to add the default route to the routes. The green color bordered area shows how to add MapRoute to the Routes. The "Default" is the route name, next one is format and last on is value for the format. For the above definition, the URL looks like http://localhost:1173/Home/Index. Home is a Controller and Index is a View. 

Step 8 : Run the Application

Run the application and this will display the default page (Home\Index.aspx)

If you want to access our page which we have developed, Change the URL to the below one,

http://localhost:1173/Sample/Index or http://localhost:1173/Sample is enough since Index is a default page.

Here is our First MVC output..

This is really nice to see the output without coding much...

Happy Programming...