Visual Studio 2008 - ASP.NET Web DB Application 3

dcJQuery - The jQuery AJAX Way

Other sections related to the same discussion:

• Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations
• Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - Par One
  DiskCatalog - The Classic Post-Back Way;
• Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - Part Two
  DCatalogAjax - The Microsoft ASP.NET AJAX Way;
• Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - Part Three
  dcJQuery - The jQuery AJAX Way;
• Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - Part Four
  MVC2DCatalog - The MVC2 Framework Way;

Notice: To be able to reproduce and run this sample, you should be sure you read and followed the chapters present in "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations". Also, you may read the "DCatalogAjax - The Microsoft ASP.NET AJAX Way" section to get a better idea regarding ASP.NET AJAX apps.

General Considerations
The jQuery AJAX (JQ-AJAX) refers to the jQuery AJAX way a web application may work by using the ASP.NET framework (FX).
As a difference regarding the ASP.NET AJAX (FX-AJAX), the JQ-AJAX uses the jQuery HTTP callbacks to the server in order to change portions of a page. There are many jQuery callback functions that communicate with the server to reload those portions of the page where AJAX is applied, and these are the specific jQuery functions: $.load(), $.ajax(), $.getJSON(). All of these functions may be configured to GET or POST the content of a FORM to the web server. JQuery is an AJAX enabled javaScript library that provides own objects to standardize the javaScript interpretation gap between the web browsers by imposing object functions and methods that comports the same on all browsers.

How jQuery AJAX works ?
When rendered by the FX, the ASPX page will contain several jQuery functions that are "waiting" for the FORM fields events in the "ready" AJAX state. On the HTML page, when the respective FORM field is rendered, then its events will be rendered, too. If an event of the FORM field is fired then the jQuery code associated to that event will run. That code may consist of interactions within the existent fields on the FORM, or it may do an AJAX callback to the server. For example, a "$.load()" callback may load a whole ASPX page by using AJAX, a "$.ajax()" callback may load portions of text, HTML or json scripted code, "$.getJSON()" loads JSON code. JSON is a structured data format written as a javaScript array.
However, regarding the VS2008 controls and ASP.NET, this means that the usual "Post-Backs" are replaced by jQuery callbacks. So, all the internal actions of a VS2008 control may be avoided in order to better manage the jQuery results. For example, an ASP DATA GridView will loose the sort, select, edit, delete, paging actions and they should be redesigned with jQuery. This happens because jQuery is not an VS2008 integrated development medium and VS2008 manages in a different way the callbacks to the server.

The jQuery AJAX Way sample
In my sample I used an "ASP.NET Web Application" project template. To the "dcatalog" database tables I linked 4 ASP DATA Controls : 3 ASP DATA GridView and an ASP DATA DetailsView. The first GridView ("gvDisks") uses the "dsDisks" SQLDataSource to get the "disk" database table content. Then, in the jQuery "ready" state it is waited for the "OnSelectedIndexChanged" event of "gvDisks" which is now represented by a group of HTML radio buttons, instead of the GridView "select" capability. Then, when a radio button is clicked, an $.ajax() jQuery AJAX callback will bring the HTML content of the second GridView named "gvDiskItems" into a HTML DIV element. The same thing happens between the "gvDiskItems" GridView and the 3rd GridView named "gvItem". Then same thing between the "gvItem" GridView and the DetailsView named "detvItemDetails". All these operations are handled by the javaScript function "viewDiskItemsGridView()" from the "/js/disks_view.js" file.
In addition, now there is presented a switch section between "Browse Disks" and "Search Disks" on the starting "Default.aspx" page. The "Search Disks" is not implemented yet, its purpose is to demonstrate jQuery capability of "$.load()" function. The behaviour of this switch is revealed by "/js/Default.js" file which allows the AJAX loading of the "disks_view.aspx" and "disks_search.aspx" pages, by using jQuery $.load() when the user clicks the "Browse Disks" or "Search Disks" buttons.

You may find important design information in "Default.aspx", "disks_view.aspx", "disk_items_view.aspx", "disk_subitems_view.aspx", "disk_subitem_details.aspx" and in their coresponding "code behind" files.

Here is an archive with the source of this sample:
MasterDetailJQuery.zip

Notice: when I started to work at this sample, I named the Solution Project as "MasterDetailJQuery", and then I refered at it as "dcJQuery".

Below there is an image with dcJQuery app working:

Notice:
VS2008 has a convention in which if the ASPX file has a user defined name, then the "code behind" will be named [ASPX_filename].cs. You may find also a [ASPX_filename].designer.cs file that is updated whenever you add a control to the ASPX page from the "design" mode. If you want to internally modify the control added in "design" mode, then you shoul delete its declaration from [ASPX_filename].designer.cs and move it to [ASPX_filename].cs, thus having full access to that control and the ability to extend the capabilities of it.

Conclusion:
Even if jQuery is known as doing fast AJAX callbacks, this is not a good approach from the VS2008 point of view. You may not use the power of the ASP controls, because they are managed in a different way and you will have to write jQuery events for all the internal events of these controls (for instance the ASP DATA GridView internal "sort", "select", aso events). Luckily, you may use jQuery complex designed controls.