Crea tu primera aplicación MVC con .NET 6 en Visual Studio

En este artículo, aprenderás a crear la primera aplicación MVC usando .NET 6 y Visual Studio. Además, aprenderás cómo el proyecto MVC basado en .NET 6 es diferente del proyecto MVC basado en .NET Core.

Requisitos previos

• Instalar .NET Core
• Instalar el Visual Studio

Crea la aplicación MVC en .NET 6

Sigue los pasos a continuación para crear tu primera aplicación MVC en Visual Studio 2022.

1. Abre el Visual Studio 2022 y haz clic en Crear un nuevo proyecto.

2. Busca MVC y selecciona Aplicación ASP.NET Core (Modelo-Vista-Controlador) como se muestra en la siguiente imagen.

3. Asigna un nombre al proyecto y selecciona la Ubicación.

4. Selecciona Framework Core .NET 6, deja las otras selecciones como predeterminadas y haz clic en Crear.

A continuación, se muestra la estructura de directorios de la aplicación .NET 6 MVC.

Vamos analizar los fragmentos de código uno por uno.

A continuación, se muestra el fragmento de código del archivo HomeController.cs.

No hay cambios aquí si hablamos de estructura de código, constructor, métodos de acción. Se parece a la clase de controlador .NET Core 3.1.

using Microsoft.AspNetCore.Mvc;
using PrimeraAplicacionMVC.Models;
using System.Diagnostics;

namespace PrimeraAplicacionMVC.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Archivo Program.cs: este es uno de los principales cambios en .NET 6. En versiones anteriores de .NET Core, como 3.1, el archivo Program.cs contiene 2 métodos principales:

Uno es Main() y el siguiente es CreateHostBuilder()

Ahora, en .NET 6, puedes notar que el método CreateBuilder() es la primera línea en el archivo Program.cs.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Si has trabajado en versiones anteriores de ASP.NET Core, habrás notado el archivo Startup.cs, pero aquí está el giro, ya no hay más archivos startup.cs en .NET 6. Se puede considerar como un cambio importante en Framework .NET 6.

El código del archivo .NET 6 startup.cs se fusiona en el archivo Program.cs.

Agregar los controladores

Los controladores en el patrón MVC son responsables de responder a la entrada del usuario. Ellos son los encargados de construir el modelo y pasarlo a la Vista.

Haz clic con el botón derecho en la carpeta Controllers y seleccione Agregar -> Controlador.

Ingresa el nombre como HomeController y haz clic en Aceptar.

Ahora abre el HomeController.

using Microsoft.AspNetCore.Mvc;

namespace PrimeraAplicacionMVC.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

    }
}

El HomeController hereda del Controller y tiene un índice de método público. Los métodos públicos de la clase Controller se denominan métodos de acción.

Ahora, cambia el método Index para devolver la cadena como se muestra a continuación

public string Index()
        {
            return "hello from the Index method of the HomeController";
        }

Ejecuta la aplicación y deberías poder ver "hello from the Index method of the HomeController" en el navegador.

Agrega la URL con /Home o /Home/Index también devuelve el mismo resultado.

Cuando escribes /Home/Index en la ventana del navegador, el MVC busca el controlador con el nombre HomeController y luego busca el método Index. Luego invoca el método Index y devuelve el resultado al usuario.

Ahora, agrega la URL con /Home/Test. Esto resultará en un resultado 404 enviado al navegador. Esto se debe a que no hay un método de prueba en el HomeController.

La URL / o /Home también funciona porque MVC está configurado para servir desde /Home/Index cuando no se especifica nada en la URL.

El módulo ASP.NET Core MVC utiliza la tabla de enrutamiento para decidir qué método de acción del controlador invocar. Puedes obtener información sobre el enrutamiento en ASP.NET Core

Agregar una vista

La vista es una representación visual del modelo. Es responsabilidad del Controlador pasar el modelo a la Vista. Es responsabilidad de la Vista rendir el modelo que se le entrega y presentarlo al usuario.

Ahora, agreguemos la Vista a nuestro proyecto.

Actualizar el controlador para servir la vista

Primero ve a HomeController y selecciona el método Index. Cambia el método Index a lo siguiente

 public IActionResult Index()
        {
            return View();
        }

Hemos modificado el método Index para devolver IActionResult en lugar de la cadena de texto. Un ActionResult es un tipo de devolución de un método de controlador (o método de acción)

El método View() devuelve la Vista asociada con el método Index.

Agregar la vista

Ahora, haz clic derecho y haz clic en Agregar vista.

Esto abre el cuadro de diálogo Agregar vista

Mantén el nombre de la vista como Index. Plantilla vacía (sin modelo). Elimina la selección de Crear como vistas parciales y use una página de diseño como se muestra a continuación.

Haz clic en Agregar para crear la Vista.

Esto crea la vista en la carpeta Views/Home. Esta es la convención seguida por el núcleo de ASP.NET MVC.

Carpeta Views

Por convención, todas las vistas se almacenan en la carpeta Views en la raíz de la aplicación.

Cada controlador tiene una carpeta en la carpeta Views con el mismo nombre que el controlador, pero sin el sufijo del Controller. Por lo tanto, para HomeController, hay una carpeta con el nombre Home en la carpeta Views.

Cada método de acción en el controlador obtiene un archivo propio, con el mismo nombre que el método de acción. Por lo tanto, para el método Index del HomeController, hay un archivo con el nombre Index.cshtml en la carpeta Views/Home.

Ahora, abre Index.cshtml y agrega "<p>Hola desde la vista</p>" después de la etiqueta del título como se muestra a continuación

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p>Hola desde la vista</p>
</body>
</html>

Ahora, ejecute la aplicación y deberías ver lo siguiente

El método de acción del controlador MVC invoca la vista utilizando el método View(). Luego, el MVC busca la Vista en la carpeta Views/<Controller>/ y elige <ActionMethod>.cshtml como la vista.

Agregar el modelo

Finalmente, agreguemos el Modelo a la aplicación.

El modelo representa los datos que deben mostrarse al usuario y alguna lógica asociada. Es un objeto o simplemente otra clase de C# con propiedades y métodos.

Crea la carpeta Models en la raíz de la aplicación. Ahora, agrega una clase con el nombre HomeModel.cs

namespace PrimeraAplicacionMVC.Models
{
    public class HomeModel
    {
        public string Message = "Hola desde el Modelo";
    }
}

Actualiza el controlador para inyectar el modelo a la vista

Ve a HomeController y copia el siguiente código para actualizar el controlador

Estamos creando la variable del mensaje y la instancia del HomeModel.

HomeModel message = new HomeModel();

e invocando la vista con el

  return View(message);

Actualizar la vista para recibir el modelo

@model PrimeraAplicacionMVC.Models.HomeModel;
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p> @Model.Message</p>
</body>
</html>

Ahora ejecuta la aplicación y verás Hola desde el Modelo.

Resumen

En este tutorial, creamos una aplicación ASP.NET Core desde cero con Visual Studio. Aprendimos cómo agregar MVC Middleware. Luego, agregamos un controlador que devolvió un mensaje de saludo. Luego agregamos una Vista y el Modelo para completar la aplicación.