Introducido por primera vez a principios de 2008, ASP.NET MVC proporcionó un enfoque alternativo para desarrollar aplicaciones web en la plataforma ASP.NET. Como su nombre lo indica, ASP.NET MVC adopta la arquitectura Modelo-Vista-Controlador (MVC), un enfoque que favorece la separación de preocupaciones entre las capas de aplicación. Sus vistas están mucho más centradas en HTML que las vistas en otros marcos como Web Forms. Razor complementa ASP.NET MVC bastante bien porque su sintaxis simplista y elegante produce una transición perfecta entre el marcado y el código, lo que permite que el marcado siga siendo el foco principal y no se desvanezca en un mar de sintaxis específica de código.
La mejor estrategia para crear un menú principal dinámico se puede seguir con estos pasos:
Paso 1: crear una tabla de base de datos
- ¿Por qué se usa PHP en lugar de Javascript para páginas dinámicas?
- ¿El ranking de Alexa es significativo para los sitios web en China?
- ¿En qué idioma está escrito el backend de Chartio?
- ¿Qué cursos debo aprender para ser desarrollador web?
- ¿Puedo poner PHP y HTML en un archivo? En caso afirmativo, ¿cuál debería ser la extensión que proporciono?
Para crear menús dinámicos en ASP.NET MVC, el primer paso es generar una tabla de base de datos que pueda contener todos los elementos del menú en una jerarquía diseñada (si existe). La tabla de la base de datos se puede crear con una consulta simple como se menciona a continuación.
Crear menús de tabla (ID int Identidad de clave principal (1,1), ParentID int Clave externa Referencias Menús (ID), Título varchar (50), Descripción varchar (250))
Esta consulta creará una tabla Menús que contendrá cuatro valores. Estos valores son:
ID: es la clave principal y se genera automáticamente
ID principal: es la clave externa
Título: nombre del campo
Descripción: es la información que desea mostrar cuando un usuario se desplaza sobre el menú.
Con esto, se creará una tabla deseada en la base de datos.
Paso 2: inserte valores en la tabla
Se puede usar una consulta de inserción simple para agregar los datos a la tabla. Ahora, hay dos posibilidades, es decir, su menú puede poseer múltiples elementos principales que además poseen elementos secundarios o puede haber solo elementos principales. Por lo tanto, debe insertar los valores según los requisitos de su aplicación.
Consulta para insertar valores en la tabla Menús.
Insertar en menús (nulo, ‘Artículo uno’, ‘Desc’) // Primer artículo principal
Insertar en menús (nulo, ‘Elemento dos,’ Desc ‘) // Segundo elemento principal
Insertar en menús (nulo, ‘Elemento tres’, ‘Desc’) // Tercer elemento principal
Insertar en los menús (1, ‘Artículo Sub One’, ‘Desc’) // Artículo del hijo del primer padre
Insertar en menús (2, ‘Artículo Sub dos’, ‘Desc’) // Artículo del padre del segundo hijo
Insertar en los menús (3 ‘Artículo Sub Tres’, ‘Desc’) // Artículo del padre del tercer hijo
Al implementar las consultas mencionadas anteriormente, su tabla de Menús contendrá tres elementos en el Menú y cada elemento tendrá además un elemento hijo.
Paso 3: obtener los datos de la tabla
Ahora, el siguiente paso es buscar los elementos del menú de los menús de la tabla que se creó en el paso 1, y devolver una lista de todos los elementos.
Para esto, se crea una función GetMenus () en la clase MyMenu. En esta función, hay un bucle que ayudará a recuperar los elementos del menú y devolverlos a través de una lista. Las líneas de código para el mismo son las siguientes.
Fragmento de código para el modelo:
clase estática pública MyMenu
{
///
/// Obtener la lista de todos los elementos del menú de la base de datos
///
/// Devuelve la lista objeto
Lista estática pública GetMenus ()
{
utilizando (contexto var = nuevas ProjectEntities ())
{
return context.Menu.ToList ();
}
}
}
Paso 4: muestra el menú creado en la pantalla
Ahora, cuando los elementos del menú se han extraído de la base de datos, es el momento de representarlo en la vista.
Fragmento de código para ver:
@ {
List myMenu = MyMenu.GetMenus ();
var plist = myMenu.Where (m => m.ParentID == null) .ToList (); // Esto enumerará los elementos del menú principal en los que aplicaremos el bucle para mostrarlos.
if (plist! = null && plist.Count> 0)
{
}
}
Aquí, las etiquetas HTML ui y li se usan en el bucle. Esto ayudará a mostrar el menú creado en la vista. Ahora, avance al siguiente paso.
Paso 5: embellece el menú para que parezca cautivador
Para garantizar un menú atractivo y fácil de leer, es esencial que parezca visualmente atractivo e intrigante. Puede usar el CSS adecuadamente para mejorar la apariencia del menú de la manera deseada. Aquí, he incorporado el siguiente fragmento de código en el archivo CSS para aumentar la facilidad de navegación y garantizar un menú atractivo.
Fragmento de código CSS:
ul, ol, li {estilo de lista: fuera de ninguno ninguno;}
.nav {flotante: izquierda; relleno: 0; color de fondo: # 5eab1f;}
.nav li {display: inline-block; position: relative; vertical-align: middle;}
.nav li: hover, .nav li.active {background-color: # 4c9312;}
.nav li a {color: #fff; flotante: izquierda; tamaño de fuente: 15px; relleno: 16px 14px; decoración de texto: ninguno;}
.nav li ul {background-color: #fff; border-radius: 0 0 5px 5px; box-shadow: 0 2px 3px # 000; display: none; min-width: 200px; padding: 20px 0; position: absolute; arriba: 48 px; índice z: 9999;}
.nav li ul: antes de {border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; content: “”; left: 28%; position: absolute; top: -8px ;}
.nav ul li {flotante: izquierda; ancho: 100%;}
.nav ul li a {color: # 333; flotante: izquierda; tamaño de fuente: 15px; relleno: 10px 5%; ancho: 90%;}
.nav li: hover, .nav li.active {background-color: # 4c9312;}
Este CSS se ha creado teniendo en cuenta algunos requisitos, puede desarrollarlo de la manera deseada para lograr cambios sustanciales en la apariencia visual. Por lo tanto, puede optimizar el CSS según sus necesidades de UX y diseño.
Terminando
Siguiendo esta guía absoluta, puede crear eficientemente menús dinámicos hermosos a través de ASP.NET MVC. Le aconsejaría que vaya de la mano con los pasos dados anteriormente y asegúrese de crear el menú principal perfecto.
