Using jQuery to POST Form Data to an ASP.NET ASMX AJAX Web Service
- by Rick Strahl
The other day I got a question about how to call an ASP.NET ASMX Web Service or PageMethods with the POST data from a Web Form (or any HTML form for that matter). The idea is that you should be able to call an endpoint URL, send it regular urlencoded POST data and then use Request.Form[] to retrieve the posted data as needed. My first reaction was that you can’t do it, because ASP.NET ASMX AJAX services (as well as Page Methods and WCF REST AJAX Services) require that the content POSTed to the server is posted as JSON and sent with an application/json or application/x-javascript content type. IOW, you can’t directly call an ASP.NET AJAX service with regular urlencoded data. Note that there are other ways to accomplish this. You can use ASP.NET MVC and a custom route, an HTTP Handler or separate ASPX page, or even a WCF REST service that’s configured to use non-JSON inputs. However if you want to use an ASP.NET AJAX service (or Page Methods) with a little bit of setup work it’s actually quite easy to capture all the form variables on the client and ship them up to the server. The basic steps needed to make this happen are: Capture form variables into an array on the client with jQuery’s .serializeArray() function Use $.ajax() or my ServiceProxy class to make an AJAX call to the server to send this array On the server create a custom type that matches the .serializeArray() name/value structure Create extension methods on NameValue[] to easily extract form variables Create a [WebMethod] that accepts this name/value type as an array (NameValue[]) This seems like a lot of work but realize that steps 3 and 4 are a one time setup step that can be reused in your entire site or multiple applications. Let’s look at a short example that looks like this as a base form of fields to ship to the server: The HTML for this form looks something like this: <div id="divMessage" class="errordisplay" style="display: none">
</div>
<div>
<div class="label">Name:</div>
<div><asp:TextBox runat="server" ID="txtName" /></div>
</div>
<div>
<div class="label">Company:</div>
<div><asp:TextBox runat="server" ID="txtCompany"/></div>
</div>
<div>
<div class="label" ></div>
<div>
<asp:DropDownList runat="server" ID="lstAttending">
<asp:ListItem Text="Attending" Value="Attending"/>
<asp:ListItem Text="Not Attending" Value="NotAttending" />
<asp:ListItem Text="Maybe Attending" Value="MaybeAttending" />
<asp:ListItem Text="Not Sure Yet" Value="NotSureYet" />
</asp:DropDownList>
</div>
</div>
<div>
<div class="label">Special Needs:<br />
<small>(check all that apply)</small></div>
<div>
<asp:ListBox runat="server" ID="lstSpecialNeeds" SelectionMode="Multiple">
<asp:ListItem Text="Vegitarian" Value="Vegitarian" />
<asp:ListItem Text="Vegan" Value="Vegan" />
<asp:ListItem Text="Kosher" Value="Kosher" />
<asp:ListItem Text="Special Access" Value="SpecialAccess" />
<asp:ListItem Text="No Binder" Value="NoBinder" />
</asp:ListBox>
</div>
</div>
<div>
<div class="label"></div>
<div>
<asp:CheckBox ID="chkAdditionalGuests" Text="Additional Guests" runat="server" />
</div>
</div>
<hr />
<input type="button" id="btnSubmit" value="Send Registration" />
The form includes a few different kinds of form fields including a multi-selection listbox to demonstrate retrieving multiple values.
Setting up the Server Side [WebMethod]
The [WebMethod] on the server we’re going to call is going to be very simple and just capture the content of these values and echo then back as a formatted HTML string. Obviously this is overly simplistic but it serves to demonstrate the simple point of capturing the POST data on the server in an AJAX callback.
public class PageMethodsService : System.Web.Services.WebService
{
[WebMethod]
public string SendRegistration(NameValue[] formVars)
{
StringBuilder sb = new StringBuilder();
sb.AppendFormat("Thank you {0}, <br/><br/>",
HttpUtility.HtmlEncode(formVars.Form("txtName")));
sb.AppendLine("You've entered the following: <hr/>");
foreach (NameValue nv in formVars)
{
// strip out ASP.NET form vars like _ViewState/_EventValidation
if (!nv.name.StartsWith("__"))
{
if (nv.name.StartsWith("txt") || nv.name.StartsWith("lst") || nv.name.StartsWith("chk"))
sb.Append(nv.name.Substring(3));
else
sb.Append(nv.name);
sb.AppendLine(": " + HttpUtility.HtmlEncode(nv.value) + "<br/>");
}
}
sb.AppendLine("<hr/>");
string[] needs = formVars.FormMultiple("lstSpecialNeeds");
if (needs == null)
sb.AppendLine("No Special Needs");
else
{
sb.AppendLine("Special Needs: <br/>");
foreach (string need in needs)
{
sb.AppendLine(" " + need + "<br/>");
}
}
return sb.ToString();
}
}
The key feature of this method is that it receives a custom type called NameValue[] which is an array of NameValue objects that map the structure that the jQuery .serializeArray() function generates. There are two custom types involved in this: The actual NameValue type and a NameValueExtensions class that defines a couple of extension methods for the NameValue[] array type to allow for single (.Form()) and multiple (.FormMultiple()) value retrieval by name.
The NameValue class is as simple as this and simply maps the structure of the array elements of .serializeArray():
public class NameValue
{
public string name { get; set; }
public string value { get; set; }
}
The extension method class defines the .Form() and .FormMultiple() methods to allow easy retrieval of form variables from the returned array:
/// <summary>
/// Simple NameValue class that maps name and value
/// properties that can be used with jQuery's
/// $.serializeArray() function and JSON requests
/// </summary>
public static class NameValueExtensionMethods
{
/// <summary>
/// Retrieves a single form variable from the list of
/// form variables stored
/// </summary>
/// <param name="formVars"></param>
/// <param name="name">formvar to retrieve</param>
/// <returns>value or string.Empty if not found</returns>
public static string Form(this NameValue[] formVars, string name)
{
var matches = formVars.Where(nv => nv.name.ToLower() == name.ToLower()).FirstOrDefault();
if (matches != null)
return matches.value;
return string.Empty;
}
/// <summary>
/// Retrieves multiple selection form variables from the list of
/// form variables stored.
/// </summary>
/// <param name="formVars"></param>
/// <param name="name">The name of the form var to retrieve</param>
/// <returns>values as string[] or null if no match is found</returns>
public static string[] FormMultiple(this NameValue[] formVars, string name)
{
var matches = formVars.Where(nv => nv.name.ToLower() == name.ToLower()).Select(nv => nv.value).ToArray();
if (matches.Length == 0)
return null;
return matches;
}
}
Using these extension methods it’s easy to retrieve individual values from the array:
string name = formVars.Form("txtName");
or multiple values:
string[] needs = formVars.FormMultiple("lstSpecialNeeds");
if (needs != null)
{
// do something with matches
}
Using these functions in the SendRegistration method it’s easy to retrieve a few form variables directly (txtName and the multiple selections of lstSpecialNeeds) or to iterate over the whole list of values. Of course this is an overly simple example – in typical app you’d probably want to validate the input data and save it to the database and then return some sort of confirmation or possibly an updated data list back to the client.
Since this is a full AJAX service callback realize that you don’t have to return simple string values – you can return any of the supported result types (which are most serializable types) including complex hierarchical objects and arrays that make sense to your client code.
POSTing Form Variables from the Client to the AJAX Service
To call the AJAX service method on the client is straight forward and requires only use of little native jQuery plus JSON serialization functionality. To start add jQuery and the json2.js library to your page:
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
json2.js can be found here (be sure to remove the first line from the file):
http://www.json.org/json2.js
It’s required to handle JSON serialization for those browsers that don’t support it natively.
With those script references in the document let’s hookup the button click handler and call the service:
$(document).ready(function () {
$("#btnSubmit").click(sendRegistration);
});
function sendRegistration() {
var arForm = $("#form1").serializeArray();
$.ajax({ url: "PageMethodsService.asmx/SendRegistration",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ formVars: arForm }),
dataType: "json",
success: function (result) {
var jEl = $("#divMessage");
jEl.html(result.d).fadeIn(1000);
setTimeout(function () { jEl.fadeOut(1000) }, 5000);
},
error: function (xhr, status) {
alert("An error occurred: " + status);
}
});
}
The key feature in this code is the $("#form1").serializeArray(); call which serializes all the form fields of form1 into an array. Each form var is represented as an object with a name/value property. This array is then serialized into JSON with:
JSON.stringify({ formVars: arForm })
The format for the parameter list in AJAX service calls is an object with one property for each parameter of the method. In this case its a single parameter called formVars and we’re assigning the array of form variables to it.
The URL to call on the server is the name of the Service (or ASPX Page for Page Methods) plus the name of the method to call.
On return the success callback receives the result from the AJAX callback which in this case is the formatted string which is simply assigned to an element in the form and displayed. Remember the result type is whatever the method returns – it doesn’t have to be a string. Note that ASP.NET AJAX and WCF REST return JSON data as a wrapped object so the result has a ‘d’ property that holds the actual response:
jEl.html(result.d).fadeIn(1000);
Slightly simpler: Using ServiceProxy.js
If you want things slightly cleaner you can use the ServiceProxy.js class I’ve mentioned here before. The ServiceProxy class handles a few things for calling ASP.NET and WCF services more cleanly:
Automatic JSON encoding
Automatic fix up of ‘d’ wrapper property
Automatic Date conversion on the client
Simplified error handling
Reusable and abstracted
To add the service proxy add:
<script src="Scripts/ServiceProxy.js" type="text/javascript"></script>
and then change the code to this slightly simpler version:
<script type="text/javascript">
proxy = new ServiceProxy("PageMethodsService.asmx/");
$(document).ready(function () {
$("#btnSubmit").click(sendRegistration);
});
function sendRegistration() {
var arForm = $("#form1").serializeArray();
proxy.invoke("SendRegistration", { formVars: arForm },
function (result) {
var jEl = $("#divMessage");
jEl.html(result).fadeIn(1000);
setTimeout(function () { jEl.fadeOut(1000) }, 5000);
},
function (error) { alert(error.message); } );
}
The code is not very different but it makes the call as simple as specifying the method to call, the parameters to pass and the actions to take on success and error. No more remembering which content type and data types to use and manually serializing to JSON. This code also removes the “d” property processing in the response and provides more consistent error handling in that the call always returns an error object regardless of a server error or a communication error unlike the native $.ajax() call.
Either approach works and both are pretty easy. The ServiceProxy really pays off if you use lots of service calls and especially if you need to deal with date values returned from the server on the client.
Summary
Making Web Service calls and getting POST data to the server is not always the best option – ASP.NET and WCF AJAX services are meant to work with data in objects. However, in some situations it’s simply easier to POST all the captured form data to the server instead of mapping all properties from the input fields to some sort of message object first. For this approach the above POST mechanism is useful as it puts the parsing of the data on the server and leaves the client code lean and mean. It’s even easy to build a custom model binder on the server that can map the array values to properties on an object generically with some relatively simple Reflection code and without having to manually map form vars to properties and do string conversions.
Keep in mind though that other approaches also abound. ASP.NET MVC makes it pretty easy to create custom routes to data and the built in model binder makes it very easy to deal with inbound form POST data in its original urlencoded format. The West Wind West Wind Web Toolkit also includes functionality for AJAX callbacks using plain POST values. All that’s needed is a Method parameter to query/form value to specify the method to be called on the server. After that the content type is completely optional and up to the consumer. It’d be nice if the ASP.NET AJAX Service and WCF AJAX Services weren’t so tightly bound to the content type so that you could more easily create open access service endpoints that can take advantage of urlencoded data that is everywhere in existing pages. It would make it much easier to create basic REST endpoints without complicated service configuration. Ah one can dream!
In the meantime I hope this article has given you some ideas on how you can transfer POST data from the client to the server using JSON – it might be useful in other scenarios beyond ASP.NET AJAX services as well.
Additional Resources
ServiceProxy.js
A small JavaScript library that wraps $.ajax() to call ASP.NET AJAX and WCF AJAX Services. Includes date parsing extensions to the JSON object, a global dataFilter for processing dates on all jQuery JSON requests, provides cleanup for the .NET wrapped message format and handles errors in a consistent fashion.
Making jQuery Calls to WCF/ASMX with a ServiceProxy Client
More information on calling ASMX and WCF AJAX services with jQuery and some more background on ServiceProxy.js. Note the implementation has slightly changed since the article was written.
ww.jquery.js
The West Wind West Wind Web Toolkit also includes ServiceProxy.js in the West Wind jQuery extension library. This version is slightly different and includes embedded json encoding/decoding based on json2.js.© Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery ASP.NET AJAX
