En este articulo comenzaremos por explicar las bases de la arquitectura MVC y crearemos un proyecto ASP.NET MVC utilizando Visual Studio Community 2019 analizando sus componentes

Para entender cómo funciona un proyecto en ASP.NET MVC se deben tener algunos conocimientos previos, tales como HTML, CSS o JavaScript, Programación Orientada a Objetos y algunos conceptos web como request (pedido) y response (respuesta)

La arquitectura MVC (Modelo Vista Controlador) permite clasificar la información, la lógica del sistema y la interfaz que se presenta al usuario. Por medio del controlador se gestiona las peticiones del usuario, consulta la información almacenada mediante el modelo y retorna el resultado hacia la vista que implementa una interfaz de usuario como respuesta gráfica

Modelo: Se encarga manipular, gestionar y actualizar los datos. Con una base de datos aquí es donde se realizan las consultas, búsquedas, filtros y actualizaciones

Vista: Se encarga de mostrarle al usuario las pantallas, ventanas, páginas y formularios; el resultado de una solicitud.

Controlador: Se encarga de gestionar las instrucciones que se reciben, atenderlas y procesarlas. Por medio de él se comunican el modelo y la vista: solicitando los datos necesarios; manipulándolos para obtener los resultados; y entregándolos a la vista para que pueda mostrarlos.

Creación del Proyecto

Paso 1 – Creamos un nuevo proyecto en Visual Studio Community 2019. En la ventana inicial seleccionamos “Crear Proyecto”

Paso 2 – En la ventana de creación del proyecto, buscamos el tipo de proyecto con la palabra mvc, luego seleccionamos la opción “Aplicación web ASP.NET (.Net Framework)”

Paso 3 – En la ventana de Configuración del proyecto ingresamos en el campo “Nombre del proyecto” e ingresamos en el campo “Ubicación” o bien se podría dejar la ubicación por defecto

Paso 4 – En la ventana de creación de una aplicación web, seleccionamos la opción “MVC” y apretamos en el botón “Crear”

Estructura de Proyecto ASP.NET MVC

En la estructura del proyecto nos encontramos con diversas carpetas y archivos, donde mencionaré los más importantes

Carpeta App_Start – Posee 3 archivos:

  1. BundleConfig.cs: Administra de manera programable los archivos css y javascript
  2. FilterConfig.cs: Administra los filtros a utilizar en la aplicación web. Un filtro es un atributo que se puede agregar a un controlador para extender la lógica agregando funcionalidad pre-ejecución y post-ejecución a cada acción
  3. RouteConfig.cs: Administra las rutas de acceso, pudiendo modificar una URL se dirija a una determinada acción

Carpeta Content – Es donde se ubican los archivos de estilos CSS

Capeta Controllers – Es donde se ubican los controladores, cada controlador es una clase y su nombre debe terminar con la palabra Controller, como por ejemplo HomeController.cs

Caperta Models – Es donde ubicaremos las clases modelo. Estas clases son la definición de los campos que mayormente provienen de la base de datos

Carpeta Scripts – Es donde ubicaremos los archivos javascript

Carpeta Views – En esta carpeta encontraremos las archivos de vista de cada acción, los archivos tienen extensión CSHTML.

Una acción es una función en el controlador que devuelve un ActionResult, cada acción debe tener asociado su archivo de vista con el mismo nombre de la acción, por ejemplo en Controller/HomeController.css tenemos tres acciones:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult About()
    {
        ViewBag.Message = "Your application description page.";

        return View();
    }

    public ActionResult Contact()
    {
        ViewBag.Message = "Your contact page.";

        return View();
    }
}

En la carpeta Views tenemos la carpeta del controlador Home, con cada archivo de vista

La carpeta Views/Shared posee archivos de vista que no pertenecen a ningún controlador y se pueden usar en cualquier momento.

Al ejecutar se puede ver el proyecto con páginas predefinidas:

Daremos por iniciado el proyecto, pueden seguir en el siguiente articulo cómo hacer un ABM simple utilizando ASP.NET MVC y Entity Framework