The sample outputs a dynamic table on a page based on database's contents with the help of AJAX.
This ASP.NEt example, as any other, contains the .aspx page's code followed by the code-behind c#
file's code
.aspx page
============
<body onload="BindControls();">
<form id="Form1" runat="server">
<P><input id="MyButton" onclick="FillTable();" type="button" value="Get Data"/></P>
<P>
<span id="Display"></span>
<span id="Display1"></span>
</p>
</form>
<script language="javascript" type="text/javascript">
function GetResult(categoryID)
{
GridBind.GetProductsByID(categoryID,GetResult_CallBack);
}
function GetResult_CallBack(response)
{
var ds = response.value;
if(ds!=null && typeof(ds) == "object" && ds.Tables!=null)
{
var s = new Array();
s[s.length] = "<table border = 1>";
s[s.length]="<tr bgcolor='#CCCCCC'><td><h3>Category ID</h3></td><td><h3>Category Name</h3></td><td><h3>Description</h3></td><td><h3>Edit</h3></td></tr>";
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductID + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].ProductName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].QuantityPerUnit + "</td>";
s[s.length] = "<td><a href='#'>Edit</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
document.getElementById("Display1").innerHTML = s.join("");
}
}
function ChangeListValue(index)
{
GetResult(index);
}
function BindControls()
{
FillDropDownList();
}
function FillDropDownList()
{
GridBind.GetDropDownListData(FillDropDownList_CallBack);
}
function FillDropDownList_CallBack(response)
{
var ds = response.value;
var html = new Array();
if(ds!= null && typeof(ds) == "object" && ds.Tables!= null)
{
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
html[html.length] = "<option value=" + ds.Tables[0].Rows[i].CategoryID + ">" + ds.Tables[0].Rows[i].CategoryName + "</option>";
}
document.getElementById("Display").innerHTML = "<select id=\"sel\" onchange=\" ChangeListValue(this.options[this.selectedIndex].value); \">" + html.join("") + "</select>";
}
}
function FillTable()
{
document.getElementById("Display1").innerHTML = "";
GridBind.GetDataSet(FillTable_CallBack);
}
function FillTable_CallBack(response)
{
var ds = response.value;
if(ds!=null && typeof(ds) == "object" && ds.Tables!=null)
{
var s = new Array();
s[s.length] = "<table border = 1>";
s[s.length]="<tr bgcolor='#CCCCCC'><td><h3>Category ID</h3></td><td><h3>Category Name</h3></td><td><h3>Description</h3></td></tr>";
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].CategoryID + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].CategoryName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].Description + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
document.getElementById("Display1").innerHTML = s.join("");
}
}
</script>
</body>
.cs file
==========
public partial class GridBind : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(GridBind));
}
private string GetConnectionString()
{
string connectionString = @"Server=server;Database=Northwind;uid=sa;pwd=";
return connectionString;
}
[Ajax.AjaxMethod]
public DataSet GetDropDownListData()
{
string query = "SELECT CategoryID,CategoryName FROM Categories ";
SqlConnection myConnection = new SqlConnection(GetConnectionString());
SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);
DataSet ds = new DataSet();
ad.Fill(ds, "Categories");
return ds;
}
[Ajax.AjaxMethod]
public DataSet GetProductsByID(int categoryID)
{
string query = "SELECT * FROM Products WHERE CategoryID = @CategoryID ";
SqlConnection myConnection = new SqlConnection(GetConnectionString());
SqlCommand myCommand = new SqlCommand(query, myConnection);
myCommand.Parameters.Add("@CategoryID", categoryID);
SqlDataAdapter ad = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
ad.Fill(ds);
return ds;
}
[Ajax.AjaxMethod]
public DataSet GetDataSet()
{
string query = "SELECT * FROM Categories";
SqlConnection myConnection = new SqlConnection(GetConnectionString());
SqlDataAdapter ad = new SqlDataAdapter(query, myConnection);
DataSet ds = new DataSet();
ad.Fill(ds, "Categories");
return ds;
}
}
|
No responses found. Be the first to respond and make money from revenue sharing program.
|