Model View and Controller (MVC) in ASP.Net

Run the application

When we run our application, MVC will look for the default routeConfig where the controller name is Home and the action method is Index. If the match is found, it will display the content.



The ActionName “Index_Two” will be treated as the action method name of the second Index(int id) method.

And if you want to go to the another Index action method, then type the following in the URL.


Press Enter.


Models

The basic key point you must be familiar with model is that it is just a class file that can hold a simple type or complex type data.

Models can be entities or business objects.

When a user requests a URL, the controller responds to URL request, if required, then it gets data from a model and hands it over to the view. Then the view renders the data and displays the data to the front-end users in HTML format.

DEMO on how to add a Model

Step 1

Open Visual Studio -> select New Project -> expand Installed templates -> expand visual C# -> expand web -> select Visual Studio as template -> select ASP.NET MVC 4 web application as a project -> provide a meaningful name then click OK.



Step 2

Select the project template as Empty and view engine as Razor.



Click OK

Step 3

To create a controller class what we did was to go to the Solution Explorer, select the controllers folder, right-click on the controllers folder, add, controller. To add a model we need to do the same thing.

To add a model class, go to the Solution Explorer then select the models folder then right-click on the models folder then select Add -> Class.



Provide a meaningful name.

Here I will be creating a Student model.



Click Add.

Step 4

Write the following code in the student class.

Note

The code inside the Student class is nothing more than an auto-implemented property.

So, our model is created.

In real time we retrieve the data from the database using a model. But for here we hardcoded the values in our Controller class.

Step 5

The next step is to add a controller. The reason to add a controller is that without a Controller we won't be able to pass the model data to the view and to pass the data to the view we need a controller.

So, right-click on the Controllers folder then select Add -> Controllers.

Provide the name HomeController and select the scaffolding template as Empty MVC controller.

Click Add.

Step 6

In our Index action method of HomeController, we will create an instance of our student class and pass the value for the properties. But before that there is one thing you must look at carefully.

In the Student model class, you will see that our Student class is present in ModelsDemo.Models and our Controller class is present in the ModelsDemo.Controllers. So, to use the Student class in our Controller class we need to import the ModelsDemo.Models namespace.

In our Index action method, write the following code:

Views

Views are nothing more than a HTML file.

It is used to display the requested data for the users. In simple terms, whatever we see as output in a web browser is a view.

Step 7

The final step is to create a view and to create a view all we need to do is right-click on the Index action method and select Add view.

The View name should be Index matching the action name.

The View engine should be Razor (CSHTML).

Select the "Create a strongly-typed view" checkbox and select the model class which is Students.



Note

If you don't find the students model class then click the Cancel button and press Ctrl+Shift+B or F6 that will build the project and now again right-click on the Index action method and selected the model class as Students.

Click Add.



The reason for creating a strongly typed view is, we will get a compile time error and intellisense. Explains this more in the next article.

Step 8

The next step is to write some HTML code and some C# code that will be rendered and displayed to the front-end user and to do that first write the following codes to create a table.

So, we have a layout that will display the records. But from where we will get the student records?

In our controller's Index action method we have passed the employee object as a parameter in the View method and we have all created this view as a strongly-typed view and select model class as Students. So, our model for this view is student and all the records are present in this model.

Note

To switch between the HTML and C#, use the @ symbol.

So, we can say:

This will give us all the properties present in this model that is nothing but a Student class object.

Note

This model property is a get property that will only return the properties associated within our class object.



View codes

Build and run the application.



Until then keep learning.

Thank you.