Asynch Web Services

24 Apr, 2009 AJAX,ASP.NET

So sometimes the hardest part of doing any development task is just getting a few configuration lines setup and then you can delve in and get the tasks accomplished. The same is true with AJAX. AJAX is a nice way of interacting with the server without doing a full roundtrip to the server. It allows you to do partial rendering of a portion of a page and opens the door for many slick effects in the process.So, in order to setup the interaction to a web services file in .NET there are a few steps you need to take:

  1. Create a Web Services File and modify it for asynchronous callbacks
  2. Create your Web Page and Reference the Web Services file so it can be called by Client Side Javascript
  3. Call the web service through client side Javascript

Sounds easy right, well it is but if you don’t know what you are doing it can be a headache so hopefully this will save somebody a ton of time.

  1. Open Visual Studio and Your Web Project
  2. Right click on your Project in Solution Explorer and Select “Add New Item”
  3. Select “Web Service” and name it MyWebService.asmx
  4. Click Add
  5. You will notice that there is a default method called HelloWorld() that returns the value “Hello World”
  6. Uncomment the Line that says

‘ <System.Web.Script.Services.ScriptService()> _

Now we need to prepare the page that will do the asynchronous callback.

  1. Open the page you want to make asynchronous
  2. Within the <form> tag you need to add a script manager to the page the code should look like this….

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”> <Services> <asp:ServiceReference Path=”~/MyWebService.asmx” /> </Services></asp:ScriptManager>* If when you created your Web Service file you made it an INLINE SCRIPT meaning it does not have separate code behind file then it would be <asp:ServiceReference InlineScript=”true” Path=”~/MyWebService.asmx” />

Now let’s create a button to call the asynch script and something to show the partial rendering.Add this code in the body of your page inside the <div> tags that are there.

<span id=”MyOutputSpan”></span><br /> <input type=”button” id=”btnGetAsynch” value=”Get Asynch” onclick=”GetAsynch()” />

Now let’s write the Javascript Method to CALL the server side event. Add this code to your HEAD file.

<script type=”text/javascript”> function GetAsynch() { MyWebService.HelloWorld(writeResult); } function writeResult(result, args) { var MyOutput = document.getElementById(‘MyOutputSpan’); MyOutput.innerHTML = result; } </script>

The first method is what is called by the button click event. It goes out to the web server and calls the Hello World method, the “writeResult” is it’s onSuccess event which calls the writeResult method which then writes the world to the <span> tag we created. Now build and run your solution.You will see Hello World show up in your span, nothing fancy but you know where to go from here. Go ahead and change Hello World to whatever you want on the back end to prove it to yourself. You can see the round trip in tools like Firebug.In the next iteration we will show databinding in the web service, serialization, and parsing in javascript so stay tuned….

Comments are closed.