jQuery and Database Driven Accordion : The Official Microsoft ASP.NET Forums

Reply

md_refay

Member

416 Points

280 Posts

jQuery and Database Driven Accordion

Sep 12, 2011 04:16 PM|LINK

Hi all,

Please help me to create JAuery Driven data from database

my code is :-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
 
    <style type="text/css">
        .Menu
        {
            width: 200px;
            text-align: center;
            border: solid 2px gray;
            padding: 0px;
            background-color: Silver;
            cursor: hand;
            font-weight: bold;
        }
        .MenuItem
        {
            width: 192px;
            text-align: center;
            border: solid 1px silver;
            padding: 2px;
            background-color: whitesmoke;
        }
    </style>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax(
            {
                type: "POST",
                url: "Default3.aspx/GetCategories",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: CreateMenus,
                error: function(err) {
                    alert(err.status + " - " + err.statusText);
                    //alert('error');
                }
            });
        });
        function CreateMenus(results) {
            results = results.d;
            for (var i = 0; i < results.length; i++) {
                $("<div class='Menu'>" + results[i].CategoryName + "</div>")
                 .click({ CategoryID: results[i].CategoryID }, OnMenuClick)
                 .appendTo("#accordionContainer");
            }
        }
        function OnMenuClick(event) {
            $("div[id ^= 'menuItemGroup']").slideUp(500);
            $.ajax(
                {
                    type: "POST",
                    url: "Default3.aspx/GetCategoryProducts",
                    data: '{"CategoryID":"' + event.data.CategoryID + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(items) {
                        items = items.d;
                        $(event.target).children().remove();
                        var html = "<div id='menuItemGroup" + event.data.ProductID + "' style='display:none'>";
                        for (var j = 0; j < items.length; j++) {
                            html += "<div class='MenuItem'><a href=Details.aspx?ProductID='" + items[j].ProductID + "'>" +
                            items[j].ProductName + "</a></div>";
                        }
                        html += "</div>";
                        $(event.target).append(html);
                        $("#menuItemGroup" + event.data.CategoryID).slideDown(500);
                    },
                    error: function(err, r, c) {
                        alert(err.status + " - " + err.statusText);
                    }
                }
                )
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div id="accordionContainer">
    </div>
    </form>
</body>
</html>

and in code behind :-

//--GetCategories
    [System.Web.Services.WebMethod]
    public static System.Collections.Generic.List<Category> GetCategories()
    {
        System.Collections.Generic.List<Category> list = new System.Collections.Generic.List<Category>();
        NorthwindDataContext dbml = new NorthwindDataContext();
        list = dbml.Categories.ToList();
        return list;
    }
    //-- GetCategoryProducts
    [System.Web.Services.WebMethod]
    public static System.Collections.Generic.List<Product> GetCategoryProducts(int CategoryID)
    {
        Random r = new Random();
        System.Collections.Generic.List<Product> list = new System.Collections.Generic.List<Product>();
        NorthwindDataContext dbml = new NorthwindDataContext();
        list = dbml.Products.Where(p => p.CategoryID == CategoryID).ToList();
        //foreach (Product p in list)
        //{
        //    Product pro = new Product();
        //    pro.CategoryID=lis
        //}
        //for (int i = 0; i < r.Next(10); i++)
        //{
        //    MenuItem mi = new MenuItem();
        //    mi.MenuId = menuId;
        //    mi.MenuItemId = i;
        //    mi.Text = "Menu " + menuId.ToString() + " --- Menu item " + i.ToString();
        //    mi.NavigateUrl = "http://www.testmenu.com?menuID=" + menuId.ToString() + "&MenuItemID=" + i.ToString();
        //    list.Add(mi);
        //}
        return list;
    }