Call webservice method in client side using AJAX with ASP.NET

Introduction
In this article have details about to call server side methods in client side.Now days AJAX is most help to partial post back websites.

Download Source Code-CS

Expected Result

Implementation

To this I have to create a web project using Visual studio 2008.Open visual studio 2008 and click New Project link in start page and then navigate to visual C#, and then select the Web node. Under then web collection select ASP.NET web application and give name as CallServerMethodInClientWithAJAX.see following figure to more details.

Now we need do fews steps to complete the implementation

Step-01

First you add new web service class in web project. Right click In project -> then select add New Item -> and then select the web service template from the collection and give name as “CodegainService.asmx”. To more details refer the folloings figure.

Step-02

Now need enable the scriptService attribute to the webservice class.It’s normall commentd when we add new web service to the project .

{codecitation class="brush: csharp; gutter: true;" width="650px"}

// 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 CodeGainDemoService : System.Web.Services.WebService
{
}

{/codecitation}

After we uncomment the scriptService attribute,it is look like followings
{codecitation class="brush: csharp; gutter: true;" width="650px"}

// 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 CodeGainDemoService : System.Web.Services.WebService
{
}

{/codecitation}

When you are not un comment you will get error “Your project name is undefined”.its means say our porject name is CG.CS.CallServerMethodInClientWithAJAX.So when I’m not un comment [System.Web.Script.Services.ScriptService] client side error say “CG is undefined”.

Step-3

Now write a small webmethod inside the web service class.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

public class CodeGainDemoService : System.Web.Services.WebService
{
[WebMethod]
public string PrintMe()
{
return "Welcome to Codegain.com";
}

}

{/codecitation}

Above method just return a string when we are call.

Complete code for CodeGainbDemoService.cs

{codecitation class="brush: csharp; gutter: true;" width="650px"}

using System.Web.Services;

namespace CG.CS.CallServerMethodInClientWithAJAX
{
///

Step-4
Now lets move the default.aspx page design view.If you have isntalled AJAX in youtr PC you can see few components under the AJAX Extensions tab in your Visual Studio tool Box.to more detail refer followings figure.

Step-5
Now click on the tool box and select the Script Manager control and place in side the Page.like following html code.

{codecitation class="brush: plain; gutter: true;" width="650px"}

Now add Service reference to the Script manager control.

{codecitation class="brush: html; gutter: true;" width="650px"}

{/codecitation}

Then add a text box and button to display the result in textbox when we call the service method by call javascript with button click.

{codecitation class="brush:plain; gutter: true;" width="650px"}

Step-6

Now we have designed a simple and added AJAX script manager also. Now we write java scripts function to call the service methods.

{codecitation class="brush: javascript; gutter: true;" width="650px"}

function PrintCodeGain() {
CG.CS.CallServerMethodInClientWithAJAX.CodeGainDemoService.PrintMe(SucceededCallback);
}

function SucceededCallback(result) {
var RsltElem = document.getElementById("txtName");
RsltElem.value = result;
}

{/codecitation}

The first fucntion is just call the service method.after we called the PrintMe() method its allow to send a callback delegate as argument to display result in textbox. SucceededCallback() is always to accept the resutl argument and display result whe you have set it.

Then call the javascript function to onclick event in the button .

{codecitation class="brush: plain; gutter: true;" width="650px"}

{/codecitation}

Complete code for the page design

{codecitation class="brush: html; gutter: true;" width="650px"}










function PrintCodeGain() {
CG.CS.CallServerMethodInClientWithAJAX.CodeGainDemoService.PrintMe(SucceededCallback);
}

function SucceededCallback(result) {
var RsltElem = document.getElementById("txtName");
RsltElem.value = result;
}

if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Now we have fnished all code and design steps.final steps is testing. To this Press F5 and run the application.Then click “Call Server Method” button it’s print message in textbox “welcome to codegain.com”.

Conclusion

In this article I have given the detail about to call serice methods in client side using th AJAX.its most help to all asp.ner web developers. In the next article I will give the details about use the PageMethods.
That’s you for reading. Thank you