Mvc Pattern | Web Development

Introduction to MVC Pattern

MVC stands for Model-View-Controller. It is a software architectural pattern used for developing user interfaces which divides an application into three interconnected components. This separation helps manage complexity in code, promotes reusability, and makes it easier to manage and scale applications.

Components of MVC

Model

The Model represents the data and business logic of the application. It directly manages the data, logic, and rules of the application. It is responsible for retrieving data from the database, processing it, and returning it to the controller.

View

The View is the user interface of the application. It displays the data from the Model to the user and sends user commands to the Controller. The View renders the data in a user-friendly format.

Controller

The Controller acts as an intermediary between the Model and the View. It listens to the user input from the View, processes it (by calling methods on the Model), and returns the results to the View for display.

MVC in C# - An Example

Let's create a simple MVC application in C#. We will demonstrate the MVC pattern using a basic example.

Step 1: Setting Up the Project

Open Visual Studio and create a new ASP.NET Core Web Application. Choose "Model-View-Controller" as the template.

Step 2: Creating the Model

Create a new class in the Models folder named Product.cs:

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

Step 3: Creating the Controller

Create a new controller in the Controllers folder named ProductController.cs:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

public class ProductController : Controller
{
    public IActionResult Index()
    {
        var products = new List
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99M },
            new Product { Id = 2, Name = "Smartphone", Price = 499.99M },
            new Product { Id = 3, Name = "Tablet", Price = 299.99M }
        };

        return View(products);
    }
}

Step 4: Creating the View

Create a new view in the Views/Product folder named Index.cshtml:

@model IEnumerable<Product>

<h2>Product List</h2>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var product in Model)
    {
        <tr>
            <td>@product.Id</td>
            <td>@product.Name</td>
            <td>@product.Price</td>
        </tr>
    }
    </tbody>
</table>

Step 5: Running the Application

Run the application and navigate to /Product in your browser. You should see a list of products displayed on the screen.

Conclusion

In this tutorial, we have covered the basics of the MVC pattern, its components, and how to implement a simple MVC application in C#. MVC is a powerful architectural pattern that helps in separating concerns, promoting code reusability and maintainability. With this foundational knowledge, you can start building more complex applications using the MVC pattern.

MVC Pattern Tutorial