Monday, December 14, 2009

Calling Code behind Function in java script [1- using page method ]

Today i was trying to access List of data to my js code in page i googled for the best solution in this case and i found a lot of solutions :

1- using ms ajax and access web services function 2- using wcf services and access it directly from js code 3- Simple solution using Page method

A) Definition for page method : - Is a public static method is in the code-behind of an aspx page and is callable from the client script. Decorated with the [WebMethod] attribute and rendered as inline JavaScript.

[System.Web.Services.WebMethod] public static string GetEmpName(string empid) { if (empid == "1") return "Mohamed"; else if (empid == "2") return "Ahmed"; else return "Waleed"; } A) Calling Page Method From JS Code :

1- Create 2 Text Box to simulate and show the results :

<h3>Enter The Employee ID Here: </h3> <asp:TextBox ID=”txtEmpID″ runat=”server”> </asp:TextBox> <br /> <asp:TextBox ID=”txtEmpName″ runat=”server” ReadOnly=”True”></asp:TextBox> <br /> <asp:Button ID="btnGetName" OnClick="return false;" runat="server" Text="Button"></asp:Button>

2- Add Java script function to call the page method and return the employee name :

<script language="javascript" type="text/jscript"> // Call the page method and run the success function function GetEmployeeName(parmValueControl ,returnValueControl ) { var ctrl = document.getElementById(parmValueControl); // call server side Function PageMethods.GetEmpName(ctrl .value, SuccessFunction, FailedFunction, returnValueControl); } // set the returnValueControl value with the ContactName function SuccessFunction(empName, returnValueControl) { var empNameVar = document.getElementById(returnValueControl); returnValueControl.value = empNameVar ; } // alert message on some failure function FailedFunction(returnedMessage, returnValueControl) { alert(returnedMessage.get_message()); } </script>

3- Add attributes OnClientClick to our button to call GetEmployeeName Function which call our code behind method:

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { btnGetName.Attributes.Add( "OnClientClick", "javascript:GetEmployeeName('" + txtEmpID.ClientID + "', '" + txtEmpName.ClientID + "')"); } }

3- Dont forget to add this attribute to your script manager :

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"/>

try now to run the page and click its button add 1,2 or 3 to the first text box and receive its value in employee name:) hope this post help a lot of people trying to passing values from c# code to show it in a their html.


  1. You should clean this up as I spent time going throught this only to find it didn't work, which is a shame as you're clearly well intentioned.

  2. This is something most interesting. Because, of course, the safety factor, moreover on the admin page, it is important to note. There must be no people who can ruin the page.

  3. This is amazing and wonderful site. These plants show slight movement when an external magnet is positioned close to them. Her experimental art practice was developed in an interdisciplinary capacity with the center. I love this site.

  4. Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.