Creando Menús Dinámicos con ASP .NET 2.

Iván Mostacero Plasencia

MCP, MCAD, MCSD .NET
Early Archiver .NET Techologies
Asegurador de Calidad Cofide

Para desarrollar una aplicación Web, no solo es necesario cumplir con la lógica de negocios que
el sistema debe implementar, mucho más si esta aplicación va a estar colgada sobre Internet y
en donde nuestros socios de negocios van a poder observar la calidad y vistosidad de la misma.
También es necesario darle un valor agregado en cuanto a la amigabilidad frente a nuestros
usuarios finales, a la facilidad de uso y navegabilidad de sus contenidos.

Una de las partes mas importantes de nuestra aplicación Web es sin duda alguna el Menú ya
que será la parte con la que mas interactuaran nuestros usuarios, dada la importancia que
acabamos de definir para esta parte de una aplicacion, los desarrolladores generalmente
recurrimos a Controles de externos y muchas veces controles por los que se debe pagar cierta
cantidad de dinero.

Ahora con la liberación de Visual Studio 2005 y el Framework 2.0 versión beta, trae consigo un
control denominado Menu que es el que usaremos ahora para desarrollar un ejemplo de como
poder cargar dinámicamente desde la base de datos, toda una estructura de menús de acuerdo
a lo que se requiera publicar en la Web.

Base de Datos

Para iniciar este ejemplo primero debemos crear una tabla en la base de datos de SQL Server
que pueda contener a todas las opciones que va a presentar nuestro menu, ahora como vamos a
tener varios ítems del menú, además un ítem del menú a la vez puede contener varios SubItems
y asi sucesivamente, esto nos hace pensar en una tabla estructurada de tal forma que se pueda
generar una estructura jerarquica a partir de los datos que contenga y de las relaciones entre
estos datos, lo que conlleva a generar una tabla que se relaciona a si misma, en donde además
de generar un código para cada elemento se debe definir además un código del padre a quien
pertenece ese elemento.

La estructura de la tabla quedaría de la siguiente manera:

MenuId. Es el código que va a tener cada Ítem de Menú.
Descripción. Descripción que aparecerá en el Menú.
PadreId. Es el código del Ítem de Menú de quien es hijo cada registro, en el caso de uno de los
elementos de nivel superior (root), este código seria el mismo que MenuId.
Posición. Es la posición que va a tener en el árbol que se genere para cada ítem, por ejemplo si
es el primer hijo tendrá posición 1, si es el segundo posición 2 y así sucesivamente. Icono.
Imagen que estará a la izquierda de la descripción del Ítem.
Habilitado. Indica si un determinado Ítem esta habilitado para mostrarse.
Url. La url a la que se redireccionará nuestra Web en caso de dar click en el ítem.
FechaCreacion. Fecha en que se ha creado este Ítem ( para auditoria).
UsuarioCreacion. Usuario que ha creado este Ítem ( para auditoria).
FechaModificacion. Ultima fecha en que se ha modificado este Ítem ( para auditoria).
UsuarioModificacion. Ultimo usuario que ha modificado este Ítem ( para auditoria). De esta
manera hemos definido nuestra tabla que se encargara de almacenar la información necesaria
para el funcionamiento de nuestro ejemplo, luego de esto lo que necesitamos es definir un
procedimiento almacenado que nos pueda proveer la información que se requiere para mostrar
nuestro menú dinámico, en nuestro caso será un procedimiento sencillo que nos listara todos los
ítems que están Habilitados para mostrarse, además ordenándolos por la Posición para de esta
manera se muestren ordenados nuestros elementos del menú sin necesidad de agregar ninguna
logica adicional.

El Procedimiento almacenado quedaría de la siguiente manera:

CREATE PROCEDURE dbo.ObtenerOpcionesMenu

AS

SET NOCOUNT ON

SELECT MenuId, Descripcion, Posicion, PadreId, Icono, Habilitado, Url

FROM dbo.Menu
WHERE Habilitado = 1

SET NOCOUNT OFF

Figura 2. Procedimiento Almacenado.

Presentación
Luego de ya tener el Procedimiento almacenado, pasamos a crear el Web site, para esto primero
cargamos nuestro Visual Studio .NET 2005, y vamos a File , New Web site y creamos nuestro
proyecto Web denominado menuDemo tal como se muestra en la siguiente figura. ahi podemos
notar los diferentes tipos de proyectos existentes solo para crear sitios web, en esta version se
ha separado la creacion de webs con los otros tipos de proyectos existentes.

Luego de crear nuestro Web Site por defecto se agrega un formulario Web denominado
Default.aspx sobre el cual agregaremos nuestro Menú, para esto vamos a la caja de
herramientas de Visual Studio donde encontraremos un conjunto de separadores o Tabs, en ese
conjunto de controles buscamos el tab denominado Navigation y dentro de el encontraremos a
nuestro control Menu, lo seleccionamos y arrastramos sobre el diseñador de la pagina, le
ponemos por Name mnuPrincipal.

La presentación inicial del menú es muy pobre en cuanto a colores, esto lo notaran al momento
en q este ya se encuentre sobre el formulario , desde luego que podríamos elegir darle un auto
formato como se puede hacer con controles como el calendario o la grilla, para esto se
selecciona el menú en el diseñador, se da botón secundario , se elige Auto Format... y se puede
elegir entre varios formatos ya definidos, o desde luego se puede personalizar de la manera que
a nosotros nos parezca conveniente, puede ser de acuerdo a los colores que son el estándar de
la empresa para la que estamos desarrollando el aplicativo Web.

Ahora pasemos a la parte mas fundamental de este ejemplo, que es la carga dinámica de los
diferentes ítems que tendrá nuestra aplicación en base a jerarquías definidas en la base de
datos. lo primero que debemos hacer es conectarnos a la base de datos para poder invocar el
procedimiento almacenado que antes definimos, luego de eso pasaremos a llenar el menú de
una forma recursiva ya que así lo definimos en base de datos, el código necesario con sus
respectivos comentarios seria el siguiente:

! "#$ %& '( )

* #+,-

.
,
) */ ,

. ) 0
# */ # 1 & 2 #- 3 2 3
# 2 3
1'

. &# # #
) */ 1
! ! # ) 1
$# '
) # , 2 , #

.
) 4 ) '

.# # # 0
4 % #- ) 5/ ) 5/

. # # #
) 1
) 1
'% ) 1 1'
',-
) * /)
) 2 ) 1
) 1
',
) , 2 ) 1 # # 1 ',
) 6 2 ) 1# 1 ',
) *& 6 2 ) 16 1',

. 7 0
# ) '

.
-# # & # 8 0
) ) $ ) '
%
*
%

& ) 5 ) ) $ ) , '

.# # # -"
. # 5
4 % #- ) 5/ ) 5/
) 1 1', % ) '
* ) 1
) 1'% ) 1 1
'',-
* /) * /)
* /) 2 ) 1) 1
',
* /) , 2 ) 1 # # 1 ',
* /) 6 2 ) 1# 1 ',
* /) *& 6 2 ) 16 1',
 . * & ) ) & &
) - * /) '

. # & & & 09 -"

) * /) $ ) '
%
*

Ahora ya implementado el método recursivo encargado de generar el menú, de acuerdo a la

información almacenada en base de datos que mostrare en la figura siguiente, podríamos tener
un menú de la siguiente manera:

Claro que si observamos bien notaremos que no es nada llamativo, ahora si vamos a proceder a
ponerle los colores adecuados, con los anchos apropiados también, además de darle una
presentación horizontal, en la cabecera de nuestra pagina, es muy recomendable que nuestro
Menú vaya en una Master Page en donde se ubiquen los métodos que se encarguen de
generarlo, y cada una de las Paginas de Contenido (Content Pages) deben tener la estructura de
la misma Master Page para así guardar uniformidad en todas las paginas de la aplicación.
Pasamos ahora a aplicar ciertos formatos a nuestro menú, el cual quedaría con el siguiente
código HTML:

: ;
) 21 # 1) # & 21 <15 21 & 1( -21 <= 1
! 21( > 1 #+ 21? @#A B14 21?AACCBB14 D* 21 14 D
> 21@@ 1 # ) 211 #( > ! 21<14 D 21 1
21 1 21?AACCBB1 E -21 @ 1 F
: #) #+ 21? @ A B1 E -21 @ 1 21?AACCBB1
E -21 @G= 1 H
F
: #) ( > 21I1 # 21<1HF
: #( & 4 21E- 14 D 21, 1 #+ 21
?AACCBB1HF
: #) #+ 21? @ A B1 E -21 @ 1 21?AACCBB1
HF
: #) ( > 21I1 # 21<1E -21 @G= 1HF
: #( & 4 21E- 14 D 21, 1 #+ 21?AACCBB1H
F
:H ; ) F

Como podemos ver el menú se ha modificado para que tenga una mejor presentación, cada una
de las propiedades definidas dentro del tag tienen una función especial de las cuales tenemos a
MaximunDynamicDisplayLevels que viene a ser el numero máximo de subniveles permitidos
para el menú y la propiedad Orientation podría ser horizontal o vertical. Ahora los tags dentro del
menú están formados por dos grupos bien definidos, los que inician con Static que en si son
elementos definidos para los elementos Root o elementos padre y los que inician Dynamic que
son características que se aplican a los subitems del menú.

Luego de haber agregado los atributos antes mencionados, la presentación final del menú seria
la siguiente.

Conclusiones.

La nueva versión de .NET se viene con muchas novedades bajo el brazo, con controles muy
interesantes, de mucha funcionalidad y sobre todo muy fáciles de usar, que con un poco de
ingenio nos van a permitir realizar aplicaciones diversas con características de buena
performance y a la vez de navegabilidad y presentación al usuario final. El nuevo control Menú
es uno de estos controles que encierra estas características y que da un valor agregado al
trabajo que estemos realizando, evitando tener que estar preocupándonos por ir a la Internet y
buscar controles de terceros que son complicados de utilizar o que implican un alto coste el
adquirirlos.