Searching via ASP.NET AJAX and Web Services without UpdatePanel
by David Hayden ( Florida .NET Developer ), Filed: ASP.NET 2.0
For my money, you just can't beat the UpdatePanel for ease of use and ease of maintenance. I have been successfully using it for quite some time and enjoyed the fact that I did not have to use the Javascript Libraries, client page model, and DOM helper classes in ASP.NET AJAX. Don't get me wrong, I think the technology is cool and there are a whole class of applications that need to get down to the metal for lightweight, interactive user interfaces. It is just that most business-oriented web applications will work fine with the UpdatePanel and most of my development is on rich domain models with strategic use of the UpdatePanel on the front-end.
Having said that, however, man do I love seeing responsive communication from the web client to the web server using lightweight javascript calls to a web service. I have been way too preoccupied with the coolness of this that I keep bring it up over and over again in the following posts:
Sadly this is me - loving the whole learning process and applying the new skills in real-world development.
What also really amazes me is that I had forgot just how easy it is to move from C# to Javascript. These languages have been similar enough so that I don't even need the Javascript Debugger in VS2008 for the stuff I have been writing. It just works :)
Anyway, back to code. So, I wanted to create the whole search functionality like the Search Bundle of WCSF without the Real-Time Portion ( I can show an example of that later ) and without an UpdatePanel. Essentially, click on a button and go out and get the a list of Customers from a web service and display the results in table form back on the web client. The UI and functionality is similar to this post minus the real-time:
First, you have the Web Service which returns a generic list of Customers:
/// <summary>
/// Summary description for CustomerDataService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CustomerDataService : WebService {
public CustomerDataService () {}
[WebMethod]
public List<Customer> GetCustomers(string prefixText)
{
return CustomerDataSource.GetCustomers(prefixText);
}
}
which as you know gets returned in JSON notation over the wire. Notice how much smaller the payload is compared to an UpdatePanel and partial-page postback that has a bunch of ViewState Info, etc: In this case, we are just sending back and forth pure data, nothing extra.
The very unfortunate problem with this, however, is that we need to do the formatting of the table in Javascript on the client. You may be able to get away from this using the ASP.NET AJAX ListView Control in the ASP.NET AJAX Futures, but I haven't tried it yet.
function OnComplete (results) {
var data = new Sys.StringBuilder();
data.append('<table style="...">');
data.append('<tr style="...');
for (var i=0; i < results.length; i++) {
if (i % 2 == 0)
data.append('<tr style="...">');
else
data.append('<tr>');
data.append("<td>");
data.append(results[i].Name);
data.append("</td>");
data.append("<td>");
data.append(results[i].Contact);
data.append("</td>");
data.append("<td>");
data.append(results[i].City);
data.append("</td>");
data.append("<td>");
data.append(results[i].Region);
data.append("</td>");
data.append("<td>");
data.append(results[i].PostalCode);
data.append("</td>");
data.append("</tr>");
}
data.append("</table>");
$get('CustomerGrid').innerHTML = data.toString();
}
and wahlah, you have a table of customers as shown in the first image above.
I really dig it. If your application requires this level of performance at the price of what might be considered less maintainable, this is a really slick solution and one that took me only a few minutes to build. I like the StringBuilder Class, too. Again, very easy to move from C# to the Javascript Libraries. Next time we can add the real-time portion.
News Feed: David Hayden ( Florida .NET Developer )
Filed: ASP.NET 2.0