Acordeón dinámico alimentado desde una base de datos SQL

/
2 Comments

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!



You may also like

2 comments:

  1. podrias mostrar la Estrucura de la BD
    por favor
    te lo agradeceria

    ReplyDelete
    Replies
    1. Revisaré mis archivos y te comento, el post es ya casi 4 años atrás...

      Delete

Páginas

About me

top social

Powered by Blogger.

top navigation

Popular Posts

Flickr Images