This post is part of a series and will make more sense if you read the earlier posts:
To make our form nicer to use I want to add a little AJAX to display the names and prices of products as the user enters them into the form. To do this I have added two new columns which the user will not be able to edit:
<tbody>
<tr>
<td><input type="text" name="code" /></td>
<td><span class="name"></span></td>
<td><span class="price"></span></td>
<td><input type="text" name="quantity" /></td>
</tr>
</tbody>
The next thing we are going to need is a way to query the server for the details of a given product. To keep things nice and simple I've written an ASPX page which returns a product using JavaScript Object Notation. The product is defined on the server by a simple .Net class:
public class Product
{
public string Code { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
I've hard coded a few products for my example but GetProduct could fetch this data from a database, web service or any other source. Serializing a product ready for JavaScript to use is as simple as a single call using the Json.NET library:
protected void Page_Load(object sender, EventArgs e)
string code = Request.QueryString["code"];
Product product = GetProduct(code);
Response.Write(JavaScriptConvert.SerializeObject(product));
Response.End();
JSON is a nice human readable format so you can test the page easily by browsing to it's URL:
Included in the jQuery library is a set of functionality for performing AJAX calls with support for JSON data. We will use this functionality in an event that fires whenever the users focus leaves the code column of the form. To set up the event we add a few lines to our existing ready function:
$('[name=code]')
.blur(function(e) {
GetProduct(e.target);
});
We pass e.target through to the function as it will be the input control that has just lost focus. When the event fires we use the getJSON function to call the server and ask it for details about the code the user entered:
function GetProduct(input) {
$.getJSON(
'ProductQuery.aspx?' + $(input).serialize(),
function(product) {
UpdateRow(input.parentNode.parentNode, product);
);
The first parameter passed is the URL to which the AJAX call will be made. serialize is another jQuery helper which formats the input value into a query string parameter for us.
The second parameter we pass is a function that will be called when the AJAX query completes. Because we have asked jQuery for JSON data the results of the query will be read into a JavaScript object ready for us to pass to the UpdateRow function.
function UpdateRow(tr, product) {
var name = $('.name', tr);
var price = $('.price', tr);
if(product != undefined) {
name.html(product.Name);
price.html(product.Price);
else {
name.html('Not Found');
price.html('');
This function simply finds the name and price fields from the same row and populates them with the product data we received from the AJAX call. That's all there is to it!
This is the final part in this series so I have compiled and uploaded the example order form with all of the functionality we have covered:
The source project was created with Visual Studio 2008 and should include everything you need to build and run. The test page contains 3 hard coded products which you can find by entering the codes 123, 456 and 789.
The code is intended to be an example only so there is a lot more to be done but you are welcome to use it as a reference or base for your own work. Hopefully it demonstrates a few techniques you can use to improve you own sites.
Labels: AJAX, ASP.Net, jQuery, JSON