ASP.NET Podcast Show sharp 11 - Intro to Ajax and the Ajax Library for .NET ...

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 Ajax)

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"] = "Knoxville";

                  dt.Rows.Add(dr);

                  dr = dt.NewRow();

                  dr["tblCityId"] = 2;

                  dr["City"] = "Nashville";

                  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("Knoxville", "1"));

                  ctrl.Items.Add(new ListItem("Nashville", "2"));

            }

            return ctrl;

      }
source: weblogs

 View Full Story.