Introducción a C# Web MVC con ASP.NET

El patrón arquitectónico Model-View-Controller (MVC) es un enfoque ampliamente utilizado para desarrollar aplicaciones web, especialmente con frameworks como ASP.NET Core MVC en C#. Ayuda a separar las preocupaciones de una aplicación, haciéndola más organizada, mantenible y testeable

1. ¿Qué es MVC?

MVC divide una aplicación en tres componentes interconectados:

1. Modelo (Model): Gestiona los datos y la lógica de negocio.
2. Vista (View): Muestra la interfaz de usuario.
3. Controlador (Controller): Maneja la entrada del usuario, interactúa con el Modelo y selecciona la Vista apropiada.

🏗️ Estructura básica de un proyecto MVC

Un proyecto típico de ASP.NET MVC tiene esta estructura de carpetas:

- Controllers/
    - HomeController.cs
- Models/
    - Usuario.cs
- Views/
    - Home/
        - Index.cshtml
- wwwroot/
    - css/
    - js/
- Startup.cs / Program.cs

Flujo del MVC

1. El usuario accede a una URL (ej. /Home/Index).
2. El Controlador interpreta la solicitud.
3. Si necesita datos, llama al Modelo.
4. El Modelo obtiene y devuelve los datos al Controlador.
5. El Controlador pasa los datos a la Vista.
6. La Vista genera HTML y se lo muestra al usuario.

2. Modelo (Model)

El Modelo es el núcleo de los datos y la lógica de negocio de su aplicación. Representa el “qué” de su aplicación.

Responsabilidad:

Datos: Contiene los datos con los que trabaja la aplicación (por ejemplo, un objeto Product, una lista de Users). Estos datos pueden provenir de una base de datos, una API o cualquier otra fuente.

Características:

Independiente de la Vista y el Controlador. No sabe cómo se muestran sus datos o cómo se recibe la entrada del usuario.

Puede notificar a sus observadores (Vistas o Controladores) cuando su estado cambia.

Ejemplo (C# Conceptual):

// Models/Product.cs
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public int Stock { get; set; }

    // La lógica de negocio puede estar aquí, 
    // por ejemplo, para aplicar un descuento
    public decimal GetDiscountedPrice(decimal discountPercentage)
    {
        if (discountPercentage < 0 || discountPercentage > 100)
        {
            throw new ArgumentOutOfRangeException(nameof(discountPercentage), 
            "El porcentaje de descuento debe estar entre 0 y 100.");
        }
        return Price * (1 - (discountPercentage / 100));
    }
}

3. Vista (View)

La Vista es responsable de presentar los datos al usuario. Es el “cómo” de la visualización de su aplicación.

• Responsabilidad:
  • Visualización: Renderiza la interfaz de usuario basándose en los datos proporcionados por el Controlador.
  • Lógica de Presentación: Contiene lógica principalmente para formatear y mostrar datos (por ejemplo, recorrer una lista para mostrar elementos, renderizado condicional).
• Características:
  • Pasiva: No contiene lógica de negocio ni interactúa directamente con el Modelo. Simplemente muestra lo que se le da.
  • Puede ser una página web (HTML, CSS, JavaScript), una ventana de escritorio o cualquier otro elemento de la interfaz de usuario. En ASP.NET Core MVC, las Vistas son típicamente archivos Razor (.cshtml).

@model YourApp.Models.Product

<h1>Detalles del Producto</h1>

<div>
    <p><strong>Nombre:</strong> @Model.Name</p>
    <p><strong>Precio:</strong> $@Model.Price</p>
    <p><strong>Stock:</strong> @Model.Stock</p>
    <p><strong>Precio con Descuento (10%):</strong> 
$@Model.GetDiscountedPrice(10)</p>
</div>

<a href="/Product/Index">Volver a la Lista</a>

4. Controlador (Controller)

El Controlador actúa como intermediario entre el Modelo y la Vista. Es el “quién” o “qué” maneja las acciones del usuario.

• Responsabilidad:
  • Manejo de Entrada: Recibe las solicitudes del usuario (por ejemplo, una solicitud de URL, un clic de botón).
  • Interacción con el Modelo: Llama a métodos en el Modelo para recuperar o actualizar datos basándose en la solicitud del usuario.
  • Selección de Vista: Decide qué Vista renderizar y pasa los datos necesarios (del Modelo) a esa Vista.
  • Control de Flujo: Gestiona el flujo de la aplicación.
• Características:
  • Orquesta la interacción entre el Modelo y la Vista.
  • No contiene lógica de negocio en sí mismo (delega al Modelo).
  • No contiene lógica de presentación (delega a la Vista).

using Microsoft.AspNetCore.Mvc;
// Suponiendo que el modelo Product está en este espacio de nombres
using YourApp.Models; 
using System.Collections.Generic;
using System.Linq;

public class ProductController : Controller
{
    // En una aplicación real, 
    // esto provendría de una base de datos o un servicio
    private static List<Product> _products = new List<Product>
    {
        new Product { Id = 1, Name = "Laptop", Price = 1200.00m, Stock = 50 },
        new Product { Id = 2, Name = "Ratón", Price = 25.00m, Stock = 200 },
        new Product { Id = 3, Name = "Teclado", Price = 75.00m, Stock = 100 }
    };

    // Maneja las solicitudes GET a /Product/Index
    public IActionResult Index()
    {
        // El Controlador obtiene datos del "Modelo" (aquí, una lista estática)
        // En una aplicación real, se llamaría a un servicio o repositorio
        return View(_products); // Pasa la lista de productos a la Vista
    }

    // Maneja las solicitudes GET a /Product/Details/{id}
    public IActionResult Details(int id)
    {
        // El Controlador pide al Modelo datos específicos
        var product = _products.FirstOrDefault(p => p.Id == id);

        if (product == null)
        {
            return NotFound(); 
        // Devuelve un 404 si el producto no se encuentra
        }

        return View(product); // Pasa un solo producto a la Vista
    }

    // Maneja las solicitudes POST a /Product/Create 
    // (por ejemplo, después de un envío de formulario)
    [HttpPost]
    public IActionResult Create(Product newProduct)
    {
        if (ModelState.IsValid) // Comprueba si los datos enviados son válidos
        {
            // Asigna un nuevo ID (en una aplicación real, 
            // esto sería manejado por la DB)
            newProduct.Id = _products.Any() ? _products.Max(p => p.Id) + 1 : 1;
            _products.Add(newProduct);
            return RedirectToAction("Index"); 
            // Redirige a la lista de productos después de la creación
        }
        return View(newProduct); 
        // Si es inválido, vuelve al formulario con errores
    }
}

5. Cómo Interactúan

1. Interacción del Usuario: Un usuario interactúa con la Vista (por ejemplo, hace clic en un enlace, envía un formulario).
2. Solicitud al Controlador: El navegador envía una solicitud al servidor, que se enruta a la acción del Controlador apropiada.
3. El Controlador Procesa: El Controlador recibe la solicitud.
   • Podría recuperar datos del Modelo (por ejemplo, productService.GetProduct(id)).
   • Podría actualizar datos en el Modelo (por ejemplo, productService.SaveProduct(newProduct)).
4. El Controlador Selecciona la Vista: Basándose en el resultado, el Controlador decide qué Vista mostrar.
5. La Vista Renderiza: El Controlador pasa los datos necesarios (a menudo un objeto Modelo o una colección de objetos Modelo) a la Vista. La Vista luego usa estos datos para renderizar la interfaz de usuario.
6. Respuesta al Usuario: La Vista renderizada (HTML, CSS, JS) se envía de vuelta al navegador del usuario.

6. Ventajas de MVC

• Separación de Preocupaciones: Separa claramente los datos, la lógica y la presentación, lo que hace que el código sea más fácil de entender, gestionar y escalar.
• Modularidad: Los componentes pueden desarrollarse y probarse de forma independiente.
• Testeabilidad: Debido a que los componentes están separados, es más fácil escribir pruebas unitarias para la lógica del Modelo y del Controlador sin necesidad de interactuar con la interfaz de usuario.
• Mantenibilidad: Los cambios en un componente (por ejemplo, actualizar la interfaz de usuario) son menos propensos a afectar a otros.
• Reutilización: Los Modelos y Controladores a menudo pueden reutilizarse en diferentes vistas o incluso en diferentes aplicaciones.
• Desarrollo Paralelo: Diferentes equipos o desarrolladores pueden trabajar en Modelos, Vistas y Controladores simultáneamente