In this article ASP.NET Ajax represents the traditional Ajax approach. Building medium complex keyboard operated traditional ASP.NET application will either mean you have to settle for the less interactive standard ASP.NET controls, or you turn to external JavaScript libraries like the AJAX Control Toolkit to do the job. If you really want to fine tune the behaviour, you upper your sleeves and go JavaScript and start thinking keyboard codes.

Using the new ASP.NET Ajax based paradigm, with standard builtin WinForms like controls only and the drag&drop designer capabilities, it is so simple that an experienced developer can accomplish this well within two hours. Skipping all the tedious adjustments of your UI controls through CSS adjustments, using the defaults for allmost all controls, your application even looks nice without changing an thing. As a bonus, without any special optimizations, the new ASP.NET Ajax based paradigm application feels considerably more snappy.

Building an application in the new paradigm‘s designer in general, mainly consists of dragging the appropriate WinForms like controls to your form and adjusting their size and location. Label, ComboBox, TextBox, Button, Panel and ListView are all native new paradigm controls and you treat them all alike, just drop them onto your form. With very few exceptions (see KeyDown event handler in the ListView below), the task of making the order entry application keyboard operatable, mainly consists of one thing only, to assign the correct TabIndex to each control. The TabIndex decides what is the next control to get the focus when you hit your TAB key for „travelling“ trough the controls of the application.

Scrolling, searching and entry auto-completion while selecting your customer comes automatically with just the following 5 property settings for the ComboBox:

At this point, you register a SelectedIndexChanged event handler for the customer ComboBox which will raise an event every time you either select a customer from the list with the Enter key, or when you scroll up and down the list with the arrow keys. Using this event to filter orders for each customer and display in a scrollable ListView, makes your application quite effective in providing overview of each customer‘s orders.

For presenting a list of orders for each customer in the ListView, you use the combined power of ADO.NET data structures and the new paradigm databinding and create a filtered DataView of the Orders datatable and assign it to the ListView‘s DataSource and your ListView is ready to go with all it‘s columns with the following piece of code:

To make life a little harder on purpose, the lower part of the application is a Panel that will display either one of two types of dynamically created UserControls, one simple with instructions when no customer is selected and the other more complex to show the orders list for the customer selected in the ComboBox. Initializing the orders UserControl with enough data to display the customer‘s orders is done by assigning one parameterized property and the whole process creating an instace of the UserControl and feeding it with the necessary data is done with the following code:

Hitting the Button to activate the dialog for creation of a new order is a matter of focusing on the Button and hitting the Space bar or the Enter key, and as it is a native behaviour for the new ASP.NET Ajax paradigm, implementing the reaction in code does not require any extra adjustment, except for implementing the Click event handler of course.

Designing the dialog for editing the order is just like described above for your main form. You adjust the size of your form, drop your labels and all the other controls on the form and finally set the correct TabIndex for each control to support keyboard TABbing through the entry form in a logical order. Feeding the dialog entry form with information about the order being edited is a matter of setting one single property exposed in the dialog form, the Orders datarecord. As you allready have fed the dialog form with the actual life and the only instance of the Orders datarecord, the new paradigm application uses property databinding of the individual controls of the dialog form, binding to their corresponding fields in the Orders datarecord, so no additional code is required to update the data – it has allready been done when you leave the form.

Creating an instance of the dialog entry form, feeding it with the Order datarecord, registering a callback handler that gets called when the dialog closes and displaying the dialog is all done with this code:
 

The only „low-level“ thing done in the whole application is registering a keydown event handler for the ListView capturing the Enter key to enable showing or editing details about the order in the selected ListView row.

Sorting the orders ListView comes natively with the ListView and you don‘t have to adjust a thing. Just click any columnheader to sort the Orders list on that column. Natively, the ListView does not support keyboard-only sort settings, but by going „low-level“ again and watch for a few more keys in the KeyDown event handler for the ListView, this is trivial to implement.

All this with server-side coding only and without a single thought of JavaScript, HTML or browser compatibility concerns.

The ASP.NET Ajax paradigm application was developed in Visual WebGui only, without any additonal tools or controls in 1.5 hours.

The new ASP.NET based paradigm is led by Visual WebGui that instead of the traditional thin or fat client architecture offers a new approach that impliments the best of both worlds by offering a clever server and clever client approach.
 

The first thing you realize when thinking about implementing an application like this one, is that there is no way you can make it with the traditional ASP.NET controls only. So the search begins for some JavaScript utility library like the AJAX Controls Toolkit and for more complex data presentation, you will soon start looking for more enhanced client libraries to do the job.

The above fact alone will dramatically slow down your development speed, especially for the less experienced users, and even for the more experienced ones too. Despite having those extra tools at your disposal, in order to fully operate your application by the keyboard alone, you need to start reacting to individual keyboard codes on individual contols. For that you will need to go JavaScript. And for that, you need time.

The second slowdown factor is the „three-dimensional“ coding technique required for implementing ASP.NET applications. First is the coding of the ASP.NET (HTML like) pages themselves. Second is the server-side coding for your „runat server“ event handlers. The third is the JavaScript client side coding required, and chances are you will need considerable amount of that type of coding for this type of application.

Comparing this to the new ASP.NET Ajax paradigm development process, the first „dimension“ is comparable to designing your forms in new paradigm, only in the new paradigm you have a much more advanced designer support. The second „dimension“ is quite comparable to the new paradigm. The third „dimension“, and the most time consuming one in traditional ASP.NET, simply isn‘t required for the new ASP.NET Ajax paradigm application.

In the current implementation of the traditional ASP.NET application, the developer has chosen to use the DevExpress suite of ASP.NET Ajax controls.

Presenting a selectable list of your available customers is allmost the same in traditional ASP.NET:

Note the absense of AutoComplete property settings, compared to the new ASP.NET Ajax paradigm application, which also will be reflected in the running application, as no autocomplete or autosearch is supported in the combobox without seperate JavaScript coding. You do however get similar behaviour using the Arrow keys to select the next or previous customer in the list.

Registering a SelectedIndexChanged event is pretty straight forward, but without some JavaScript coding you will find it lacking some of the features in the new paradigm application, like firing the event while arrowing down the already dropped down list.

Using the third party grid control, you can set the AutoGenerateColumns property to True to have the grid autobuild the columns for you, as the ListView did in the new ASP.NET Ajax paradigm. Binding your data to the grid is very similar in both applications:

Using the keyboard only to focus on the Orders list is not possible without considerable client side JavaScript coding logic to capture the appropriate keyboard codes on the appropriate controls and shift focus to the grid below, behaviour that you get natively using the TAB key in the new paradigm application.

Opening a dialog to edit the order details is where you really see the logic and simplicity in the new paradigm. In traditional ASP.NET you still need to watch for the Enter key being pressed, but this time it‘s in client side JavaScript code:

Remember that getting multiple values to the callback function that handles the dialog display in the new paradigm application by just setting one property? Here you are required to pack those parameters, send them to the callback function, only to unpack them again, all in client side JavaScript:

The way to have the dialog „remember“ the order ID being edited through postbacks, is handled for you automatically in the new paradigm application, but here you have to specifically store those values in session variables:

Loading the dialog controls with the values from the Orders record is somewhat similar in both of the applications, except in the traditional ASP.NET application you can‘t databind the controls to the individual Order record fields, so saving your new values will require you to handle the update seperately:

A general concern in traditional ASP.NET is making sure the correct control has the focus after each postback to the server. In the new paradigm application you don‘t have to be concerned about that, as the control that has the focus before the postback, will still have the focus after the postback, unless the logic states otherwise. This will require considerable amount of time and coding to accomplish in traditional ASP.NET.
 

The traditional ASP.NET application was worked on for more than one whole working day, and it still requires a considerable more work done to be presentable, and it is still quite far from being completely keyboard operable.

Learn more

Note: Codes are submitted as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Terms of Agreement:
By using this code, you agree to the following terms...

1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3. You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.