Creando Mens Dinmicos con ASP .NET 2.

0

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

Para desarrollar una aplicacin Web, no solo es necesario cumplir con la lgica de negocios que
el sistema debe implementar, mucho ms si esta aplicacin va a estar colgada sobre Internet y
en donde nuestros socios de negocios van a poder observar la calidad y vistosidad de la misma.
Tambin 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 aplicacin 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 liberacin de Visual Studio 2005 y el Framework 2.0 versin beta, trae consigo un
control denominado Menu que es el que usaremos ahora para desarrollar un ejemplo de como
poder cargar dinmicamente desde la base de datos, toda una estructura de mens 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, adems 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 adems
de generar un cdigo para cada elemento se debe definir adems un cdigo del padre a quien
pertenece ese elemento.

La estructura de la tabla quedara de la siguiente manera:


MenuId. Es el cdigo que va a tener cada tem de Men.
Descripcin. Descripcin que aparecer en el Men.
PadreId. Es el cdigo del tem de Men de quien es hijo cada registro, en el caso de uno de los
elementos de nivel superior (root), este cdigo seria el mismo que MenuId.
Posicin. Es la posicin que va a tener en el rbol que se genere para cada tem, por ejemplo si
es el primer hijo tendr posicin 1, si es el segundo posicin 2 y as sucesivamente. Icono.
Imagen que estar a la izquierda de la descripcin 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 informacin necesaria
para el funcionamiento de nuestro ejemplo, luego de esto lo que necesitamos es definir un
procedimiento almacenado que nos pueda proveer la informacin que se requiere para mostrar
nuestro men dinmico, en nuestro caso ser un procedimiento sencillo que nos listara todos los
tems que estn Habilitados para mostrarse, adems ordenndolos por la Posicin para de esta
manera se muestren ordenados nuestros elementos del men sin necesidad de agregar ninguna
logica adicional.

El Procedimiento almacenado quedara 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.


Presentacin
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 diseador de la pagina, le
ponemos por Name mnuPrincipal.



La presentacin 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 podramos 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 diseador, se da botn 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 estndar 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 dinmica de los
diferentes tems que tendr nuestra aplicacin en base a jerarquas 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 cdigo necesario con sus
respectivos comentarios seria el siguiente:
Imports System.Data
Imports System.Data.SqlClient
Partial Class Default_aspx

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then

'Traemos los datos de de datos.
Dim dtMenuItems As New DataTable

'Conexion a la base de datos donde esta nuestra tabla Men.
Dim cnDatos As New SqlConnection("server=localhost;DataBase=DBApp;Integrated
Security=SSPI;")

'se invoca al procedimiento almacenado
Dim daMenu As New SqlDataAdapter("ObtenerOpcionesMenu", cnDatos)
daMenu.SelectCommand.CommandType = CommandType.StoredProcedure

'llenamos el datatable
daMenu.Fill(dtMenuItems)

'recorremos el datatable para agregar los elementos de que estaran en la cabecera del men.
For Each drMenuItem As Data.DataRow In dtMenuItems.Rows

'esta condicion indica q son elementos padre.
If drMenuItem("MenuId").Equals(drMenuItem("PadreId")) Then
Dim mnuMenuItem As New MenuItem
mnuMenuItem.Value = drMenuItem("MenuId").ToString
mnuMenuItem.Text = drMenuItem("descripcion").ToString
mnuMenuItem.ImageUrl = drMenuItem("Icono").ToString
mnuMenuItem.NavigateUrl = drMenuItem("Url").ToString
'agregamos el tem al men
mnuPrincipal.Items.Add(mnuMenuItem)

'hacemos un llamado al metodo recursivo encargado de generar el rbol del men.
AddMenuItem(mnuMenuItem, dtMenuItems)
End If
Next
End If
End Sub
Private Sub AddMenuItem(ByRef mnuMenuItem As MenuItem, ByVal dtMenuItems As Data.DataTable)

'recorremos cada elemento del datatable para poder determinar cuales son elementos hijos
'del menuitem dado pasado como parametro ByRef.
For Each drMenuItem As Data.DataRow In dtMenuItems.Rows
If drMenuItem("PadreId").ToString.Equals(mnuMenuItem.Value) AndAlso _
Not drMenuItem("MenuId").Equals(drMenuItem("PadreId")) Then
Dim mnuNewMenuItem As New MenuItem
mnuNewMenuItem.Value = drMenuItem("MenuId").ToString
mnuNewMenuItem.Text = drMenuItem("descripcion").ToString
mnuNewMenuItem.ImageUrl = drMenuItem("Icono").ToString
mnuNewMenuItem.NavigateUrl = drMenuItem("Url").ToString

'Agregamos el Nuevo MenuItem al MenuItem que viene de un nivel superior.
mnuMenuItem.ChildItems.Add(mnuNewMenuItem)

'llamada recursiva para ver si el nuevo men tem aun tiene elementos hijos.
AddMenuItem(mnuNewMenuItem, dtMenuItems)
End If
Next
End Sub
End Class



Ahora ya implementado el mtodo recursivo encargado de generar el men, de acuerdo a la
informacin almacenada en base de datos que mostrare en la figura siguiente, podramos 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 tambin, adems de darle una
presentacin horizontal, en la cabecera de nuestra pagina, es muy recomendable que nuestro
Men vaya en una Master Page en donde se ubiquen los mtodos 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 aplicacin.
Pasamos ahora a aplicar ciertos formatos a nuestro men, el cual quedara con el siguiente
cdigo HTML:

<asp:Menu ID="mnuPrincipal" MaximumDynamicDisplayLevels ="2" Runat="server" Height="20px"
Orientation="Horizontal" BackColor="#b1c3d9" ForeColor="#336699" Font-Names="Verdana" Font-
Size="11px" StaticSubMenuIndent="" DynamicHorizontalOffset="2" Font-Bold = "true"
BorderStyle="Solid" BorderColor="#336699" BorderWidth="1px">
<DynamicMenuStyle BackColor="#B1C3D9" BorderWidth="1px" BorderColor="#336699"
Width="180px"/>
<DynamicMenuItemStyle HorizontalPadding="5" VerticalPadding="2" />
<DynamicHoverStyle ForeColor="White" Font-Bold="True" BackColor="#336699"/>
<StaticMenuStyle BackColor="#B1C3D9" BorderWidth="1px" BorderColor="#336699"/>
<StaticMenuItemStyle HorizontalPadding="5" VerticalPadding="2" Width="180px"/>
<StaticHoverStyle ForeColor="White" Font-Bold="True" BackColor="#336699"/>
</asp:Menu>


Como podemos ver el men se ha modificado para que tenga una mejor presentacin, cada una
de las propiedades definidas dentro del tag tienen una funcin especial de las cuales tenemos a
MaximunDynamicDisplayLevels que viene a ser el numero mximo de subniveles permitidos
para el men y la propiedad Orientation podra ser horizontal o vertical. Ahora los tags dentro del
men estn 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 caractersticas que se aplican a los subitems del men.

Luego de haber agregado los atributos antes mencionados, la presentacin final del men seria
la siguiente.

Conclusiones.
La nueva versin de .NET se viene con muchas novedades bajo el brazo, con controles muy
interesantes, de mucha funcionalidad y sobre todo muy fciles de usar, que con un poco de
ingenio nos van a permitir realizar aplicaciones diversas con caractersticas de buena
performance y a la vez de navegabilidad y presentacin al usuario final. El nuevo control Men
es uno de estos controles que encierra estas caractersticas y que da un valor agregado al
trabajo que estemos realizando, evitando tener que estar preocupndonos por ir a la Internet y
buscar controles de terceros que son complicados de utilizar o que implican un alto coste el
adquirirlos.