MVC Framework - Guía rápida

los Model-View-Controller (MVC) es un patrón arquitectónico que separa una aplicación en tres componentes lógicos principales: el model, la vista y el controlador. Cada uno de estos componentes está diseñado para manejar aspectos de desarrollo específicos de una aplicación. MVC es uno de los marcos de desarrollo web estándar de la industria más utilizados para crear proyectos escalables y extensibles.

Componentes MVC

Los siguientes son los componentes de MVC:

Modelo

El componente Modelo corresponde a toda la lógica relacionada con los datos con la que trabaja el usuario. Esto puede representar los datos que se transfieren entre los componentes View y Controller o cualquier otro dato relacionado con la lógica empresarial. Por ejemplo, un objeto Cliente recuperará la información del cliente de la base de datos, la manipulará y actualizará sus datos a la base de datos o la usará para representar datos.

Ver

El componente Ver se utiliza para toda la lógica de la interfaz de usuario de la aplicación. Por ejemplo, la vista Cliente incluirá todos los componentes de la interfaz de usuario, como cuadros de texto, menús desplegables, etc., con los que interactúa el usuario final.

Controlador

Los controladores actúan como una interfaz entre los componentes Modelo y Vista para procesar toda la lógica empresarial y las solicitudes entrantes, manipular los datos utilizando el componente Modelo e interactuar con las Vistas para representar el resultado final. Por ejemplo, el controlador del cliente manejará todas las interacciones y entradas de la vista del cliente y actualizará la base de datos utilizando el modelo del cliente. Se utilizará el mismo controlador para ver los datos del Cliente.

ASP.NET MVC

ASP.NET admite tres modelos de desarrollo principales: páginas web, formularios web y MVC (Model View Controller). El marco ASP.NET MVC es un marco de presentación liviano y altamente comprobable que se integra con las características existentes de ASP.NET, como páginas maestras, autenticación, etc. Dentro de .NET, este marco se define en el ensamblado System.Web.Mvc. La última versión de MVC Framework es 5.0. Usamos Visual Studio para crear aplicaciones ASP.NET MVC que se pueden agregar como plantilla en Visual Studio.

Características de ASP.NET MVC

ASP.NET MVC proporciona las siguientes características:

Ideal para desarrollar aplicaciones complejas pero ligeras.
Proporciona un marco extensible y conectable, que se puede reemplazar y personalizar fácilmente. Por ejemplo, si no desea utilizar el motor de visualización de Razor o ASPX integrado, puede utilizar cualquier otro motor de visualización de terceros o incluso personalizar los existentes.
Utiliza el diseño basado en componentes de la aplicación dividiéndola lógicamente en componentes Modelo, Vista y Controlador. Esto permite a los desarrolladores gestionar la complejidad de proyectos a gran escala y trabajar en componentes individuales.
La estructura MVC mejora el desarrollo basado en pruebas y la capacidad de prueba de la aplicación, ya que todos los componentes pueden diseñarse en base a interfaces y probarse utilizando objetos simulados. Por lo tanto, ASP.NET MVC Framework es ideal para proyectos con un gran equipo de desarrolladores web.
Admite todas las amplias funcionalidades existentes de ASP.NET, como autorización y autenticación, páginas maestras, enlace de datos, controles de usuario, membresías, enrutamiento ASP.NET, etc.
No utiliza el concepto de estado de vista (que está presente en ASP.NET). Esto ayuda a crear aplicaciones, que son livianas y brindan un control total a los desarrolladores.

Por lo tanto, puede considerar MVC Framework como un marco principal construido sobre ASP.NET que proporciona un gran conjunto de funciones adicionales que se centran en el desarrollo y las pruebas basados en componentes.

En el último capítulo, estudiamos el flujo de arquitectura de alto nivel de MVC Framework. Ahora echemos un vistazo a cómo se lleva a cabo la ejecución de una aplicación MVC cuando hay una determinada solicitud del cliente. El siguiente diagrama ilustra el flujo.

Diagrama de flujo MVC

Pasos de flujo

Step 1 - El navegador del cliente envía una solicitud a la aplicación MVC.

Step 2 - Global.ascx recibe esta solicitud y realiza el enrutamiento basado en la URL de la solicitud entrante usando los objetos RouteTable, RouteData, UrlRoutingModule y MvcRouteHandler.

Step 3 - Esta operación de enrutamiento llama al controlador apropiado y lo ejecuta usando el objeto IControllerFactory y el método Execute del objeto MvcHandler.

Step 4 - El controlador procesa los datos usando Model e invoca el método apropiado usando el objeto ControllerActionInvoker

Step 5 - El modelo procesado se pasa luego a la vista, que a su vez genera la salida final.

MVC y ASP.NET Web Forms son modelos de desarrollo interrelacionados pero diferentes, según los requisitos de la aplicación y otros factores. En un nivel alto, puede considerar que MVC es un marco de aplicación web avanzado y sofisticado diseñado teniendo en cuenta la separación de preocupaciones y la capacidad de prueba. Ambos marcos tienen sus ventajas y desventajas según los requisitos específicos. Este concepto se puede visualizar utilizando el siguiente diagrama:

Diagrama MVC y ASP.NET

Tabla de comparación

Saltemos y creemos nuestra primera aplicación MVC usando Vistas y Controladores. Una vez que tengamos una pequeña experiencia práctica sobre cómo funciona una aplicación MVC básica, aprenderemos todos los componentes y conceptos individuales en los próximos capítulos.

Crear la primera aplicación MVC

Step 1- Inicie su Visual Studio y seleccione Archivo → Nuevo → Proyecto. Seleccione Web → Aplicación web ASP.NET MVC y nombre este proyecto comoFirstMVCApplicatio. Seleccione la ubicación comoC:\MVC. Haga clic en Aceptar.

Step 2- Esto abrirá la opción Plantilla de proyecto. Seleccione Plantilla vacía y Ver motor como Razor. Haga clic en Aceptar.

Ahora, Visual Studio creará nuestro primer proyecto MVC como se muestra en la siguiente captura de pantalla.

Step 3- Ahora crearemos el primer controlador en nuestra aplicación. Los controladores son simples clases de C #, que contienen múltiples métodos públicos, conocidos como métodos de acción. Para agregar un nuevo controlador, haga clic con el botón derecho en la carpeta Controladores en nuestro proyecto y seleccione Agregar → Controlador. Nombra el controlador como HomeController y haz clic en Agregar.

Esto creará un archivo de clase HomeController.cs en la carpeta Controladores con el siguiente código predeterminado.

using System; 
using System.Web.Mvc;  

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

El código anterior básicamente define un índice de método público dentro de nuestro HomeController y devuelve un objeto ViewResult. En los siguientes pasos, aprenderemos cómo devolver una vista usando el objeto ViewResult.

Step 4- Ahora agregaremos una nueva vista a nuestro controlador de inicio. Para agregar una nueva vista, haga clic con el botón derecho en la carpeta de vista y haga clic en Agregar → Ver.

Step 5- Nombra la nueva vista como índice y el motor de vista como Razor (SCHTML). Haga clic en Agregar.

Esto agregará un nuevo cshtml archivo dentro de Vistas / carpeta de inicio con el siguiente código:

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 - Modifique el contenido del cuerpo de la vista anterior con el siguiente código -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7- Ahora ejecuta la aplicación. Esto le dará la siguiente salida en el navegador. Esta salida se procesa en función del contenido de nuestro archivo Ver. La aplicación primero llama al controlador, que a su vez llama a esta vista y produce la salida.

En el paso 7, la salida que recibimos se basó en el contenido de nuestro archivo de vista y no tuvo interacción con el controlador. Dando un paso adelante, ahora crearemos un pequeño ejemplo para mostrar un mensaje de bienvenida con la hora actual usando una interacción de Vista y Controlador.

Step 8- MVC usa el objeto ViewBag para pasar datos entre Controller y View. Abra HomeController.cs y edite la función de índice con el siguiente código.

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

En el código anterior, establecemos el valor del atributo Saludo del objeto ViewBag. El código verifica la hora actual y devuelve el mensaje de Buenos días / Tardes en consecuencia utilizando la instrucción return View (). Tenga en cuenta que aquí Greeting es solo un atributo de ejemplo que hemos usado con el objeto ViewBag. Puede utilizar cualquier otro nombre de atributo en lugar de Saludo.

Step 9 - Abra Index.cshtml y copie el siguiente código en la sección del cuerpo.

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

En el código anterior, estamos accediendo al valor del atributo de saludo del objeto ViewBag usando @ (que se establecería desde el controlador).

Step 10- Ahora ejecute la aplicación nuevamente. Esta vez, nuestro código ejecutará el controlador primero, configurará ViewBag y luego lo renderizará usando el código de vista. Lo siguiente será la salida.

Ahora que ya hemos creado una aplicación MVC de muestra, comprendamos la estructura de carpetas de un proyecto MVC. Crearemos un nuevo proyecto MVC para aprender esto.

En su Visual Studio, abra Archivo → Nuevo → Proyecto y seleccione Aplicación ASP.NET MVC. Nómbrelo comoMVCFolderDemo.

Haga clic en Aceptar. En la siguiente ventana, seleccione Aplicación de Internet como Plantilla de proyecto y haga clic en Aceptar.

Esto creará una aplicación MVC de muestra como se muestra en la siguiente captura de pantalla.

Note- Los archivos presentes en este proyecto provienen de la plantilla predeterminada que hemos seleccionado. Estos pueden cambiar ligeramente según las diferentes versiones.

Carpeta de controladores

Esta carpeta contendrá todas las clases de controlador. MVC requiere que el nombre de todos los archivos del controlador terminen con Controller.

En nuestro ejemplo, la carpeta Controllers contiene dos archivos de clase: AccountController y HomeController.

Carpeta de modelos

Esta carpeta contendrá todas las clases de modelo, que se utilizan para trabajar con datos de la aplicación.

En nuestro ejemplo, la carpeta Modelos contiene AccountModels. Puede abrir y mirar el código en este archivo para ver cómo se crea el modelo de datos para administrar cuentas en nuestro ejemplo.

Carpeta Vistas

Esta carpeta almacena los archivos HTML relacionados con la visualización de la aplicación y la interfaz de usuario. Contiene una carpeta para cada controlador.

En nuestro ejemplo, verá tres subcarpetas en Vistas, a saber, Cuenta, Inicio y Compartido, que contiene archivos html específicos para esa área de visualización.

Carpeta App_Start

Esta carpeta contiene todos los archivos necesarios durante la carga de la aplicación.

Por ejemplo, el archivo RouteConfig se utiliza para enrutar la URL entrante al controlador y la acción correctos.

Carpeta de contenido

Esta carpeta contiene todos los archivos estáticos, como css, imágenes, iconos, etc.

El archivo Site.css dentro de esta carpeta es el estilo predeterminado que aplica la aplicación.

Carpeta de scripts

Esta carpeta almacena todos los archivos JS del proyecto. De forma predeterminada, Visual Studio agrega MVC, jQuery y otras bibliotecas JS estándar.

El componente 'Modelo' es responsable de administrar los datos de la aplicación. Responde a la solicitud de la vista y también responde a las instrucciones del controlador para actualizarse.

Las clases de modelo pueden crearse manualmente o generarse a partir de entidades de base de datos. Veremos muchos ejemplos para crear modelos manualmente en los próximos capítulos. Por lo tanto, en este capítulo, probaremos la otra opción, es decir, generar desde la base de datos para que tenga experiencia práctica en ambos métodos.

Crear entidades de base de datos

Conéctese a SQL Server y cree una nueva base de datos.

Ahora ejecute las siguientes consultas para crear nuevas tablas.

CREATE TABLE [dbo].[Student]( 
   [StudentID]      INT           IDENTITY (1,1) NOT NULL, 
   [LastName]       NVARCHAR (50) NULL, 
   [FirstName]      NVARCHAR (50) NULL, 
   [EnrollmentDate] DATETIME      NULL, 
   PRIMARY KEY CLUSTERED ([StudentID] ASC) 
)  

CREATE TABLE [dbo].[Course]( 
   [CourseID] INT           IDENTITY (1,1) NOT NULL, 
   [Title]    NVARCHAR (50) NULL, 
   [Credits]  INT           NULL, 
   PRIMARY KEY CLUSTERED ([CourseID] ASC) 
)  

CREATE TABLE [dbo].[Enrollment]( 
   [EnrollmentID] INT IDENTITY (1,1) NOT NULL, 
   [Grade]        DECIMAL(3,2) NULL, 
   [CourseID]     INT NOT NULL, 
   [StudentID]    INT NOT NULL, 
   PRIMARY KEY CLUSTERED ([EnrollmentID] ASC), 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Course_CourseID] FOREIGN KEY ([CourseID]) 
   REFERENCES [dbo].[Course]([CourseID]) ON DELETE CASCADE, 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Student_StudentID] FOREIGN KEY ([StudentID]) 
   REFERENCES [dbo].[Student]([StudentID]) ON DELETE CASCADE 
)

Generar modelos usando entidades de base de datos

Después de crear la base de datos y configurar las tablas, puede continuar y crear una nueva aplicación vacía MVC. Haga clic con el botón derecho en la carpeta Modelos en su proyecto y seleccione Agregar → Nuevo elemento. Luego, seleccione Modelo de datos de entidad ADO.NET.

En el siguiente asistente, elija Generar desde base de datos y haga clic en Siguiente. Configure la conexión a su base de datos SQL.

Seleccione su base de datos y haga clic en Probar conexión. A continuación, aparecerá una pantalla similar a la siguiente. Haga clic en Siguiente.

Seleccione Tablas, Vistas y Procedimientos y funciones almacenados. Haga clic en Finalizar. Verá la Vista del modelo creada como se muestra en la siguiente captura de pantalla.

Las operaciones anteriores crearían automáticamente un archivo de modelo para todas las entidades de la base de datos. Por ejemplo, la tabla Student que creamos dará como resultado un archivo modelo Student.cs con el siguiente código:

namespace MvcModelExample.Models { 
   using System; 
   using System.Collections.Generic; 
     
   public partial class Student { 
      
      public Student() { 
         this.Enrollments = new HashSet(); 
      } 
     
      public int StudentID { get; set; } 
      public string LastName { get; set; } 
      public string FirstName { get; set; } 
      public Nullable EnrollmentDate { get; set; } 
      public virtual ICollection Enrollments { get; set; } 
   } 
}

Los controladores Asp.net MVC son responsables de controlar el flujo de ejecución de la aplicación. Cuando realiza una solicitud (significa solicitar una página) a la aplicación MVC, un controlador es responsable de devolver la respuesta a esa solicitud. El controlador puede realizar una o más acciones. La acción del controlador puede devolver diferentes tipos de resultados de acción a una solicitud en particular.

El controlador es responsable de controlar la lógica de la aplicación y actúa como coordinador entre la vista y el modelo. El controlador recibe una entrada de los usuarios a través de la vista, luego procesa los datos del usuario con la ayuda del modelo y devuelve los resultados a la vista.

Crear un controlador

Para crear un controlador:

Step 1 - Cree una aplicación vacía MVC y luego haga clic con el botón derecho en la carpeta del controlador en su aplicación MVC.

Step 2- Seleccione la opción de menú Agregar → Controlador. Después de la selección, se muestra el cuadro de diálogo Agregar controlador. Nombra al controlador comoDemoController.

Se creará un archivo de clase de controlador como se muestra en la siguiente captura de pantalla.

Crea un controlador con IController

En MVC Framework, las clases de controlador deben implementar la interfaz IController desde el espacio de nombres System.Web.Mvc.

public interface IController {
   void Execute(RequestContext requestContext);
}

Esta es una interfaz muy simple. El único método, Execute, se invoca cuando una solicitud está dirigida a la clase de controlador. MVC Framework sabe qué clase de controlador ha sido el objetivo en una solicitud leyendo el valor de la propiedad del controlador generada por los datos de enrutamiento.

Step 1- Agregue un nuevo archivo de clase y asígnele el nombre DemoCustomController. Ahora modifique esta clase para heredar la interfaz IController.

Step 2 - Copie el siguiente código dentro de esta clase.

public class DemoCustomController:IController { 
   
   public void Execute(System.Web.Routing.RequestContext requestContext) { 
      var controller = (string)requestContext.RouteData.Values["controller"]; 
      var action = (string)requestContext.RouteData.Values["action"]; 
      requestContext.HttpContext.Response.Write( 
      string.Format("Controller: {0}, Action: {1}", controller, action)); 
   } 
}

Step 3 - Ejecute la aplicación y recibirá el siguiente resultado.

Como se vio en los capítulos introductorios iniciales, View es el componente involucrado con la interfaz de usuario de la aplicación. Estas vistas generalmente se vinculan a partir de los datos del modelo y tienen extensiones como html, aspx, cshtml, vbhtml, etc. En nuestra primera aplicación MVC, usamos Vistas con controlador para mostrar datos al usuario final. Para representar este contenido estático y dinámico en el navegador, MVC Framework utiliza View Engines. Los motores de visualización son básicamente una implementación de sintaxis de marcado, que son responsables de representar el HTML final en el navegador.

MVC Framework viene con dos motores de vista integrados:

Razor Engine- Razor es una sintaxis de marcado que habilita el código C # o VB del lado del servidor en páginas web. Este código del lado del servidor se puede utilizar para crear contenido dinámico cuando se carga la página web. Razor es un motor avanzado en comparación con el motor ASPX y se lanzó en las versiones posteriores de MVC.

ASPX Engine- ASPX o el motor de formularios Web Forms es el motor de visualización predeterminado que se incluye en MVC Framework desde el principio. Escribir un código con este motor es similar a escribir un código en ASP.NET Web Forms.

A continuación, se muestran pequeños fragmentos de código que comparan tanto el motor Razor como el motor ASPX.

Maquinilla de afeitar

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

De estos dos, Razor es un motor de visualización avanzado, ya que viene con una sintaxis compacta, enfoques de desarrollo basados en pruebas y mejores características de seguridad. Usaremos el motor Razor en todos nuestros ejemplos, ya que es el motor de visualización más utilizado.

Estos motores de visualización se pueden codificar e implementar en los siguientes dos tipos:

Fuertemente tipado
Tipo dinámico

Estos enfoques son similares a la vinculación temprana y la vinculación tardía, respectivamente, en los que los modelos se vincularán a la Vista de forma fuerte o dinámica.

Vistas fuertemente tipadas

Para comprender este concepto, creemos una aplicación MVC de muestra (siga los pasos de los capítulos anteriores) y agreguemos un archivo de clase de controlador llamado ViewDemoController.

Ahora, copie el siguiente código en el archivo del controlador:

using System.Collections.Generic; 
using System.Web.Mvc;  

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

En el código anterior, tenemos dos métodos de acción definidos: StronglyTypedIndex y IndexNotStonglyTyped. Ahora agregaremos Vistas para estos métodos de acción.

Haga clic con el botón derecho en el método de acción StonglyTypedIndex y haga clic en Agregar vista. En la siguiente ventana, marque la casilla de verificación 'Crear una vista fuertemente tipada'. Esto también habilitará las opciones de plantilla de clase de modelo y andamio. Seleccione la opción Lista de plantilla de andamio. Haga clic en Agregar.

Se creará un archivo de vista similar a la siguiente captura de pantalla. Como puede observar, ha incluido la clase de modelo Blog de ViewDemoController en la parte superior. También podrá utilizar IntelliSense en su código con este enfoque.

Vistas dinámicas con tipo

Para crear vistas dinámicas con tipo, haga clic con el botón derecho en la acción IndexNotStonglyTyped y haga clic en Agregar vista.

Esta vez, no seleccione la casilla de verificación "Crear una vista fuertemente tipada".

La vista resultante tendrá el siguiente código:

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

Como puede ver en el código anterior, esta vez no agregó el modelo Blog a la Vista como en el caso anterior. Además, esta vez no podrá usar IntelliSense porque esta vez el enlace se realizará en tiempo de ejecución.

Las vistas fuertemente tipadas se consideran un mejor enfoque, ya que ya sabemos qué datos se pasan como modelo, a diferencia de las vistas dinámicas tipadas en las que los datos se vinculan en tiempo de ejecución y pueden provocar errores en tiempo de ejecución, si algo cambia en el modelo vinculado.

Los diseños se utilizan en MVC para proporcionar una apariencia coherente en todas las páginas de nuestra aplicación. Es lo mismo que definir las páginas maestras, pero MVC proporciona algunas funcionalidades más.

Crear diseños MVC

Step 1 - Cree una aplicación MVC de muestra con la aplicación de Internet como plantilla y cree una carpeta de contenido en el directorio raíz de la aplicación web.

Step 2- Cree un archivo de hoja de estilo llamado MyStyleSheet.css en la carpeta CONTENT. Este archivo CSS contendrá todas las clases CSS necesarias para un diseño de página de aplicación web coherente.

Step 3 - Cree una carpeta compartida en la carpeta Ver.

Step 4- Cree un archivo MasterLayout.cshtml en la carpeta compartida. El archivo MasterLayout.cshtml representa el diseño de cada página de la aplicación. Haga clic con el botón derecho en la carpeta compartida en el Explorador de soluciones, luego vaya a Agregar elemento y haga clic en Ver. Copie el siguiente código de diseño.

Código de diseño

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

En este diseño, estamos utilizando un método de ayuda HTML y algunos otros métodos definidos por el sistema, por lo tanto, veamos estos métodos uno por uno.

Url.Content()- Este método especifica la ruta de cualquier archivo que estemos usando en nuestro código de Vista. Toma la ruta virtual como entrada y devuelve la ruta absoluta.
Html.ActionLink()- Este método genera enlaces HTML que enlazan con la acción de algún controlador. El primer parámetro especifica el nombre para mostrar, el segundo parámetro especifica el nombre de la acción y el tercer parámetro especifica el nombre del controlador.
RenderSection() - Especifica el nombre de la sección que queremos mostrar en esa ubicación en la plantilla.
RenderBody() - Representa el cuerpo real de la vista asociada.

Step 5 - Finalmente, abra el archivo _ViewStart.cshtml dentro de la carpeta Vistas y agregue el siguiente código -

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

Si el archivo no está presente, puede crear el archivo con este nombre.

Step 6 - Ejecute la aplicación ahora para ver la página de inicio modificada.

El enrutamiento ASP.NET MVC permite el uso de URL que describen las acciones del usuario y los usuarios las entienden más fácilmente. Al mismo tiempo, el enrutamiento se puede utilizar para ocultar datos que no están destinados a mostrarse al usuario final.

Por ejemplo, en una aplicación que no utiliza enrutamiento, al usuario se le mostrará la URL como http: //myapplication/Users.aspx? Id = 1 que correspondería al archivo Users.aspx dentro de mi ruta de aplicación y el ID de envío como 1 Generalmente, no nos gustaría mostrar dichos nombres de archivos a nuestro usuario final.

Para manejar las URL de MVC, la plataforma ASP.NET utiliza el sistema de enrutamiento, que le permite crear cualquier patrón de URL que desee y expresarlas de manera clara y concisa. Cada ruta en MVC contiene un patrón de URL específico. Este patrón de URL se compara con la URL de solicitud entrante y, si la URL coincide con este patrón, el motor de enrutamiento lo utiliza para seguir procesando la solicitud.

Formato de URL de enrutamiento MVC

Para comprender el enrutamiento MVC, considere la siguiente URL:

http://servername/Products/Phones

En la URL anterior, Productos es el primer segmento y Teléfono es el segundo segmento que se puede expresar en el siguiente formato:

{controller}/{action}

El marco MVC considera automáticamente el primer segmento como el nombre del controlador y el segundo segmento como una de las acciones dentro de ese controlador.

Note- Si el nombre de su controlador es ProductsController, solo mencionaría Productos en la URL de enrutamiento. El marco MVC comprende automáticamente el sufijo del controlador.

Crea una ruta simple

Las rutas se definen en el archivo RouteConfig.cs que está presente en la carpeta del proyecto App_Start.

Verá el siguiente código dentro de este archivo:

public class RouteConfig { 
   
   public static void RegisterRoutes(RouteCollection routes) { 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
      
      routes.MapRoute( 
         name: "Default", 
         url: "{controller}/{action}/{id}", 
         defaults: new { controller = "Home", action = "Index", 
            id = UrlParameter.Optional } 
      ); 
   } 
}

Este método RegisterRoutes lo llama Global.ascx cuando se inicia la aplicación. El método Application_Start en Global.ascx llama a esta función MapRoute que establece el controlador predeterminado y su acción (método dentro de la clase Controller).

Para modificar la asignación predeterminada anterior según nuestro ejemplo, cambie la siguiente línea de código:

defaults: new { controller = "Products", action = "Phones", id = UrlParameter.Optional }

Esta configuración seleccionará el ProductsController y llamará al método Phone dentro de él. Del mismo modo, si tiene otro método como Electronics dentro de ProductsController, la URL sería:

http://servername/Products/Electronics

En ASP.NET MVC, los controladores definen métodos de acción y estos métodos de acción generalmente tienen una relación de uno a uno con los controles de la interfaz de usuario, como hacer clic en un botón o un enlace, etc. Por ejemplo, en uno de nuestros ejemplos anteriores, el UserController la clase contenía métodos UserAdd, UserDelete, etc.

Sin embargo, muchas veces nos gustaría realizar alguna acción antes o después de una operación en particular. Para lograr esta funcionalidad, ASP.NET MVC proporciona una función para agregar comportamientos previos y posteriores a la acción en los métodos de acción del controlador.

Tipos de filtros

El marco ASP.NET MVC admite los siguientes filtros de acción:

Action Filters- Los filtros de acción se utilizan para implementar la lógica que se ejecuta antes y después de que se ejecute una acción del controlador. Veremos los filtros de acción en detalle en este capítulo.
Authorization Filters - Los filtros de autorización se utilizan para implementar la autenticación y autorización para las acciones del controlador.
Result Filters- Los filtros de resultados contienen lógica que se ejecuta antes y después de ejecutar un resultado de vista. Por ejemplo, es posible que desee modificar el resultado de una vista justo antes de que la vista se represente en el navegador.
Exception Filters- Los filtros de excepción son el último tipo de filtro que se ejecuta. Puede usar un filtro de excepción para manejar los errores generados por las acciones de su controlador o los resultados de las acciones del controlador. También puede utilizar filtros de excepción para registrar errores.

Los filtros de acción son uno de los filtros más utilizados para realizar un procesamiento de datos adicional, o manipular los valores de retorno o cancelar la ejecución de una acción o modificar la estructura de la vista en tiempo de ejecución.

Filtros de acción

Los filtros de acción son atributos adicionales que se pueden aplicar a una sección del controlador o al controlador completo para modificar la forma en que se ejecuta una acción. Estos atributos son clases especiales de .NET derivadas de System.Attribute que se pueden adjuntar a clases, métodos, propiedades y campos.

ASP.NET MVC proporciona los siguientes filtros de acción:

Output Cache - Este filtro de acción almacena en caché la salida de una acción del controlador durante un período de tiempo específico.
Handle Error - Este filtro de acción maneja los errores que surgen cuando se ejecuta una acción del controlador.
Authorize - Este filtro de acción le permite restringir el acceso a un usuario o rol en particular.

Ahora, veremos el ejemplo de código para aplicar estos filtros en un controlador de ejemplo ActionFilterDemoController. (ActionFilterDemoController solo se usa como ejemplo. Puede usar estos filtros en cualquiera de sus controladores).

Caché de salida

Example - Especifica el valor de retorno que se almacenará en caché durante 10 segundos.

public class ActionFilterDemoController : Controller { 
   [HttpGet] 
   OutputCache(Duration = 10)] 
   
   public string Index() { 
      return DateTime.Now.ToString("T");  
   } 
}

Error de manejo

Example - Redirige la aplicación a una página de error personalizada cuando el controlador activa un error.

[HandleError] 
public class ActionFilterDemoController : Controller { 
   
   public ActionResult Index() { 
      throw new NullReferenceException(); 
   }  
   
   public ActionResult About() { 
      return View(); 
   } 
}

Con el código anterior, si ocurre algún error durante la ejecución de la acción, encontrará una vista llamada Error en la carpeta Vistas y mostrará esa página al usuario.

Autorizar

Example - Permitir que solo los usuarios autorizados inicien sesión en la aplicación.

public class ActionFilterDemoController: Controller { 
   [Authorize] 
   
   public ActionResult Index() { 
      ViewBag.Message = "This can be viewed only by authenticated users only"; 
      return View(); 
   }  
   
   [Authorize(Roles="admin")] 
   public ActionResult AdminIndex() { 
      ViewBag.Message = "This can be viewed only by users in Admin role only"; 
      return View(); 
   } 
}

Con el código anterior, si intenta acceder a la aplicación sin iniciar sesión, arrojará un error similar al que se muestra en la siguiente captura de pantalla.

En el primer capítulo, aprendimos cómo interactúan los controladores y las vistas en MVC. En este tutorial, daremos un paso adelante y aprenderemos a usar Modelos y a crear una aplicación avanzada para crear, editar y eliminar. y ver la lista de usuarios en nuestra aplicación.

Crear una aplicación MVC avanzada

Step 1- Seleccione Archivo → Nuevo → Proyecto → Aplicación web ASP.NET MVC. Nómbrelo como AdvancedMVCApplication. Haga clic en Aceptar. En la siguiente ventana, seleccione Plantilla como aplicación de Internet y Ver motor como Razor. Observe que estamos usando una plantilla esta vez en lugar de una aplicación vacía.

Esto creará un nuevo proyecto de solución como se muestra en la siguiente captura de pantalla. Dado que estamos usando el tema ASP.NET predeterminado, viene con vistas de muestra, controladores, modelos y otros archivos.

Step 2 - Cree la solución y ejecute la aplicación para ver su salida predeterminada como se muestra en la siguiente captura de pantalla.

Step 3- Agregar un nuevo modelo que definirá la estructura de los datos de los usuarios. Haga clic con el botón derecho en la carpeta Modelos y haga clic en Agregar → Clase. Nómbrelo como UserModel y haga clic en Agregar.

Step 4 - Copie el siguiente código en el UserModel.cs recién creado.

using System; 
using System.ComponentModel; 
using System.ComponentModel.DataAnnotations; 
using System.Web.Mvc.Html;  

namespace AdvancedMVCApplication.Models { 
   public class UserModels { 
   
      [Required] 
      public int Id { get; set; } 
      [DisplayName("First Name")] 
      [Required(ErrorMessage = "First name is required")] 
      public string FirstName { get; set; }  
      [Required] 
      public string LastName { get; set; } 
         
      public string Address { get; set; } 
         
      [Required] 
      [StringLength(50)] 
      public string Email { get; set; } 
         
      [DataType(DataType.Date)] 
      public DateTime DOB { get; set; } 
          
      [Range(100,1000000)] 
      public decimal Salary { get; set; } 
   } 
}

En el código anterior, hemos especificado todos los parámetros que tiene el modelo de Usuario, sus tipos de datos y validaciones como los campos obligatorios y la longitud.

Ahora que tenemos nuestro modelo de usuario listo para almacenar los datos, crearemos un archivo de clase Users.cs, que contendrá métodos para ver usuarios, agregar, editar y eliminar usuarios.

Step 5- Haga clic con el botón derecho en Modelos y haga clic en Agregar → Clase. Nómbrelo como Usuarios. Esto creará la clase users.cs dentro de Modelos. Copie el siguiente código en la clase users.cs.

using System; 
using System.Collections.Generic; 
using System.EnterpriseServices;  

namespace AdvancedMVCApplication.Models { 
   
   public class Users { 
      public List UserList = new List();  
      
      //action to get user details 
      public UserModels GetUser(int id) { 
         UserModels usrMdl = null;  
         
         foreach (UserModels um in UserList) 
            
            if (um.Id == id) 
               usrMdl = um; 
               return usrMdl; 
      }  
      
      //action to create new user 
      public void CreateUser(UserModels userModel) { 
         UserList.Add(userModel); 
      }  
      
      //action to udpate existing user 
      public void UpdateUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               usrlst.Address = userModel.Address; 
               usrlst.DOB = userModel.DOB; 
               usrlst.Email = userModel.Email; 
               usrlst.FirstName = userModel.FirstName; 
               usrlst.LastName = userModel.LastName; 
               usrlst.Salary = userModel.Salary; 
               break; 
            } 
         } 
      }  
      
      //action to delete exising user 
      public void DeleteUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               UserList.Remove(usrlst); 
               break; 
            } 
         } 
      } 
   } 
}

Una vez que tengamos nuestro UserModel.cs y Users.cs, agregaremos Vistas a nuestro modelo para ver usuarios, agregar, editar y eliminar usuarios. Primero, creemos una Vista para crear un usuario.

Step 6 - Haga clic con el botón derecho en la carpeta Vistas y haga clic en Agregar → Ver.

Step 7 - En la siguiente ventana, seleccione Ver nombre como UserAdd, Ver motor como Razor y seleccione la casilla de verificación Crear una vista fuertemente tipada.

Step 8- Haga clic en Agregar. Esto creará el siguiente código CSHML de forma predeterminada, como se muestra a continuación:

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "UserAdd"; 
}

<h2>UserAdd</h2>  

@using (Html.BeginForm()) { 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Create" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   
   @Scripts.Render("~/bundles/jqueryval") 
}

Como puede ver, esta vista contiene detalles de vista de todos los atributos de los campos, incluidos sus mensajes de validación, etiquetas, etc. Esta vista se verá como la siguiente en nuestra aplicación final.

Similar a UserAdd, ahora agregaremos cuatro vistas más que se dan a continuación con el código dado:

Index.cshtml

Esta vista mostrará todos los usuarios presentes en nuestro sistema en la página de índice.

@model IEnumerable<AdvancedMVCApplication.Models.UserModels>  

@{ 
   ViewBag.Title = "Index"; 
}  

<h2>Index</h2>  

<p> 
   @Html.ActionLink("Create New", "UserAdd") 
</p>  

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Address) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Email) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.DOB) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Salary) 
      </th> 
   
      <th></th>  
   </tr>  
   
   @foreach (var item in Model) { 
      <tr> 
         <td>
            @Html.DisplayFor(modelItem => item.FirstName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.LastName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Address) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Email) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.DOB) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Salary) 
         </td> 
    
         <td> 
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
            @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
         </td> 
      </tr> 
   } 
</table>

Esta vista se verá como la siguiente en nuestra aplicación final.

Details.cshtml

Esta Vista mostrará los detalles de un usuario específico cuando hagamos clic en el registro de usuario.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Details"; 
}  

<h2>Details</h2>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName)
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
    
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
  
</fieldset>  
<p>
   @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | 
   @Html.ActionLink("Back to List", "Index") 
</p>

Esta vista se verá como la siguiente en nuestra aplicación final.

Edit.cshtml

Esta vista mostrará el formulario de edición para editar los detalles de un usuario existente.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Edit"; 
}  

<h2>Edit</h2>  
@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      @Html.HiddenFor(model => model.Id)  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Save" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   @Scripts.Render("~/bundles/jqueryval") 
}

Esta vista se verá como la siguiente en nuestra aplicación.

Delete.cshtml

Esta vista mostrará el formulario para eliminar el usuario existente.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Delete"; 
} 

<h2>Delete</h2>  
<h3>Are you sure you want to delete this?</h3>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary)
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
</fieldset>  

@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   
   <p> 
      <input type = "submit" value = "Delete" /> | 
      @Html.ActionLink("Back to List", "Index") 
   </p> 
}

Esta vista se verá como la siguiente en nuestra aplicación final.

Step 9- Ya hemos agregado los Modelos y Vistas en nuestra aplicación. Ahora finalmente agregaremos un controlador para nuestra vista. Haga clic con el botón derecho en la carpeta Controladores y haga clic en Agregar → Controlador. Nómbrelo como UserController.

De forma predeterminada, su clase de controlador se creará con el siguiente código:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using AdvancedMVCApplication.Models;  

namespace AdvancedMVCApplication.Controllers {  
   
   public class UserController : Controller { 
      private static Users _users = new Users(); 
      
      public ActionResult Index() { 
         return View(_users.UserList); 
      } 
   } 
}

En el código anterior, se utilizará el método de índice al representar la lista de usuarios en la página de índice.

Step 10 - Haga clic con el botón derecho en el método de índice y seleccione Crear vista para crear una vista para nuestra página de índice (que enumerará todos los usuarios y proporcionará opciones para crear nuevos usuarios).

Step 11- Ahora agregue el siguiente código en UserController.cs. En este código, estamos creando métodos de acción para diferentes acciones de usuario y devolviendo las vistas correspondientes que creamos anteriormente.

Agregaremos dos métodos para cada operación: GET y POST. HttpGet se utilizará al recuperar los datos y representarlos. HttpPost se utilizará para crear / actualizar datos. Por ejemplo, cuando agregamos un nuevo usuario, necesitaremos un formulario para agregar un usuario, que es una operación GET. Una vez que completemos el formulario y enviemos esos valores, necesitaremos el método POST.

//Action for Index View  
public ActionResult Index() { 
   return View(_users.UserList); 
}  

//Action for UserAdd View 
[HttpGet] 
public ActionResult UserAdd() { 
   return View(); 
}  

[HttpPost] 
public ActionResult UserAdd(UserModels userModel) { 
   _users.CreateUser(userModel); 
   return View("Index", _users.UserList); 
}  

//Action for Details View 
[HttpGet] 
public ActionResult Details(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Details() { 
   return View("Index", _users.UserList); 
}  

//Action for Edit View 
[HttpGet] 
public ActionResult Edit(int id) { 
   return View(_users.UserList.FirstOrDefault(x=>x.Id==id)); 
} 

[HttpPost] 
public ActionResult Edit(UserModels userModel) { 
   _users.UpdateUser(userModel); 
   return View("Index", _users.UserList); 
} 
        
//Action for Delete View 
[HttpGet] 
public ActionResult Delete(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Delete(UserModels userModel) { 
   _users.DeleteUser(userModel); 
   return View("Index", _users.UserList); 
} sers.UserList);

Step 12 - Lo último que debe hacer es ir al archivo RouteConfig.cs en la carpeta App_Start y cambiar el controlador predeterminado a Usuario.

defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }

Eso es todo lo que necesitamos para poner en funcionamiento nuestra aplicación avanzada.

Step 13- Ahora ejecuta la aplicación. Podrá ver una aplicación como se muestra en la siguiente captura de pantalla. Puede realizar todas las funcionalidades de agregar, ver, editar y eliminar usuarios como vimos en las capturas de pantalla anteriores.

Como ya sabrá, Ajax es una abreviatura de JavaScript asincrónico y XML. MVC Framework contiene soporte integrado para Ajax discreto. Puede utilizar los métodos auxiliares para definir sus características de Ajax sin agregar un código en todas las vistas. Esta función en MVC se basa en las funciones de jQuery.

Para habilitar el soporte discreto de AJAX en la aplicación MVC, abra el archivo Web.Config y configure la propiedad UnobtrusiveJavaScriptEnabled dentro de la sección appSettings usando el siguiente código. Si la clave ya está presente en su aplicación, puede ignorar este paso.

<add key = "UnobtrusiveJavaScriptEnabled" value = "true" />

Después de esto, abra el archivo de diseño común _Layout.cshtmlarchivo ubicado en Vistas / Carpeta compartida. Agregaremos referencias a las bibliotecas jQuery aquí usando el siguiente código:

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script> 

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

Cree una aplicación Ajax discreta

En el ejemplo que sigue, crearemos un formulario que mostrará la lista de usuarios en el sistema. Colocaremos un menú desplegable con tres opciones: Administrador, Normal e Invitado. Cuando seleccione uno de estos valores, mostrará la lista de usuarios que pertenecen a esta categoría usando una configuración AJAX discreta.

Step 1 - Cree un archivo Model.cs y copie el siguiente código.

using System;  

namespace MVCAjaxSupportExample.Models { 
   
   public class User { 
      public int UserId { get; set; } 
      public string FirstName { get; set; } 
      public string LastName { get; set; } 
      public DateTime BirthDate { get; set; } 
      public Role Role { get; set; } 
   }  
   
   public enum Role { 
      Admin, 
      Normal, 
      Guest 
   } 
}

Step 2 - Cree un archivo de controlador llamado UserController.cs y cree dos métodos de acción dentro de él usando el siguiente código.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web.Mvc; 
using MVCAjaxSupportExample.Models;  

namespace MVCAjaxSupportExample.Controllers {
   
   public class UserController : Controller { 
      
      private readonly User[] userData = 
      { 
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, 
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, 
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, 
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, 
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} 
      }; 
      
      public ActionResult Index() { 
         return View(userData); 
      } 
      
      public PartialViewResult GetUserData(string selectedRole = "All") { 
         IEnumerable data = userData; 
         
         if (selectedRole != "All") { 
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole); 
            data = userData.Where(p => p.Role == selected); 
         } 
         
         return PartialView(data); 
      }  
      
      public ActionResult GetUser(string selectedRole = "All") { 
         return View((object) selectedRole); 
      } 
   } 
}

Step 3- Ahora cree una Vista parcial llamada GetUserData con el siguiente código. Esta vista se utilizará para representar la lista de usuarios según el rol seleccionado en el menú desplegable.

@model IEnumerable<MVCAjaxSupportExample.Models.User> 

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.BirthDate) 
      </th> 
      <th></th> 
   </tr>  

   @foreach (var item in Model) { 
   <tr> 
      <td> 
         @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.BirthDate) 
      </td> 
      
      <td> 
         
      </td> 
   </tr> 
}  
</table>

Step 4- Ahora cree un View GetUser con el siguiente código. Esta vista obtendrá de forma asincrónica los datos de la acción GetUserData del controlador creada anteriormente.

@using MVCAjaxSupportExample.Models 
@model string 

@{ 
ViewBag.Title = "GetUser"; 

AjaxOptions ajaxOpts = new AjaxOptions { 
UpdateTargetId = "tableBody" 
}; 
} 

<h2>Get User</h2> 
<table> 
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead> 
   
   <tbody id="tableBody"> 
      @Html.Action("GetUserData", new {selectedRole = Model }) 
   </tbody> 
</table>  

@using (Ajax.BeginForm("GetUser", ajaxOpts)) { 
   <div> 
      @Html.DropDownList("selectedRole", new SelectList( 
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) 
      <button type="submit">Submit</button> 
   </div> 
}

Step 5 - Finalmente, cambie las entradas de Route.config para iniciar el controlador de usuario.

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

Step 6 - Ejecute la aplicación que se verá como la siguiente captura de pantalla.

Si selecciona Administrador en el menú desplegable, buscará todos los usuarios con el tipo de Administrador. Esto está sucediendo a través de AJAX y no recarga toda la página.

Bundling y Minificationson dos técnicas de mejora del rendimiento que mejoran el tiempo de carga de solicitudes de la aplicación. La mayoría de los principales navegadores actuales limitan el número de conexiones simultáneas por nombre de host a seis. Significa que a la vez, el navegador pondrá en cola todas las solicitudes adicionales.

Habilitar agrupación y minificación

Para habilitar la agrupación y la minificación en su aplicación MVC, abra el archivo Web.config dentro de su solución. En este archivo, busque la configuración de compilación en system.web -

<system.web>
   <compilation debug = "true" />
</system.web>

De forma predeterminada, verá el parámetro de depuración establecido en verdadero, lo que significa que la agrupación y la minificación están deshabilitadas. Establezca este parámetro en falso.

Agrupación

Para mejorar el rendimiento de la aplicación, ASP.NET MVC proporciona una función incorporada para agrupar varios archivos en un solo archivo, lo que a su vez mejora el rendimiento de carga de la página debido a menos solicitudes HTTP.

La agrupación es un grupo lógico simple de archivos al que se puede hacer referencia por un nombre único y cargar con una sola solicitud HTTP.

De forma predeterminada, el BundleConfig de la aplicación MVC (ubicado dentro de la carpeta App_Start) viene con el siguiente código:

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

El código anterior básicamente agrupa todos los archivos CSS presentes en la carpeta Contenido / temas / base en un solo archivo.

Minificación

La minificación es otra técnica de mejora del rendimiento en la que optimiza el código javascript, CSS acortando los nombres de las variables, eliminando espacios en blanco innecesarios, saltos de línea, comentarios, etc. Esto a su vez reduce el tamaño del archivo y ayuda a que la aplicación se cargue más rápido.

Minificación con Visual Studio y Web Essentials Extension

Para usar esta opción, primero deberá instalar la Extensión Web Essentials en su Visual Studio. Después de eso, cuando haga clic con el botón derecho en cualquier archivo css o javascript, le mostrará la opción de crear una versión reducida de ese archivo.

Por lo tanto, si tiene un archivo css llamado Site.css, creará su versión reducida como Site.min.css.

Ahora, cuando la próxima vez que su aplicación se ejecute en el navegador, agrupará y minimizará todos los archivos css y js, mejorando así el rendimiento de la aplicación.

En ASP.NET, el manejo de errores se realiza usando el enfoque estándar try catch o usando eventos de aplicación. ASP.NET MVC viene con soporte integrado para el manejo de excepciones mediante una función conocida como filtros de excepción. Vamos a aprender dos enfoques aquí: uno para anular el método onException y otro para definir los filtros HandleError.

Anular el método OnException

Este enfoque se usa cuando queremos manejar todas las excepciones a través de los métodos de acción en el nivel del controlador.

Para comprender este enfoque, cree una aplicación MVC (siga los pasos cubiertos en los capítulos anteriores). Ahora agregue una nueva clase de controlador y agregue el siguiente código que anula el método onException y arroja explícitamente un error en nuestro método de acción:

Ahora creemos una vista común llamada Errorque se mostrará al usuario cuando ocurra alguna excepción en la aplicación. Dentro de la carpeta Vistas, cree una nueva carpeta llamada Compartida y agregue una nueva Vista llamada Error.

Copie el siguiente código dentro del Error.cshtml recién creado:

Si intenta ejecutar la aplicación ahora, dará el siguiente resultado. El código anterior muestra la Vista de error cuando ocurre alguna excepción en cualquiera de los métodos de acción dentro de este controlador.

La ventaja de este enfoque es que múltiples acciones dentro del mismo controlador pueden compartir esta lógica de manejo de errores. Sin embargo, la desventaja es que no podemos usar la misma lógica de manejo de errores en varios controladores.

Atributo HandleError

El atributo HandleError es uno de los filtros de acción que estudiamos en el capítulo Filtros y filtros de acción. HandleErrorAttribute es la implementación predeterminada de IExceptionFilter. Este filtro maneja todas las excepciones generadas por las acciones, filtros y vistas del controlador.

Para utilizar esta función, primero active la sección customErrors en web.config. Abra web.config y coloque el siguiente código dentro de system.web y establezca su valor como Activado.

<customErrors mode = "On"/>

Ya tenemos la Vista de error creada dentro de la carpeta Compartida en Vistas. Esta vez, cambie el código de este archivo de vista al siguiente, para escribirlo firmemente con el modelo HandleErrorInfo (que está presente en System.Web.MVC).

@model System.Web.Mvc.HandleErrorInfo 

@{ 
Layout = null; 
} 
  
<!DOCTYPE html> 
<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Error</title> 
   </head> 
   
   <body> 
      <h2> 
         Sorry, an error occurred while processing your request.  
      </h2> 
      <h2>Exception details</h2> 
      
      <p> 
         Controller: @Model.ControllerName <br> 
         Action: @Model.ActionName 
         Exception: @Model.Exception 
      </p> 
   
   </body> 
</html>

Ahora coloque el siguiente código en su archivo de controlador que especifica el atributo [HandleError] en el archivo de controlador.

using System; 
using System.Data.Common; 
using System.Web.Mvc;  

namespace ExceptionHandlingMVC.Controllers { 
   [HandleError] 
   public class ExceptionHandlingController : Controller { 
      
      public ActionResult TestMethod() { 
         throw new Exception("Test Exception"); 
         return View(); 
      } 
   } 
}

Si intenta ejecutar la aplicación ahora, obtendrá un error similar al que se muestra en la siguiente captura de pantalla.

Como puede ver, esta vez el error contiene más información sobre el controlador y los detalles relacionados con la acción. De esta manera, HandleError se puede utilizar en cualquier nivel y en todos los controladores para manejar dichos errores.

↰ Previous page