Calling an ASP.NET Page Method Using jQuery
Calling an ASP.NET Page method using jQuery is easy and requires minimal code. For more information on how to write efficient jQuery code, see Dan Wahlin's articles, "5 Web Development Tips to Improve Your jQuery Coding" and "4 More Web Development Tips to Improve Your jQuery Coding." As an example, consider the following page method:
[WebMethod()]
public static string DisplayText()
{
return "aspNETPro ";
}
Here's how you can use jQuery to call this page method in your web form:
<head>
<title>Calling an ASP.NET Page Method with jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
url: "Default.aspx/DisplayText",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: OnSuccess,
error: OnFailure
});
});
function OnSuccess(result) {
alert("Success!");
}
function OnFailure (result)
{
alert("The call to the page method failed.");
}
</script>
</head>
When you execute the application, you'll see the message The first example using jQuery in ASP.NET displayed in the web browser.
<title>Getting Started</title> <script src="../Scripts/jquery-1.2.6.js" type="text/javascript"></script> </head>
Finally, add the following script in your web page:
<script type="text/javascript">
$(document).ready(function()
{
alert("The first example using jQuery in ASP.NET");
});
</script>
Here is the complete example:
<head runat="server">
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<title>Getting Started</title>
<script type="text/javascript">
$(document).ready(function()
{
alert("The first example using jQuery in ASP.NET");
});
</script>
</head>
<body>
<form id="frmjQuery" runat="server">
</form>
</body>
Consuming a Web Service Using jQuery
Consider the following web service:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class ASPNETProWebservice : System.Web.Services.WebService
{
[WebMethod()]
public string DisplayText()
{
return "aspNetPRO";
}
}
You can now consume the web service easily; here's the syntax:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServiceName.asmx/WebMethodName",
data: "{}",
dataType: "json"
});
Find Out More About jQuery
jQuery has fast become the JavaScript library of choice for building lightning-fast and responsive applications in no time. You can get more information on jQuery and how it can be used with ASP.NET in my upcoming book on ASP.NET jQuery (Packt Publishing). You can get updates on the book at my blog here: http://aspadvice.com/blogs/joydip.
Joydip Kanjilal ([email protected]) is a Microsoft MVP in ASP.NET. He has more than 12 years of industry experience in IT with more than six years in Microsoft .NET and its related technologies.
