Create dynamic Accordion from database in ASP.Net using jQuery AJAX

SajidHussa
 
on Mar 09, 2021 03:19 AM
Sample_531702.zip
3273 Views

i want to make a dynamic accordian using json and jquery

my code not work.

i pass group id to fetch data

function makemenubygroup(groupid)
{
    $.ajax({
        url: "Collections.aspx/getsubgroupformenubar",
        data: '{ groupid:' + groupid +'}',
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            var rs = "";
            var rw = "";
            var data = JSON.parse(response.d);                 
 
            if (data.length > 0) {
 
                for (var i = 0; i <= data.length - 1; i++) {
                     
                    rw+='<div class="contentbx">';
                    rw+='<div class="label"> '+data[i].submenuname+'</div>';
                    rw += '<div class="content">';                         
 
                    $.ajax({
                        url: "Collections.aspx/getsubsubgroupformenubar",
                        data: '{ subsubmenu:' + data[i].submenuid + '}',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (response)
                        {                                   
                            var submenudata = JSON.parse(response.d);
                            for (var s = 0; s <= submenudata.length - 1; s++)
                            {                                        
                                rw += '<p>' + submenudata[s].subsubmenuname + '</p>';
                            }
                        }
                    });
                     
                    rw+='</div>';
                    rw += ' </div>';
                }
 
                $('.myaccordian').append(rw);
 
                var i = 0;
                var accordian = document.getElementsByClassName('contentbx');
                for (i = 0; i <= accordian.length; i++) {
                    accordian[i].addEventListener('click', function () {
                        this.classList.toggle('active')
                    })
                }                      
            }
            else { 
                alert("No Records Found...")
            }
        },
        error: function (response) {
            alert(response.responseText);
        },
        failure: function (response) {
            alert(response.responseText);
        }
    });
}

and my c# code is calling ajax 

[WebMethod]
[ScriptMethod]
public static string getsubgroupformenubar(string groupid)
{
    DataTable dt = new DataTable();
 
      string query = "getsubgroup";
        using (SqlConnection con = Connection.getConnection())
        {
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                cmd.Parameters.Clear();
                con.Open();
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@itemgroupid", SqlDbType.Int).Value = groupid;
                SqlDataAdapter sdr = new SqlDataAdapter(cmd);
                sdr.Fill(dt);
                cmd.Connection = con;
                con.Close();
            }
        }
 
    return JsonConvert.SerializeObject(dt);
}
 
[WebMethod]
[ScriptMethod]
public static string getsubsubgroupformenubar(string subsubmenu)
{
    DataTable dt = new DataTable();
 
    string query = "getitemtype";
    using (SqlConnection con = Connection.getConnection())
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            cmd.Parameters.Clear();
            con.Open();
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@itemgroupid", SqlDbType.Int).Value = subsubmenu;
            SqlDataAdapter sdr = new SqlDataAdapter(cmd);
            sdr.Fill(dt);
            cmd.Connection = con;
            con.Close();
        }
    }
 
    return JsonConvert.SerializeObject(dt);
}

help me thank you

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 13, 2021 04:42 AM
on Dec 29, 2021 11:33 AM

Hi SajidHussa,

Check this example. Now please take its reference and correct your code.

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML

<div class="myaccordian">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />
<style type="text/css">
    .ui-accordion .ui-accordion-header .ui-icon {
        position: absolute !important;
        left: 95% !important;
        top: 50% !important;
        margin-top: -8px !important;
    }
</style>
<script type="text/javascript">
    $(function () {
        makemenubygroup();
    });
    function makemenubygroup() {
        $.ajax({
            url: "Default.aspx/getsubgroupformenubar",
            data: {},
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: false,
            success: function (response) {
                var data = JSON.parse(response.d);
                if (data.length > 0) {
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        var h3 = '<h3>' + data[i].Title + '</h3>';
                        var div = '<div>';
                        $.ajax({
                            url: "Default.aspx/getsubsubgroupformenubar",
                            data: '{ subsubmenu:' + data[i].Id + '}',
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            async: false,
                            success: function (response) {
                                var submenudata = JSON.parse(response.d);
                                for (var s = 0; s < submenudata.length; s++) {
                                    div += "<p>" + submenudata[s].Content + "</p>";
                                }
                            }
                        });
                        div += '</div>';
                        html += h3 + div;
                    }
                    $(".myaccordian").append(html).accordion();
                }
            }
        });
    }
</script>

Namespaces

C#

using System.Data;
using System.Web.Script.Services;
using System.Web.Services;
using Newtonsoft.Json;

VB.Net

Imports System.Data
Imports System.Web.Script.Services
Imports System.Web.Services
Imports Newtonsoft.Json

Code

C#

[WebMethod]
[ScriptMethod]
public static string getsubgroupformenubar()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Title");
    dt.Rows.Add("1", "Home");
    dt.Rows.Add("2", "Services");
    dt.Rows.Add("3", "About");
    dt.Rows.Add("4", "Contact");

    return JsonConvert.SerializeObject(dt);
}

[WebMethod]
[ScriptMethod]
public static string getsubsubgroupformenubar(string subsubmenu)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Content");
    dt.Columns.Add("MenuId");

    dt.Rows.Add("1", "Home", "1");
    dt.Rows.Add("2", "Consulting", "2");
    dt.Rows.Add("3", "Outsourcing", "2");
    dt.Rows.Add("4", "About", "3");
    dt.Rows.Add("5", "Contact", "4");

    DataRow[] dr = dt.Select("MenuId='" + subsubmenu + "'");
    DataTable dt1 = new DataTable();
    if (dr.Length > 0)
    {
        dt1 = dr.CopyToDataTable();
    }

    return JsonConvert.SerializeObject(dt1);
}

VB.Net

<WebMethod>
<ScriptMethod>
Public Shared Function getsubgroupformenubar() As String
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("Id")
    dt.Columns.Add("Title")
    dt.Rows.Add("1", "Home")
    dt.Rows.Add("2", "Services")
    dt.Rows.Add("3", "About")
    dt.Rows.Add("4", "Contact")
    Return JsonConvert.SerializeObject(dt)
End Function

<WebMethod>
<ScriptMethod>
Public Shared Function getsubsubgroupformenubar(ByVal subsubmenu As String) As String
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("Id")
    dt.Columns.Add("Content")
    dt.Columns.Add("MenuId")
    dt.Rows.Add("1", "Home", "1")
    dt.Rows.Add("2", "Consulting", "2")
    dt.Rows.Add("3", "Outsourcing", "2")
    dt.Rows.Add("4", "About", "3")
    dt.Rows.Add("5", "Contact", "4")
    Dim dr As DataRow() = dt.Select("MenuId='" & subsubmenu & "'")
    Dim dt1 As DataTable = New DataTable()
    If dr.Length > 0 Then
        dt1 = dr.CopyToDataTable()
    End If

    Return JsonConvert.SerializeObject(dt1)
End Function

Screeenshot