Skip to main content

How to animate grdivew using Jquery

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

<!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></title>

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#<%=ddlCategory.ClientID %>').change(function() {
                var categoryid = $('#<%=ddlCategory.ClientID %>').val();
                $.ajax(
            {
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data: "{'CategoryID':'" + categoryid + "'}",
                url: "Default.aspx/ProductByID",
                success: function(ret) {
                    $("#grd").html(ret.d).slideUp("fast").slideDown("slow");
                }

            }
        );
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlCategory" runat="server">
        </asp:DropDownList>
    </div>
    <div id="grd">
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq.Expressions;
using System.Web.Script.Serialization;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindCategory();
    }
    private static string ConvertControlToHTML(Control source)
    {
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        source.RenderControl(htw);
        return sw.ToString();
    }
    private void BindCategory()
    {

        ddlCategory.DataSource = new Category().GetCategoryList();
        ddlCategory.DataTextField = "CategoryName";
        ddlCategory.DataValueField = "CategoryID";
        ddlCategory.DataBind();
    }
    [System.Web.Services.WebMethod]
    public static string ProductByID(int CategoryID)
    {

        var query = from p in new Product().GetProductList()
                    join c in new Category().GetCategoryList()
                    on p.CategoryID equals c.CategoryID
                    where c.CategoryID == CategoryID
                    select new
                    {
                        CategoryID = p.CategoryID,
                        ProductName = p.ProductName,
                        Price = p.Price

                    };
        GridView gv = new GridView();
        gv.ShowHeader = true;
        gv.AutoGenerateColumns = true;
        gv.DataSource = query;
        gv.DataBind();
        return ConvertControlToHTML(gv);

    }

}
public class Product
{
    public int ID { get; set; }
    public int CategoryID { get; set; }
    public string ProductName { get; set; }
    public double Price { get; set; }

    public List<Product> GetProductList()
    {
        List<Product> list = new List<Product>();
        for (int i = 1; i < 5; i++)
        {

            list.Add(new Product() { CategoryID = i, ProductName = "Product" + i.ToString(), Price = i * 4.5 });

        }
        for (int i = 1; i < 10; i++)
        {

            list.Add(new Product() { CategoryID = i + i, ProductName = "Product" + i.ToString(), Price = i * 4.5 });

        }
        return list;

    }
}

public class Category
{
    public int CategoryID { get; set; }
    public string CategoryName { get; set; }
    public List<Category> GetCategoryList()
    {
        List<Category> list = new List<Category>();
        for (int i = 1; i < 10; i++)
        {

            list.Add(new Category() { CategoryID = i, CategoryName = "Category" + i.ToString() });

        }
        return list;
    }

}

Comments

  1. I am regular visitor of your blog. and its really good and helpful.

    I found this article very interesting but unfortunately it is not working for me. I am able to bind the Drop-Down but according to that am not able to bind Grid View.
    Any Help?
    Thanks!

    ReplyDelete
  2. @Anonymous:Grid view bind code is inside the following method.

    public static string ProductByID(int CategoryID)

    ReplyDelete

Post a Comment

Popular posts from this blog