The GridView control displays the values of a data source in a table. Each column represents a field, while each row represents a record. The GridView control supports the following features: Binding to data source controls, such as SqlDataSource. … Multiple data fields for the hyperlink columns
In this post, I will show you how how to animate GridView using JQuery. Check out the following code it's self-explanatory.
<%@ 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;
}
}
Tags:
ASP.NET