Primeramente es de asumir que tienen instalado y registrado el ajaxcontrol tool kit.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Ahora escribimos el HTML
<cc1:Accordion ID="Accordion1" runat="server">
<HeaderTemplate>
<span><%#Eval("strCarrera")%></span>
</HeaderTemplate>
<ContentTemplate>
<asp:HiddenField
ID="hdfCodigo"
runat="server"
value='<%# DataBinder.Eval(Container.DataItem, "Id_Carrera") %>'
/>
<asp:Label
ID="lblDescripcion"
runat="server"
Text='<%# DataBinder.Eval(Container.DataItem,"Id_Carrera")%> '>
</asp:Label>
</ContentTemplate>
</cc1:Accordion>
Ok, explico un poco, el menu acordion se llenera apartir de dos tablas previamente creadas y alojadas en una base de datos a las que tengo acceso. El header temple del acordionpanel unicamente tendra el titulo o cabecera del resto del menu, mientras que el ContenTemplate contiene el "detalle" del menu que se encuentra alojado en otra tabla que contiene un foreign key haciendo referencia a la tabla de la cabecera, de esta forma:
CREATE TABLE cat_carrera
(
Id_Carrera int PRIMARY KEY NOT NULL,
strCarrera nvarchar(50) NOT NULL,
intConsecutivo int NULL, /*Presenta un ordenamiento numerico en caso se quiera ordenar de una u otra forma el menu.*/
strImagen nvarchar(100) NULL,
bolActivo bit DEFAULT 1
)
GO
CREATE TABLE tblSA_MenuAcordion
(
CarreraId int FOREIGN KEY REFERENCES cat_carrera(Id_Carrera) NOT NULL,
intConsecutivo int NOT NULL, /*Lleva el control de cuantas filas se creara para cada carrera*/
strColumna nvarchar(50) NULL,
strURL nvarchar(100) NULL,
bolActivo bit DEFAULT 1 NULL
)
Ahora se necesita crear la consulta que mostrara la estructura del menu. (Ustedes creen un procedimiento por seguridad)
SELECT cc.Id_Carrera, cc.strCarrera, cc.intConsecutivo, cc.strImagen, cc.bolActivo FROM cat_carrera cc ORDER BY cc.Consecutivo
CREATE VIEW [dbo].[vw_Acordion]
AS
SELECT tsma.CarreraId,
'<a class="url" href="' + tsma.strURL + '?cc=' + tsma.CarreraId + '&ca=' + CONVERT(nvarchar,cc.Consecutivo) + '">' + tsma.strColumna + '</a>' AS strColumna
FROM tblSA_MenuAcordion tsma
INNER JOIN cat_Carrera cc ON cc.Id_Carrera = tsma.CarreraId
Una ves confirmamos que nuestra consulta funciona es necesario llamarla en unestro formulario aspx.
Importamos la biblioteca de clase data para poder hacer conexiones a la base de datos.
Imports System.Data
'Llamamos el procedimiento al cargar la pagina
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
sp_LlenarMenu()
End If
End Sub
'Proceimiento que llena el titulo del menu
Private Sub sp_LlenarMenu()
'Llamamos la conexion desde el webconfig. (ustedes pueden colocar la conexion directamente si asi lo desean aunque no es recomendable)
Dim cnn As String = ConfigurationManager.AppSettings("CnnPublic")
Dim dbCon As New System.Data.OleDb.OleDbConnection(cnn)
Try
'abrimos la conexion
If dbCon.State = ConnectionState.Closed Then
dbCon.Open()
End If
Dim sql As String = String.Empty
sql = "SELECT cc.Id_Carrera, cc.strCarrera, cc.intConsecutivo, cc.strImagen, cc.bolActivo FROM cat_carrera cc ORDER BY cc.Consecutivo"
'Llamamos los datos
Dim daSrc As New System.Data.OleDb.OleDbDataAdapter(sql, dbCon)
Dim oTable1 As New DataTable("AcordionMenu")
daSrc.Fill(oTable1)
'llenamos el dataset
Dim dsSrc As New DataSet()
dsSrc.Tables.Add(oTable1)
'le pasamos los datos al acordion
Me.Accordion1.DataSource = dsSrc.Tables(0).DefaultView
Me.Accordion1.DataBind()
'Con esto se creara la cabecera del menu y al mismo tiempo el control hiddenfield del content del acordion se llenera, este sera usado posteriormente para enlazar los datos del detalle.
Catch ex As Exception
ScriptManager.RegisterStartupScript(Me, Me.GetType, "mensaje", "alert('Ha ocurrido un error al intentar cargar la cabezera del menu');", True)
Finally
If dbCon.State = ConnectionState.Open Then
dbCon.Close()
End If
End Try
End Sub
Ahora en el evento ItemDataBound del acordion llenamos el detalle del menu.
Protected Sub Accordion1_ItemDataBound(ByVal sender As Object, ByVal e As AjaxControlToolkit.AccordionItemEventArgs) Handles Accordion1.ItemDataBound
Dim cnn As String = ConfigurationManager.AppSettings("CnnPublic")
Dim dbCon As New System.Data.OleDb.OleDbConnection(cnn)
Try
'Si el tipo del item no es de contenido entonces regresa la funcion
If e.ItemType <> AjaxControlToolkit.AccordionItemType.Content Then
Return
End If
'Llamamos al control label que tenemos dentro del content del acordion
Dim url As Label = TryCast(e.AccordionItem.FindControl("lblDescripcio n"), Label)
'Llamamos al control Hiddenfield que tenemos dentro del content del acordion, 'recordemos que este control es el que tiene el id de la cabecera lo que nos 'servira de pivon para enlazar nuestros datos correctamente.
Dim Codigo As HiddenField = CType(e.AccordionItem.FindControl("hdfCodigo"), HiddenField)
'si no existe el control label regresa
If url Is Nothing Then
Return
End If
'si no exista el control hiddent fiel regresa
If Codigo Is Nothing Then
Return
End If
'abrimos la conexion
If dbCon.State = ConnectionState.Closed Then
dbCon.Open()
End If
Dim sql As String = String.Empty
sql = "SELECT va.CarreraId,va.strColumna FROM vw_Acordion va " & _
"WHERE va.CarreraId = '" & Codigo.Value.Trim & "' "
Dim daSrc As New System.Data.OleDb.OleDbDataAdapter(sql, dbCon)
Dim oTable1 As New DataTable("AcordionContent")
daSrc.Fill(oTable1)
'llenamos el dataset
Dim dsSrc As New DataSet()
dsSrc.Tables.Add(oTable1)
'Esto es lo importante de todo el codigo, aca llenamos el detalle de cada seccion del contenido creando una lista que contenga links.
url.Text = "<ul style='margin:7px; padding:7px;'>"
'se crea un ciclo for que añade un texto por cada fila en el dataset
For i As Integer = 0 To dsSrc.Tables(0).Rows.Count - 1
url.Text &= "<li class='azul'>" & dsSrc.Tables(0).Rows(i).Item("strColumna").ToStrin g.Trim & "</li>"
Next i
url.Text &= "</ul>"
Catch ex As Exception
ScriptManager.RegisterStartupScript(Me, Me.GetType, "mensaje", "alert('Ha ocurrido un error al intentar cargar el contenido del menu');", True)
Finally
If dbCon.State = ConnectionState.Open Then
dbCon.Close()
End If
End Try
End Sub
salu2, espero aver expliado correctamente, si tienene dudas consultan, el resultado final seria algo asi. (tomando en cuenta css y diseño)
