Many of us have used ASP.NET Web Forms for years, combined more recently with ASP.NET AJAX, to build robust web-solutions for our clients. Although Web Forms are not going away, it is also not the only technology available to ASP.NET developers to build web-solutions, or necessarily always the best. A developer’s ability to understand and implement multiple development technologies is critical to ensuring the best solution for the client.
- Asynchronous HTTP (Ajax) request to populate a drop-down menu with XML data
- jQuery animation and CSS manipulation to enhance the client UI experience
- Use of jQuery plug-ins, specifically FormatCurrency to format text
- Use of Content Delivery Networks (CDN) to further optimize performance through web caching
In this example, a user individually chooses products from a drop-down menu, inputs the desired quantity, and adds the selection to their order. The selections along with a subtotal of their costs are displayed in the order table. Items can be removed from the order and additional items added. The order’s total cost is updated and displayed as items are added and removed. All events are handled on the client-side, without any server-side processing. A working example of this form can be accessed here.
About the Code
The order form example comes in two flavors – an easy-to-understand, development-oriented copy (
order_dev.htm), and a production-oriented copy (
Code Optimization and Obfuscation
You can further test page performance by replacing the local link to the jQuery script file with a link to the minified copy of jQuery on Google’s Content Delivery Network (CDN). The current link is commented out within order-prd.htm. For an explanation of the advantages and disadvantages of using a CDN, I recommend Dave Ward’s post on Encosia.com, entitled 3 reasons why you should let Google host jQuery for you.
jQuery IntelliSense in Visual Studio 2008
Placing the Order
alert(), depending on the contents of the order. In actual production, the order page could submit form data to a secondary page or code-behind class (ASP.NET Web Forms) for order processing. Alternatively, data could be formatted and sent directly back to an XML file or to a database using Ajax. Order processing could be done on the client- or server-side, depending on the technology implemented.
Using the Code
The order page contains two HTML tables. One table holds the menu selection elements and the other table displays the current order. Since jQuery so eloquently handles all interactions within the UI, there is very little HTML code to write.
I highly recommend the following resources to both beginner and intermediate jQuery developers who want to learn more about this great client-side development tool: