Cuando un gran número de páginas llaman al mismo resultado de vista, podemos encapsular el mismo contenido en un componente de vista; por supuesto, también podemos pasar parámetros al componente de vista y devolver el resultado de respuesta, escenarios: tablas de clasificación, formularios, tablas, etc.; este artículo utiliza asp.net núcleo 3.1 para explicar cómo usar el tutorial de componentes de vista de ViewComponent.
Componentes de la vista
El componente de Vista es similar a una vista local, pero más potente. El componente de vista no utiliza enlaces de modelo, sino que solo se basa en los datos proporcionados cuando se llama al modelo. Este artículo fue escrito usando controladores y vistas, pero el componente de vista también puede usarse con Razor Pages.
Ver componentes:
- Renderiza bloques en lugar de toda la respuesta.
- Incluye la misma separación de preocupaciones y beneficios de testabilidad que se encuentran entre controladores y vistas.
- Puede tener parámetros y lógica de negocio.
- Normalmente se llama desde la página de diseño.
Los componentes de vista pueden usarse en cualquier lugar donde tengas lógica de renderizado reutilizable que sea demasiado compleja para una vista local, como:
- Menú de navegación dinámica
- Nube de etiquetas (donde se consulta la base de datos)
- Panel de inicio de sesión
- Carrito de la compra
- Artículos publicados recientemente
- Contenido en la barra lateral en un blog típico
- El panel de inicio de sesión aparecerá en cada página con un enlace para cerrar sesión o iniciar sesión, dependiendo del estado del usuario
Vista parcial
En asp.net MVC 5 podemos usar una vista local con el siguiente código:
Método de llamada:
ViewComponent es una alternativa a las vistas locales.
ViewComponent para empezar
Ver clase de componentes:
- La inyección de dependencias de constructor está totalmente soportada
- No está involucrado en el ciclo de vida del controlador, lo que significa que no puedes usar filtros en los componentes de la vista
- Sin más preámbulos, vayamos directos al punto en el que queremos encapsular la funcionalidad componente de una clasificación de área urbana.
Primero, crea una nueva carpeta "ViewComponents" bajo el directorio del proyecto y crea un nuevo archivo de clase "RootClassification.cs" con el siguiente código:
En la página de visualización, creamos una nueva carpeta "Components" bajo la carpeta "/Views/Shared" del proyecto, luego creamos una nueva carpeta "RootClassification" (este es el objeto con la nueva clase component que creamos), y después creamos un nuevo archivo "Default.cshtml", cuyo código es el siguiente:
La estructura es la siguiente:
La ruta detallada es: /Views/Shared/Components/RootClassification/Default.cshtml
¿Por qué construir un camino así? Esto tiene que ver con cómo funciona el componente asp.net Core.
El entorno de ejecución busca la vista siguiendo la siguiente ruta:
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}
El nombre de vista por defecto para el componente view es Default, lo que significa que tu archivo de vista normalmente se llamará Default.cshtml. Al crear un resultado de un componente de vista o llamar a un método de Vista, puedes especificar un nombre de vista diferente.
Llamando, podemos llamar a dónde necesitamos usar el componente, el código es el siguiente:
Vuelve a ejecutar el proyecto con el siguiente renderizado:
|
Publicado el 7-2-2021 16:18:25
|
|
|
|
Publicado el 12-8-2021 a las 10:21:01
|
Propietario|
Publicado el 13-8-2023 17:55:05
|
