MVC3 (model view controller)- a new mvc framework with razor engine by microsoft


This article will describe about the MVC with Razor Engine (MVC 3). It also describes about how to create the Controller classes, Model classes and generate the Views automatically through the Razor Engine. The article explain each and every steps which need to be done while creation of MVC3 architecture in ASP.Net. This article will be useful for those who want to learn the MVC3 in ASP.Net.

MVC3 (MODEL VIEW CONTROLLER)- A NEW MVC FRAMEWORK WITH RAZOR ENGINE BY MICROSOFT



MVC (Model View Controller)


MVC (Model View Controller) is the architecture of triad where each components- Model, View and Controller are independent to each other so that each of these components are loosely coupled which makes the MVC architecture more expandable and scalable. So this architecture is basically used when the project needs scalable in the future.

MVC3 application : The article is explaining about the creation of a sample application.

1.

New Project ? ASP.Net MVC3 Web Application



1

2. Provide the name "MVC3RazorDemo" and click OK. A structure will be created for the MVC3 as shown below:

2

This structure contains the folders-
Content- It contains the style for the pages. We can add our own styles and formatting.
Controllers- To create the actions and events related to the View (UI) .
Models- It's the mediator which is used to carry the data from Model to View.
View- For the UI (User Interface). By default it creates few views which are used for layout purpose, for showing the error and the start page.
Also we can observe here the different symbol and files in view with the extension cshtml(C# Html) . So these are used for the View in MVC3 Razor application.

3. Now the first thing is that we need to create the Controller and Model classes.

4. To create the Controller Class. Right click on Controllers folder ? Add Controller

3

5. Add Controller window will be displayed.

4

Now provide the name of the Controller "MyController" and click Add.
Here we can see that Template field dropdown contains 3 different values-

5

The Empty Controller will add the default Index method while other option "Controller with read/write actions and Views, using Entity Framework" will create the Controller methods which will support the Entity Framework mapping.
The Controller with empty read/write actions will write the default method for read and Write actions.
For Now, we will choose the Default one- Empty Controller.

6. Now, to display the data, we need the Model class which will be used to hold the data. So create a Model class.

7 Go to the Models folder. Right click ?Add New ? Class

6

8. Provide the name "CustomerModel" and click OK.

9.Here in this class, we will define some public properties which will hold the data during the execution.

7

10. Also I need a class which will have the list of customers to display. So I will create a new class called "Customers" inside this Model class which will use the public properties and get the customers data. I am not using here the Database connection but you can write the database connection, command etc in place of list to get the required customers data.

11. Create a new class "Customers" inside the Model class and initialize the list of data inside the constructor of the class.

8

12. Till here, we have done so for is to write the Customers class in the Model which is having the list of customers.

13. Now to display this list of customer, we need to call this method in the controller class by creating the object as:
For this, first we need to provide the Model class references as:

using MVC3RazorDemo.Models;

If you are not able to get this reference, then build the project and then try to add it. It will be added.

14. Now create the object of the Model class "Customers" and get the customers lists in Controller class:

9

15. Now our Controller and Model is done. We need to create the View to display this data. To create the View, go to the Index method of the Controller class and right click ? Add View

10

16. Here we can see that we can add the View for the Controller class method. Also there are various other options like if the View is already exists, then we can go to the View etc.

17. By clicking the add View, a new window opens to choose the properties:

11

View name: Name of the view
View Engine: It contains 2 types- Razor (CSHTML) and ASPX
Create a strongly-typed view- This is the checkbox which is used to create the strongly types view. It means that the view will be binded with the data source directly.
Model Class: This dropdown list will show the classes exist to select for the View.
Scaffold Template: Lit of template for the view.

18.When clicking the Add button, it will generate the code automatically for the view. In the above example, I have selected the List so the list of employees will be displayed n the View.

19. The generated code will look like below:

12

20. So this is the way to create the views for the application.
Like this we can create the MVC architecture with Razor engine (MVC 3) . Basically the work of Razor Engine is to create the Views automatically without writing any code.

Processing of MVC 3 Applications :



1. The processing of MVC application starts from the Controller class. The controller class takes care of handling each actions and events which are raised from the View or front-end.

2. Client or the end user requests for the particular page by doing some action to the application. The request starts with the controller class. The controller class contains the events and action methods which get triggered and then the processing starts.

3. For example, the end user want to open the Customer Details page(CustomerDetail.aspx) and the URL for the page is :

http://www.MyWeb.Com/Customer/GetCustomerDetails/101


4. This URL shows the below actions-
WebSite Name:- http://www.MyWeb.Com/
Controller Name:- CustomerController
Method name:- GetCustomerDetails
Parameter:- 101
It means there must be a controller class with the name CustomerController.cs which will have a method called GetCustomerDetails and this method will use the parameter as 101.

5. So this whole URL will be parsed and will get the required information related to controller class, its method and the parameter (if any).

6. After parsing this URL, the runtime engine searches for these components and does the processing accordingly.

7. In the GetCustomerDetails method, there will be the call for the Model class to process the request and get the response back to the controller and then open the View with the returned data.


Comments

Guest Author: smiley31 Aug 2013

Nice explanation .
Can you explain how to do validations in mvc?

Author: Pawan Awasthi14 Oct 2013 Member Level: Gold   Points : 8

Hai Smily,
In MVC, we do validations at Model level. We use the concept called Data Annotation. This is the new concept which introduces with MVC and now you will see in the latest version of Visual Studio(2013 version) for all the the languages, we will do the same. They have full support for ASP.Net also in the new and latest version of .Net framework(4.5).
In the Data Annotation, we generally use the properties and put the validation on the properties so that throughout the application, wherever that property is used, it will be automatically validated and we don't need to validate it again and again as we were doing in older versions of visual studio.
Lets say we have EmpId which is mandatory field. So in the older versions of Visual Studio, we validate it by using the required filed validator or by any JavaScript code. Also we need to use the required field validator or the JavaScript code as many places as we use this field to be validated.
Now as per the latest concept of Data Annotation, we will validate at the model level. In model we define the properties with its validation attribute which will be decorated on the property(Decorator Design Pattern) So the property will be defines as below:


[Required]
public string EmpId{ get; set; }

Now it will validate the Empid wherever we will use this model.
Lets suppose we want that the EmployeeName should have maximum 20 characters and minimum 5 characters, we can validate it in the model class :

[MaxLength(20), MinLength(5)]
public string EmployeeName{ get; set; }

So by this way, we can validate all our field as well as the custom validator also possible. We can use RegEx here to be validated using the Regular expression etc.
Hope it will be helpful to you.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: