Visual Studio 2008 - ASP.NET Web DB Application 2

DCatalogAjax - The Microsoft ASP.NET 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, the discussion at "DiskCatalog - The Classic Post-Back Way" may help you getting a better idea regarding ASP.NET Web Applications.

General Considerations
The Microsoft ASP.NET AJAX (FX-AJAX) refers to the AJAX way a web application may work by using the ASP.NET framework (FX).
As a difference regarding the Classic Post-Back (CPB), the FX-AJAX uses Ajax Post-Backs to the server in order to change portions of a page. I will refer further to these AJAX Post-Backs as AJAX Callbacks. As we said, the CPB reloads the whole page when an action is executed. The FX-AJAX will reload only those portions of the page where AJAX is applied, leaving intact the rest of the page portions.

How ASP.NET AJAX works ?
When rendered by the FX, the ASPX page will contain a JavaScript function named "__doPostBack()", as also CPB contained, but this time it will handle the server requests using AJAX. This is possible by using a "ScriptManager" object that will handle all the javaScript needed for the portions of the page reloaded by AJAX. These portions reloaded by AJAX will be stored in containers named "UpdatePanels". The FORM fields will also be available in a "code behind" server file specified by the FORM "action" attribute. For each FORM included in the ASPX page, we will have in the "code behind" file a "class" container with the name of that FORM that will contain FORM fields properties, the FORM fields events will be represented as class methods, aso. As the content of the ASPX server file is rendered, the FORM fields become accessible for the "code behind" server file which has the possibility to transform the FORM fields accordingly with the written code.

The ASP.NET 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, by using the "OnSelectedIndexChanged" event of "gvDisks" I get the database content of table "disk_items" with the help of SQLDataSource "dsDiskItems" and write it in the second GridView "gvDiskItems". Both, "dsDiskItems" and "gvDiskItems" are stored in an UpdatePanel named "upDiskItems". To reload the content of "udDiskItems" panel, a trigger is assigned to this panel which will asynchronously re-write the "upDiskItems" components when the "SelectedIndexChanged" of the first GridView "gvDisks" fires. This asynchronous AJAX Callback uses the POST HTTP method. The same thing happens between the "gvDiskItems" GridView and the 3rd GridView named "gvDiskSubitems" which is stored in the "upDiskSubitems" UpdatePanel. Then same thing between the "gvDiskSubitems" GridView and the DetailsView named "dvDetSubitems" which is stored in the "upDetSubitems" UpdatePanel.
All the 4 UpdatePanels are javaScript handled by the "ScriptManager1" ScriptManager.

You may find all the 4 ASP DATA Controls on the "Default.aspx" file which you may access in the "source", "design" or mixed view modes. The coresponding "code behind" file will be "Default.aspx.cs".

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

Below there is an image with DCatalogAjax 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:
This is probably the best approach in order to develop a web application using VS2008. However, it requires special attention while developed; you have to take care, when the UpdatePanels are rendered because only after they rendered you gain access to their content; otherwise, their content is null. Security should be also present on AJAX calls.