Calling Server Side Function From JavaScript In ASP.NET

Rohatash Kumar

JavaScript WebMethodScriptManager ControlEnablePageMethods propertyOnClientClick Method

9 Comments

Join the conversation! Your thoughts help the community grow.

sunil kumar5y ago
Uncaught ReferenceError: PageMethods is not defined
Umashankar Rajpoot7y ago
How to call c# code behind non static method using jquery ajax
Sagar Pandurang Kap9y ago
Awesome Article.....
Amar Srivastava9y ago
If we are not allowed to make the Name() method static then how will we do implement this.
kalu singh rao10y ago
Nice...
Humayun Kabir Mamun10y ago
Nice...
Ashish11y ago
How will you call a method which is not static and public ?
Manish Jain12y ago
Whenever i am pressing the button it shows an error that PageMethods is undefined. Please Clear my doubt.
- never_again12y ago
  I'm using jQuery's $.ajax for that. Works like a charm.

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string Name()
{
string Name = "Hello Rohatash Kumar";
return Name;
}
}

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type='text/javascript'>
function GetName() {
PageMethods.Name(Success, Failure);
}
function Success(result) {
alert(result);
}
function Failure(error) {
alert(error);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID='ScriptManager1' runat='server' EnablePageMethods='true' />
<div>
<asp:Button ID="Button1" runat="server" Text="Get Name" OnClientClick='GetName();return false;' /> </div>
</form>
</body>
</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.

function Success(result) {
alert(result);
}

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

function Failure(error) {
alert(error);
}

Now press F5 to run the application.

Now click on the Button control to see the server-side code message.