Tutorial: Working with Models and Views in ASP.NET MVC

1. Introduction

In this tutorial, we will delve into the world of ASP.NET MVC, focusing primarily on the roles of Models and Views. We will learn how to create and manipulate Models, how to use Views to display data, and how to update data using forms.

By the end of this tutorial, you will be able to:
- Understand the roles of Models and Views in ASP.NET MVC
- Create and manipulate Models
- Use Views to display data
- Update data using forms

Prerequisites:
- Basic knowledge of C# programming
- Familiarity with ASP.NET MVC architecture

2. Step-by-Step Guide

Models

Models in ASP.NET MVC are responsible for handling the logic for data access and storage. A model is basically a C# class with properties that represent a data table in the database.

Creating a Model

Let's create a simple model for a Student.

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Each property of the Student model class represents a column of the Student table in the database.

Views

Views in an ASP.NET MVC application are responsible for rendering the user interface (UI). They generate HTML to be sent to the client's browser.

Creating a View

Assume we have a view that will display the details of a Student.

@model Student

<div>
    <h2>@Model.Name</h2>
    <p>Age: @Model.Age</p>
</div>

In this view, @model Student tells the view which model it should be using. @Model.Name and @Model.Age are accessing the properties of the Student model.

Updating Data Using Forms

In ASP.NET MVC, we can use forms to collect and update data.

Here is a simple form that can be used to update the details of a Student.

@model Student

<form method="post" action="UpdateStudent">
    <input type="hidden" name="Id" value="@Model.Id" />
    <input type="text" name="Name" value="@Model.Name" />
    <input type="number" name="Age" value="@Model.Age" />
    <input type="submit" value="Update" />
</form>

This form uses a POST method to send the updated student data to the UpdateStudent action.

3. Code Examples

Let's go through a practical example.

Creating a Model

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

• This code snippet creates a Product model with properties Id, Name, and Price.

Creating a View

@model Product

<div>
    <h2>@Model.Name</h2>
    <p>Price: @Model.Price</p>
</div>

• This view displays the Name and Price of a Product.

Updating Data Using Forms

@model Product

<form method="post" action="UpdateProduct">
    <input type="hidden" name="Id" value="@Model.Id" />
    <input type="text" name="Name" value="@Model.Name" />
    <input type="number" name="Price" value="@Model.Price" />
    <input type="submit" value="Update" />
</form>

• This form collects the updated Product details and sends them to the UpdateProduct action.

4. Summary

In this tutorial, we've learned about the roles of Models and Views in ASP.NET MVC, created and manipulated Models, used Views to display data, and updated data using forms.

Next, you should learn about Controllers in ASP.NET MVC, as they act as an interface between Models and Views.

Additional resources:

• ASP.NET MVC documentation
• A Beginner's Guide for Understanding and Implementing ASP.NET MVC in .NET

5. Practice Exercises

1. Create a Model for an Employee with properties Id, Name, Position, and Salary.
2. Create a View to display the Employee details.
3. Create a form to update the Employee details.

Solutions:

1. Employee Model:

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Position { get; set; }
    public decimal Salary { get; set; }
}

1. Employee View:

@model Employee

<div>
    <h2>@Model.Name</h2>
    <p>Position: @Model.Position</p>
    <p>Salary: @Model.Salary</p>
</div>

1. Update Employee Form:

@model Employee

<form method="post" action="UpdateEmployee">
    <input type="hidden" name="Id" value="@Model.Id" />
    <input type="text" name="Name" value="@Model.Name" />
    <input type="text" name="Position" value="@Model.Position" />
    <input type="number" name="Salary" value="@Model.Salary" />
    <input type="submit" value="Update" />
</form>