How to call a serverside method in ASP.NET using javascript

Sometime we need to do something on client side, no postback will be there for that we can call server side method from client side.

For example I need information for binding a drop down to bind another drop down.

on change of drop down I will call javascript function.

<asp:dropdown id=ddlDropdown runat=server/>

on page load

ddlDropdown.Attributes.Add("onchange","callMethod();")

<script langauge=javascript type="text/javascript">

function callMethod()

{

var pkval = Document.getElementbyId("ddlDrop").value;

PageMethods.FindData(pkVal,OnSucceeded,OnFailed);//finddata is serverside static method.

}

function OnSucceeded(result)

    {

         FillData(result);       

     }

   

    

    function OnFailed(error, userContext, methodName)

    {

       

 alert("failure")  ;  

    }

</script>

on serverside

add namespace

using System.Web.Services;

write code for that method

  [WebMethod]//must be there or without adding using System.Web.Services; you directly add here

[System.Web.Services.WebMethod]

public static string RetriveData(string args)

        {

  int id = convert.Toint32(args);

//create a dataset use sql query like (where pkid = id)from another table

// remember the column will be your xml node so you can rename in your query like like pk_primary as pk

 DataSet dsData= //add code as your requirement

//after creating dataset convert to xml

 dsData.DataSetName = "CONTROLS";

            XmlDataDocument xDoc = new XmlDataDocument(dsData);

            string xml = xDoc.OuterXml;

            xml = xDoc.InnerXml;

            return xml;

}

result xml file does to here

function OnSucceeded(result)

    {

         FillData(result); // call another function      

     }

function FillData(xmlVal)

{

  //find the node values

  var doc=new ActiveXObject("Microsoft.XMLDOM");

        doc.async="false";

        doc.loadXML(result);

  var controls = doc.getElementsByTagName('Table');

 for(var i = 0; i < controls.length ; i++)

            {

var Contol_type = controls[i].getElementsByTagName('columnname as you assign in query in serverside')[0].childNodes[0].nodeValue;

//assign that Contol_type  to a another control or dropdown

            }

}

This is an example of how to call serverside method.