Post
Ask Question

Calling Server Side Function From JavaScript In ASP.NET

In this article we will see how to call a server-side function from JavaScript in ASP.Net. Many developers, when they work on a project, get similar requirements in their projects. To do that you can use AJAX to communicate with the server-side method. I demonstrate the client-side of using AJAX in the following code.

I will now discuss the server-side function and how to call it in JavaScript.

Server Code (.cs file)

In the following code we create a method named "Name" and his return type is string.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8.    
  9. public partial class Default2 : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.     }  
  14.    
  15.     [WebMethod]  
  16.     public static string Name()  
  17.     {  
  18.         string Name = "Hello Rohatash Kumar";  
  19.         return Name;  
  20.     }  
  21. }  

The preceding server-side code shows the attribute [WebMethod] and Declaration (static).

[WebMethod]

To make use of this "[WebMethod]" attribute you need to use the "System.Web.Services" namespace as shown in the preceding server-side code. The attach the "[WebMethod]" attribute to a server-side method to make the method callable from remote Web clients. To learn More

Static (Declaration)

A static method is callable on a class even when no instance of the class has been created. If any instances of the class are created then they cannot be used to access the static member. Only one copy of static fields and events exist. This static method can be accessed directly by the name of the static method followed by the "." (dot) operator and the class name. So that's why I marked the method as static. It cannot interact with the instance properties and methods of your Page class, because a Page method call creates no instance of the Page or any of its controls.

Client Code( .aspx code)

The client side code has the following control and properties on the page.

ScriptManager Control

The EnablePageMethods property of the ScriptManager Control indicates whether public static page methods in an ASP.NET page can be called from a client script. The EnablePageMethods attribute must be added on the ScriptManager tag as true.

Button Control

Drag and drop a Button control onto the form to show the message when you click on the Button.

OnClientClick Method

The "OnClientClick" event will be associated with the JavaScript function.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script type='text/javascript'>  
  8.             function GetName() {  
  9.                 PageMethods.Name(Success, Failure);  
  10.             }  
  11.   
  12.             function Success(result) {  
  13.                 alert(result);  
  14.             }  
  15.   
  16.             function Failure(error) {  
  17.                 alert(error);  
  18.             }  
  19.         </script>  
  20.     </head>  
  21.   
  22.     <body>  
  23.         <form id="form1" runat="server">  
  24.             <asp:ScriptManager ID='ScriptManager1' runat='server' EnablePageMethods='true' />  
  25.             <div>  
  26.                 <asp:Button ID="Button1" runat="server" Text="Get Name" OnClientClick='GetName();return false;' /> </div>  
  27.         </form>  
  28.     </body>  
  29.   
  30.     </html>  

The code above defines how to call a server-side function named "Name".

If there are no errors then "Success" will show a pop-up window with our server-side message text.

  1. function Success(result) {  
  2.     alert(result);  
  3. }  

 

Else, the pop-up will show an exception message.

  1. function Failure(error) {  
  2.     alert(error);  
  3. }  

 

Now press F5 to run the application.

Calling-Server-Side-Function-from-JavaScript-1.jpg
Now click on the Button control to see the server-side code message.

Calling-Server-Side-Function-from-JavaScript-2.jpg


Similar Articles