Home > .Net Technologies, ASP.Net, C#/VB.Net, CodeProject > ASP.Net Ajax Callbacks to: Web Service and ASP.Net Page’s Web Methods

ASP.Net Ajax Callbacks to: Web Service and ASP.Net Page’s Web Methods

Today we will see how ASP.Net Ajax callback feature can help us call methods defined in Web Service and ASP.Net page. ScriptService and ScriptMethod are two new attributes in ASP.Net Ajax framework library that helps calling web service and web page web methods respectively.
Let’s see it one by one in the following examples.

First, create a simple web service project called ASPAjaxService.asmx. Define a web method as given below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace ASPAjaxService
{
/// <summary>
/// Summary description for ASPServiceMethods
/// </summary>
[WebService(Namespace = “http://tempuri.org/&#8221;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script,
// using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ASPServiceMethods : System.Web.Services.WebService
{
//
[WebMethod(true)]
public string WebServiceMethod()
{
return “Example: Consuming a web service using ASP.Net Ajax.”;
}
}
}
See the ScriptService attribute that is applied to Class declaration ASPServiceMethods. This indicates that a web service can be invoked from script. In fact, it provides a JavaScript proxy class corresponding to the web service in order to call the web service web methods. Now to test this service, let’s view our *.asmx in browser. Probably, we may see url as: http://localhost:49487/ASPAjaxService.asmx. The port number may vary, but we are now ready to test  WebServiceMethod web method. Before this, change the url as: http://localhost:49487/ASPAjaxService.asmx/js and hit [Enter]. It will return a proxy code of JavaScript. We may save it to our project folder to see its details. This is result of ScriptService attribute.

Now, create a simple ASP.Net application and add this existing web service project to this application. Modify the Default.aspx markup as:

<head runat=”server”>
<title>ASP.Net Ajax CallBack</title>
<script type=”text/javascript” language=”javascript” src=”javascript_ajax_asp_net.js”></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager runat=”server” ID=”ScriptManager1″ EnablePageMethods=”true”>
<Services>
<asp:ServiceReference InlineScript=”false” Path=”~/ASPAjaxService.asmx”/>
</Services>
</asp:ScriptManager>
<div>
[Invoke Web Method] – Make a call to Web Method in web service: ASPAjaxService.asmx<br /><br />
<input type=”button” id=”BtnCallWebMethod” value=”Invoke Web Method” onclick=”return CallWebServiceMethod();” /><br /><br />
[Invoke Web Method defined in UI.Page] – Make a call to Page Method in Default.aspx<br /><br />
<input type=”button” id=”BtnPageMethod” value=”Invoke Web Method defined in UI.Page” onclick=”return CallPageMethods();” />
</div>
</form>
</body>
</html>

See the <asp:ScriptManager/> tag section. ServiceReference registers the web service mentioned in Path attribute for use in a web page.  Path can only point to local web service, i.e.; in the same domain.

InlineScript value can be either true or false. Toggle its value, view Default.aspx in browser, view its html source and save it. Compare the size of two files. You will see a remarkable difference. When InlineScript is set to true, the proxy javascript code is generated and rendered directly in the page for each request. Due to this, the page can not be cached for similar request and page size is also larger.

But in our example, we have set this property to false and added src=”javascript_ajax_asp_net.js”.  It has required functions to fulfil our purpose. But one may compare and see both the proxy and current *.js file. In this case, we can definitely benefit from browser caching and shorter page load time!

The javascript file has following code.

//Webservice web methods
function CallWebServiceMethod() {
ASPAjaxService.ASPServiceMethods.set_timeout(1000);
ASPAjaxService.ASPServiceMethods.WebServiceMethod(onSuccess, onFailed, “Caller Context”);
}
function onSuccess(result, usercontext) {
alert(result + ” – ” + usercontext);
}
function onFailed(result, usercontext) {
var failed_message = “Some error occured while calling the web method.”;
alert(failed_message + ” : ” + usercontext);
}
//PageMethods
function CallPageMethods() {
PageMethods.WebMethodInPage(onSuccessfulPageCall, onFailed, “Caller Context:System.Web.UI.Page”);
}
function onSuccessfulPageCall(result, usercontext) {
alert(result + ” – ” + usercontext);
}
We have not done yet.  We are still one step away from calling a web method in ASP.Net page.

Add this method in code behind of our ASP.Net page as given below.

[WebMethod(true)]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static string WebMethodInPage()
{
//
return “I am in Page Method.”;
}
Run the page and call each web method.  We are able to call ASP.Net page method due to ScriptMethod attribute for WebMethodInPage() method and EnablePageMethods=”true” in ScriptManager class property. ScriptManager.EnablePageMethods property when set to true enables public static web method in page to be called by javascript.

That’s all! Happy coding!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: