Monday, June 14, 2010

Visual Studio 2008 - ASP.NET Web DB Application 1

DiskCatalog - The Classic Post-Back Way

Other sections related to the same discussion:

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".

General Considerations
The Classic Post-Back (CPB) refers to the simplest way a web application works by using the ASP.NET framework (FX).
The CPB runs at the level of a HTML server page. In VS2008, the page that is rendered by the web server into a HTML page usually has the "aspx" extension (ASPX page). Practically, you have a FORM or more on this ASPX page that includes form fields (or FORM controls): HTML tables, HTML textboxes, ASP DATA GridViews, ASP DATA DataLists, aso. If you chosen to use VS2008 ASP controls, then you should know that any internal action executed by an ASP control (select, sort, insert, update, aso) is made to the server location established by the FORM container attribute named "action". The same happens for all the button controls (HTML buttons, ASP buttons) on that FORM. The FORM action will "post" the FORM content to the server, making available to the server all the data content of the form fields: their name and value pair and the events applied on them. These actions are called Postbacks.

How Post-Back works ?
When rendered by the FX, the ASPX page will contain a JavaScript function named "__doPostBack()" that will send all the FORM field properties and their events to a "code behind" server file specified by the FORM "action" attribute. This "code behing" server file may be programatically written in: Visual Basic .NET, Visual C# .NET, Visual J# .NET, Visual C++ .NET. 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 may contain FORM field properties, while 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 Classic Post-Back 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 GridViews 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". Then, by using the "OnSelectedIndexChanged" event of "gvDiskItems" I get the database content of a multiple query on tables "disk_audio", "disk_games", "disk_kits", aso, and with the help of SQLDataSource "dsItem" I write it in the third GridView "gvItem". Then, by using the "OnSelectedIndexChanged" event of "gvItem" I get the database content of a multiple query on detailed tables "disk_audio", "disk_games", "disk_kits", aso, and with the help of SQLDataSource "dsItemDetails" I write it in the DetailsView "detvItemDetails".

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". In "Default.aspx.cs" you will find the methods coresponding to the events applied on respective ASP Controls, for example "gvDisks_SelectedIndexChanged() will be available when the "OnSelectedIndexChanged" event of "gvDisks GridView will fire.

Here is an archive with the source of this sample:

Below there is an image with this application at "design" time:

Below there is an image with this application working:

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.

The main disadvantage is that whenever you Post-Back a FORM, the web browser will reload the containing HTML page; if the page calls complex server operations then the reload will take more time to refresh the HTML page. A better approach will be the using of AJAX calls that will reload only specified portions of the HTML page (see next samples).

No comments:

Post a Comment