Menus en ASP Net
Hola, hoy aprenderemos como utilizar el control Menu de ASP Net para configurar menues dinámicos, ligandolos a datos de archivos XML.
Pues bien, el control menu de asp net puede ser ligado a los archivos XML mediante una XMLDataSource y a este control se le puede configurar una ruta a un archivo XML.
Realizaremos un ejemplo sencillo con un par de menues y un par de items para cada uno.
Comenzaremos escribiendo la estructura básica en XML:
<?xml version=”1.0″ encoding=”utf-8″ ?>
<Menus>
<Menu>
<MenuItem />
<MenuItem />
</Menu>
<Menu>
<MenuItem />
<MenuItem />
</Menu>
</Menus>
Como pueden observar, solamente declaramos una serie de nodos, “Menus”, un par de nodos “Menu” y un par de nodos “MenuItem” para cada uno.
Ahora procederemos a completar la información de la estructura con datos, por medio de atributos. Antes, una breve explicación:
Un menú en asp net necesitará, básicamente de:
- Texto que desplegar.
- Url a la cual hacer un hipervínculo.
Además se le pueden configurar, entre otras cosas:
- Un valor para el control.
- Un “ToolTip”, para indicaciones cuando se haga “hover” sobre el control.
- Un “Target” para indicar si debe abrir una nueva ventana o actuar sobre la actual, tal y como un hipervínculo normal.
La mayoría de estas opciones son opcionales. En este ejemplo, procederemos a configurarlas de la siguiente manera: Los contenedores no expecificarán url (solo se utilizarán para contener a los items) y los items de los menus contendrán los atributos para el hipervínculo como la url y el “target”. Esta información la aplicaremos a la estructura anterior mediante atributos, de la siguiente manera:
<?xml version="1.0" encoding="utf-8" ?>
<Menus>
<Menu MenuID="Menu 1" Text="Menu 1">
<MenuItem MenuItemID="Menu Item 1" Text="Ir a google"
Url="http://www.google.com"
Target="_self" />
<MenuItem MenuItemID="Menu Item 2" Text="Ir a yahoo"
Url="http://www.yahoo.com"
Target="_self" />
</Menu>
<Menu MenuID="Menu 2" Text="Menu 2">
<MenuItem MenuItemID="Menu Item 1" Text="Ir a bing"
Url="http://www.bing.com"
Target="_blank" />
<MenuItem MenuItemID="Menu Item 2" Text="Ir a altavista"
Url="http://www.altavista.com"
Target="_blank" />
</Menu>
</Menus>
Pues bien, tenemos nuestro archivo XML listo, ahoro procederemos con la programación de los componentes de servidor ASP Net.
Necesitaremos de un control Menu y de un control XMLDataSource.
Lo primero que configuraremos será el XmlDataSource. Podemos efectuarlo desde el “wizard” o directamente desde la declaración del control, como en este ejemplo:
<asp:XmlDataSource ID="MyXmlDataSource" runat="server" DataFile="~/xml/myxmlfile.xml"
XPath="/Menus/*"><asp:XmlDataSource>
Donde indicamos mediante el atributo “DataFile” la ruta relativa al archivo xml que acabamos de crear, y con el atributo “XPath” el filtro necesario para obtener la lista de nodos “Menu” que nos interesa, es como un “Select” de SQL en el que indicamos que obtenga el listado de todos los nodos contenidos en “Menus”.
Ahora, procedemos a configurar el control asp Menu. Primero declararemos el control e indicaremos que utilizará el data source previamente configurado:
<asp:Menu ID="MyMenu" runat="server" DataSourceID="MyXmlDataSource">
</asp:Menu>
Luego, procederemos a “mapear” los atributos del archivo XML con las diferentes opciones para cada control. Para ello utilizaremos la propiedad “DataBindings” y la subpropiedad “MenuItemBinding”, de la siguiente manera: Se abrirá “DataBindings” y dentro se declarará un “MenuItemBinding” para cada tipo de nodo declarado en el archivo xml, especificando este tipo mediante el atributo “DataMember”, ejemplo:
<asp:Menu ID=”MyMenu” runat=”server” DataSourceID=”MyXmlDataSource”>
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" />
<asp:MenuItemBinding DataMember="MenuItem" />
</DataBindings>
</asp:Menu>
Como podemos apreciar, le hemos indicado que existen dos tipos de nodos que contendrán información a “renderear”. Como existen nodos “Menu”, le asignamos un “MenuItemBinding”, y como existirán nodos “MenuItem”, le asignamos un “MenuItemBinding” para el mismo. Procederemos ahora a efectuar el mapeo enlazando los atributos, es decir, utilizaremos atributos del “MenuItemBinding” para especificarle al control que atributos del archivo XML tienen la información requerida.
Los atributos comunes (y que utilizaremos en este ejemplo, en su mayoría) del “MenuItemBinding” son:
- DataMember = Elemento nodo xml que contiene toda la información.
- TextField = Atributo del elemento nodo xml que se utilizará como texto del menú.
- ValueField = Atributo del elemento nodo xml que se utilizará como valor del menú.
- NavigateUrlField = Atributo del elemento nodo xml que se utilizará como url del link del menú.
- ToolTipField = Atributo del elemento nodo xml que se utilizará como “ToolTip” (ó “alt” en html) para el link del menú.
- TargetField = Atributo del elemento nodo xml que se utilizará para configurar el target (_blank, _self. etc.) del vínculo del menú.
Ahora procederemos a efectuar el “mapeo”:
<asp:Menu ID="MyMenu" runat="server" DataSourceID="MyXmlDataSource">
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="Text"
ValueField="MenuID" />
<asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="Url"
TextField="Text" ValueField="MenuItemID" />
</DataBindings>
</asp:Menu>
Como notarán, le indicamos mediante sus atributos, de que atributos del archivo XML obtendrá la información requerida. Importante, todos los campos configurados en el MenuItemBinding deberán utlizarse en el archivo XML que se utilice como DataSource para el control.
Con ello terminamos las configuraciones necesarias, el control Menu efectuará las operaciones necesarias y producirá el código HTML necesario para que los menues se visualicen correctamente.
Como consejos extra, podemos manejar por separado el control Menu en un archivo *.ascx para manejarlo como un Web Control y poderlo ingresar de mejor manera en las paginas necesarias.
Además, si necesitan implementarle mayor dinamismo, mediante este método es posible configurar dinámicamente el archivo XML al DataSource, y, por ende, al control Menu. En el evento “Page_Load”, configurar la ruta dle archivo xml.
protected void Page_Load(object sender, EventArgs e)
{
this.MyXMLDataSource.DataFile = "~/xml/anotherxmlfile.xml";
}
De esta manera, mediante flujo de desiciones puedes programar disitintos archivos bajos condiciones determinadas, bastante util en el caso de que tengas que programar distintos permisos a diversas clases de usuarios, por ejemplo.
admin
December 27, 2010
ASP Net
No Comment