Este es un problema que se me presento hace poco y después de la poca información que encontraba sobre el tema , conseguir crear el acordeón.
Antes que todo, para los que no lo saben el Acordeón es un control de AJAX que permite muestra contenido en diferentes paneles desplegables. Acá un demo.
Como requisito se debe integrar el Ajax Control Toolkit el cual encuentran en el siguiente link con las correspondientes instrucciones de instalación.
El siguiente acordeón es alimentado de dos bases de datos relacionadas por una Foreing Key.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AccordionTest.aspx.cs" Inherits="AccordionTest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css"> /*Esta sección define el estilo del Acordion // This secction set the accordion control style */
.accordion {
width: 400px;
}
.accordionHeader {
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected {
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form >
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion
ID="Accordion1"
CssClass="accordion"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
runat="server">
<HeaderTemplate>
<%#DataBinder.Eval(Container.DataItem,"Title") %>
</HeaderTemplate>
<ContentTemplate>
<asp:HiddenField ID="IDVulnerability" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"ID Vulnerability") %>' />
<asp:HiddenField ID="IDServer" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"ID Vulnerability") %>' />
<table>
<tr>
<td><asp:Label ID="LblDesciptionTitle" runat="server" Font-Bold="true" Text="Descripción: "></asp:Label></td>
<td><asp:Label ID="LblDescriptiontxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"Description") %>></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="LblCVETitle" runat="server" Font-Bold="true" Text="CVE: "></asp:Label></td>
<td><asp:Label ID="LblCVEtxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"CVE") %>></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="LblProbabilityTitle" runat="server" Font-Bold="true" Text="Probabilidad: "></asp:Label></td>
<td><asp:Label ID="LblProbalilitytxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"Probability") %>>></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="LblRiskTitle" runat="server" Font-Bold="true" Text="Riesgo: "></asp:Label></td>
<td><asp:Label ID="LblRisktxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"Risk") %>></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="LblRecomendationTitle" runat="server" Font-Bold="true" Text="Recomendación: "></asp:Label></td>
<td><asp:Label ID="LblRecomendationtxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"Recomendation") %>></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="LblCommentsTitle" runat="server" Font-Bold="true" Text="Comentarios: "></asp:Label></td>
<td><asp:Label ID="LblCommentstxt" runat="server" Font-Bold="false" Text=<%#DataBinder.Eval(Container.DataItem,"Comments") %>></asp:Label></td>
</tr>
</table>
</ContentTemplate>
</asp:Accordion>
</div>
</form>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class pruebas2 : System.Web.UI.Page
{
string conString = System.Configuration.ConfigurationManager.ConnectionStrings["VViewConnectionString"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
getId();
}
}
public void getId()
{
SqlConnection sqlConn = new SqlConnection(conString);
sqlConn.Open();
int IDser;
IDser = int.Parse(this.Request.QueryString["ID"]); //this get the ID from the URL //Captura el ID desde la URL
SqlCommand sqlSelect = new SqlCommand("SELECT Serverbus.[ID Server], ServerBus.[ID Bus], ServerBus.Comments, ServerBus.Solve, datasint.Title, datasint.Description, datasint.CVE, datasint.Probability, datasint.Risk, datasint.Recomendation FROM [ServerBus] JOIN datasint ON ServerBus.[ID Bus] = datasint.ID WHERE [ID Server]="+IDser+";", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
sqlConn.Close();
Accordion1.DataSource = myDataset.Tables[0].DefaultView;
Accordion1.DataBind();
}
protected void Accordion1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
{
if (e.ItemType == AjaxControlToolkit.AccordionItemType.Content)
{
SqlConnection sqlConn = new SqlConnection(conString);
sqlConn.Open();
int Ref;
Ref = int.Parse(this.Request.QueryString["Ref"]);
SqlCommand sqlSelect = new SqlCommand("SELECT ServerBus.[ID Server], ServerBus.[ID Bus], ServerBus.Comments, ServerBus.Solve, datasint.Title, datasint.Description, datasint.CVE, datasint.Probability, datasint.Risk, datasint.Recomendation FROM [ServerBus] JOIN datasint ON ServerBus.[ID Bus] = datasint.ID WHERE [ID Server]="+Ref+";", sqlConn);
sqlSelect.CommandType = System.Data.CommandType.Text;
SqlDataAdapter sqlAdapter = new SqlDataAdapter(sqlSelect);
DataSet myDataset = new DataSet();
sqlAdapter.Fill(myDataset);
sqlConn.Close();
}
}
}
Lo pueden descargar de aca---> Download
Espero les sea de utilidad, y si tienen dudas por favor pregunten!