Let’s say you have a webpage where you need to call a service but cannot perform a post back. Recently I was on a client engagement where we needed to improve page performance by dynamically loading a navigation tree with a potential for several thousand links. We implemented a solution that would load each branch as the user clicked on the expanding icon by calling a web service via ajax and passing the required links back to the page and render them client side. This saved immensely on the load time for the page and improved the user experience
This kind of solution can be applied to several situations such as complex data processing, dynamic loading, or combining them all into a seamless form submission process that would clear the form on post backs.
We can accomplish this process simply by grabbing an event, such as a button click, and collecting all the required information using jQuery. Next using a JSON call, we can pass all the parameters to the web service and execute our code from there.
Here, I’ll start with a simple .aspx page with jquery, a textbox, and link that will be used to call the web service.
1: <%@ Master Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ThisPage.cs" Inherits="ThisSolution.ThisProject.ThisFolder" %>
2:
3: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
4: <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"/>
5: </asp:Content>
6:
7: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8: <asp:TextBox ID=”textBox” TextMode="MultiLine" runat="server"></asp:TextBox>
9: <a href="#" class="buttonClass"> Save </a> 10: <asp:Label ID=”successLabel” runat="server"></asp:Label>
11: </asp:Content>
Next, you will need to establish your web service and create an .asmx file. There are a couple of important things to note here. Line 5 will be by default commented out. So in order for us to make our JSON call we’re going to need this uncommented. Also, notice I’m returning a string. For the purposes of this demo I am going to return a string to the UI and display a message, but you can return any kind of object that can be serialized down to a primitive data type.
1: [WebService(Namespace = "http://tempuri.org/")]
2: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
3: [System.ComponentModel.ToolboxItem(false)]
4: // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
5: [System.Web.Script.Services.ScriptService]
6: public class wService : System.Web.Services.WebService
7: {
8: [WebMethod()]
9: [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
10: public string UpdateComment(string textBoxText)
11: {
12: var success = Service.CallToDb(textBoxText);
13:
14: if(success)
15: {
16: return "Call to Database using text was successful";
17: }
18: else
19: {
20: return "Call to Database using text was not successful";
21: }
22: }
23: }
I use a jQuery selector to pick up on the mouse click of the link and gather our data into an javascript object. Note that when passing parameters through this object you have to name them the same way as you do in the parameter declaration of the web service.
When setting up the call to the service you’re going to want to remember to call the “JSON.stringify” function on your data object so that it serializes properly and that your contentType as well as dataType are configured properly as well.
1: <script type='text/javascript>
2: $('.buttonClass').live('click', function(){
3: var text = $('#textBox').text();
4: var data = new Object();
5: data.textBoxText = text;
6:
7: $.ajax({
8: type: "POST",
9: url: "/Ajax/WbServcie.asmx/UpdateComment",
10: data: JSON.stringify(data),
11: contentType: "application/json; charset=utf-8",
12: dataType: "json",
13: success: function(msg){
14: $('#successLabel').val(msg);
15: },
16: error: function(msg){
17: alert('Something, somewhere, has gone terribly wrong');
18: return false;
19: }
20: });
21: </script>
Once you get a response from the service, you can set any of your data that is returned. In this case, we’re returning a string indicating the call to the database was successful and will set a label on the page to show that.
And that’s it. With just a few simple configurations we have a quick call back to the server without having to run an expensive post back.