ASP.NET Podcast Show #11 - Intro to Ajax and the Ajax Library for .NET
Note (Added on 9/11/2005): Check out the Interview with Michael Schwartz in Show #15.
Show Notes:
- Jesse James Garrett’s original essay on Ajax.
- XMLHttpRequest Object documentation for Firefox.
- Microsoft’s XML Dom Document Object.
- Ajax Library for .NET.
- Scott Guthrie's blog about Atlas/Ajax.
- Javascript debugging for Firefox.
- Nikhil Kothari’s HttpDebugging tool.
- www.ajaxinfo.com
- Software as she’s developed Ajax Podcast.
- Scott Cate’s Site.
Before looking at the code samples, understand that the client ids may not be 100% accurate in all situations. It is best to use the ClientId property of the necessary controls to get the appropriate property name.
Code Sample (basic
Client Site Code:
function sState2_onchange() {
var iStateIndex = document.forms[0].sState2.selectedIndex;
var sValue = document.forms[0].sState2[iStateIndex].value;
AjaxFunctions.GetCityRecords(sValue, GetCityRecords_CallBack);
}
function GetCityRecords_CallBack(response){
var ds = response.value;
var i = 0;
var iLength = 0;
if (response.error != null){
alert(response.error);
return;
}
if ((ds.Tables != null) && (ds.Tables[0].Rows.length > 0))
{
iLength = document.getElementById("sCity2").options.length;
document.getElementById("sCity2").visible = true;
for(i=0; i<iLength; i++)
{
document.getElementById("sCity2").options[0] = null;
}
for(i=0; i<ds.Tables[0].Rows.length; i++)
{
document.getElementById("sCity2").options.add(new Option(ds.Tables[0].Rows[i]["City"],ds.Tables[0].Rows[i]["tblCityId"]))
}
}
else
{
alert("Error: " + response.request.responseText);
document.getElementById("sState2").visible = false;
}
}
Server Side Code:
[Ajax.AjaxMethod()]
public System.Data.DataSet GetCityRecords(int iState)
{
int i = 0;
DataSet ds = new DataSet();
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("tblCityId", System.Type.GetType("System.Int32")));
dt.Columns.Add(new DataColumn("City", System.Type.GetType("System.String")));
if (iState == 1)
{
dr = dt.NewRow();
dr["tblCityId"] = 1;
dr["City"] = "
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["tblCityId"] = 2;
dr["City"] = "
dt.Rows.Add(dr);
ds.Tables.Add(dt);
}
return (ds);
}
Code Sample (html control from server)
Client Side Code:
function sState3_onchange(stateid){
HtmlControlUpdate('AjaxFunctions.ReturnCitys', 'City3Display', stateid);
}
Server Side Code:
[Ajax.AjaxMethod()]
public System.Web.UI.HtmlControls.HtmlSelect ReturnCitys(string State)
{
System.Web.UI.HtmlControls.HtmlSelect ctrl = new System.Web.UI.HtmlControls.HtmlSelect();
ctrl.ID = "sCity3";
ctrl.Attributes.Add("onchange", "alert('hi');");
if (State == "1")
{
ctrl.Items.Add(String.Empty);
ctrl.Items.Add(new ListItem("
ctrl.Items.Add(new ListItem("
}
return ctrl;
}