Updating My Online Boggle Solver Using jQuery Templates and WCF
With WebForms, each ASP.NET page's rendered output includes a <form> element that performs a postback to the same page whenever a Button
control within the form is clicked, or whenever the user modifies a control whose AutoPostBack property is set to True. This model simplifies web page
development, but carries with it some costs - namely, the large amount of data exchanged between the client and the server during a postback. On postback the browser sends
the values of all of its form fields (including hidden ones, like view state, which may be quite large) to the server; the server then sends back the entire contents of
the web page. While there are some scenarios where this amount of information needs to be exchanged, in many cases the user has performed some action that requires
far less information to be exchanged. With a little bit of forethought and code we can have the browser and server exchange much less data, which leads to more
responsive web pages and an improved user experience.
Over the past several weeks I've been writing an article series on accessing server-side data from client script. Rather than rely solely on forms and postbacks, many
websites use JavaScript code to asynchronously communicate with the server in response to the page loading or some other user action. The server, upon receiving the
JavaScript-initiated request, returns just the data needed by the browser, which the browser then seamlessly integrates into the web page. There are a variety of
technologies and techniques that can be employed to provide both the needed server- and client-side functionality. Last week's article,
Using WCF Services with jQuery and the ASP.NET Ajax Library, explored using the
Windows Communication Foundation, or WCF, to serve data from the web server and showed how to
consume such a service using both the ASP.NET Ajax Library and jQuery.
In a previous 4Guys article, Creating an Online Boggle Solver, I built an application to find all
solutions in a game of Boggle. (Boggle is a word game trademarked by Parker Brothers and Hasbro that involves several
players trying to find as many words as they can in a 4x4 grid of letters.) This article takes the lessons learned in Using WCF Services with jQuery and the ASP.NET
Ajax Library and uses them to update the user interface for my online Boggle solver, replacing the existing WebForms-based user interface with a more modern and
responsive interface. I also used jQuery Templates, a JavaScript-based templating library that is
useful for displaying the results from a server-side service. Read on to learn more!
Read More >
