Calling a WebMethod with jQuery in ASP.NET WebForms

In this tutorial, I am going to show you how to call WebMethod with Jquery in ASP.NET WebForms. This post will cover a basic example to post form data using Jquery in ASP.NET.

Calling a WebMethod with jQuery in ASP.NET WebForms:

Let’s create a simple example.

Step 1 Create an ASP.NET Web Form Application:

Open Visual Studio and go to File>New>Project and create ASP.NET Web Application PostFormData

Choose an Empty Web Form Template as shown in the below image.

An empty application has been created.

Step 2: Add Web Form to the application.

Right Click on the Solution Explorer and add a WebForm called Default.aspx. Write the following code in the Default.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostFormData.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function PostData()
{
var vName=$("#txtName").val();

$.ajax({
type: "POST",
url: "/Default.aspx/Greeting",
data: '{"sName":"' + vName + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#lblGreeting").text(msg.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label id="lblGreeting" style="color:#000;font-size:25px;font-weight:bold">

</label>
<br />
<br />
<input type="text" id="txtName" />
<br />
<br />
<input type="button" id="btnPost" onclick="PostData();" value="Post" />
</div>
</form>
</body>
</html>[/code]
<h2><strong>Code Explanation:</strong></h2>
<strong>1-</strong> From the above if you will see the below code snippet:
[code]$.ajax({
type: "POST",
url: "/Default.aspx/Greeting",
data: '{"sName":"' + vName + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#lblGreeting").text(msg.d);
}
});
}

The url “”/Default.aspx/Greeting” is the name of WebForm and “Greeting” is the name of WebMethid.

Step 3: Declaring WebMethod in Code Behind:

Add the following namespace.

using System.Web.UI.WebControls

Add the following WebMethod in the Code Behind file.

[WebMethod]
public static string Greeting(string sName)
{
return "Hello "+sName;
}

Note: The WebMethod must be static.

Run the application:

View More:

Conclusion:

Hope you understand this tutorial. Please don’t hesitate to comment for any technical issue. Your feedback and suggestions would be helpful.

Thank You.

Debug On Web

Calling a WebMethod with jQuery in ASP.NET WebForms