Calling Code behind Function in JavaScript

In this article we see how to call C# Function from JavaScript.

Today I was trying to access a list of data from my JavaScript code in an ASP.Net page; I Googled for the best solution for this and I found many solutions:

1. Using Micorosoft AJAX and access web services function 
2. Using WCF services and access it directly from JavaScript code 
3. Simple solution using Page method

A) Definition for page method: - It is a public static method 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";

 elseif (empid == "2")

 return "Ahmed"; else return "Waleed"; } 

A) Calling Page Method From JavaScript Code :

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

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

2- Add JavaScript 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

 functionGetEmployeeName(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- Don't 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 article helps a lot of people trying to pass values from C# code to show in a their html.