Create ASP.NET MVC Application -Adding model

In the first tutorial we showed you how to create a controller and in the second tutorial, we showed how to add a view to your project. Here is the link to those tutorials.

  1. Create ASP.NET MVC Application
  2. Create ASP.NET MVC Application -Adding View.
  3. Create ASP.NET MVC Application – Add CRUD Functionality

In this tutorial, we will show you how to add a model to the project.

Create ASP.NET MVC Application -Adding model

Create MVC Application Add model

What is a Model

Model is a class which represents the data. It is the responsibility of the model to fetch data from the data store and return it to the controller. It should contain the validation logic, business logic, which operates on the data. Model is M part of the MVC Design pattern. Read about MVC Design pattern from this link Let us add a model to represent the customer with fields CustomerName, Address and country to our project.

How to Add a Model

ASP.NET Adding Models

In MVC models are stored in the Model folder.

  1. Select the Model folder
  2. Right Click and select Add
  3. Click on Class This will open the add new item
  4. Enter the Name of Class as Customer
  5. Click on Add This Will Create a customer class in the model folder as shown in the image belowASP.NET Customer Model
  6. Add the following code in the customer class as shown In the image above.
  1. Note that the key attribute is added to the property id. This is to indicate the MVC that the id is the primary key.
  2. Import the namespace ComponentModel.DataAnnotations as shown in the diagram.

Data for the Model

ASP.NET Add Database Engine

In real life situations data for the model comes from the database. The very popular way of getting data is to use the entity model. For this tutorial we will keep it simple. We will imitate the database connection in our code. To this add the following code to the customer class.

What we have done here is created a Class OurDatabase. It has one property Customers which is a collection of our model customer. In its get method, we populate customers collection with the dummy data. In real situations, this is populated from the database.

Add a Controller

We already have HomeController in our Project. Let us create another empty controller and name it as CustomerController.  I  will leave this exercise to you.  You can refer to our first tutorial How to Create MVC Application – Part I The Index Action Method is automatically added to the Project by Visual Studio.  Rename it as List.

Add a View

We showed you how to create a view in our last tutorial.  Last time we created an empty View. This time we use our model customer to generate the view. Follow these steps

  1. Right-click anywhere in the action method List in Customer Controler
  2. Click Add View This will bring Add View dialogue box
ASP.NET MVC Add a View
  • Keep the name of the view as it is. MVC Convention requires that the Action Method Name and View name must match.
  • From the template drop down select the Template List. The List template Displays the Customer in the Grid format.
  • From the Model class drop-down shows the customer model, which we had created. Select it.
  • Uncheck all the other options as shown in the image above.
  • Click on Add to create the view

View List.cshtml is created under the folder Customer,  which is under the folder Views Open the View and you will see that the visual studio has generated the codes for us.

Look at the View

Browse to the Views->Customer->List.html  and open it.  You will see that the visual studio has generated the code for us. Lets us look at the code

The controller needs to pass the model to the view so the view can display the data from the model to the user. This is done using @model keyword.  Here @model keyword indicates that the view is expecting a Customer object.

Master layout page to be used for the View.  We are not using any layout page.

@html.ActionLink is an HTML helper method.  It renders an HTML link. It will create a link to a controller action. The above code is translated to the following HTML snippet. <a href=”/Customer/Create”> Create New </a> Clicking on Create New  will result in calling  Create Action method in the Customer Controller The next code creates a simple HTML Table to display the List of customers

The table heading uses another HTML helper method call Html.DisplayNameFor, Which Gets the display name for the model.

Model is the strongly typed object of our model Customers which is the collection of cu the tomer object. The above code loops through each customer collection

@Html.DisplayFor is another HTML helper. It generates the required HTML output based on the property’s type.

Here @html.Actionlink generates Edit, Details and Delete action link which calls the corresponding controller action. Note that it used the third parameter which is id of each customer.

Pass model to the View

Open the CustomerController . Now we have to pass our model to the View from the index Action Method.  Copy the following code to the Index Action Method.

  1. DB is now an instance of the OurDatabase which imitates the database connection.
  2. Customers is an instance of the Collection of Customers.
  3. From DB we get the list of customers.
  4. Pass the customers to the View.

Run the Project

ASP.NET MVC Customer List in Web browser

Now we are ready to test our project.  Run the Project Enter Customer in the URL and you will see the list of customers in your browser.

Conclusion

We have learned how to create a model and pass the model to the view via controller.   Models gets their data from the database. But in our tutorial we did not create any database connection for  the sake of simplicity. In the Next Tutorial we will show you how to create  Add /Edit/Delete functionality to our project. If you have any queries feel free to  use our comments section. Please don’t forget to share the page in your facebook wall.

Links to other tutorials

  1. Create ASP.NET MVC Application
  2. Create ASP.NET MVC Application -Adding View.
  3. Create ASP.NET MVC Application – Add CRUD Functionality

 Download

Source Code

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top