Monday, June 14, 2010

Visual Studio 2008 - ASP.NET Web DB Application 4

MVC2DCatalog - The MVC2 Framework 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". Also, you may read the "dcJQuery - The jQuery AJAX Way" section to get a better idea regarding ASP.NET AJAX apps based on jQuery javaScript library.

General Considerations
The MVC2 Framework (MVC2) refers to the Model View Controller way a web application may work by using the ASP.NET framework (FX). The MVC2 is an independent functioning framework, so we may say we have a framework (MVC2) in another framework (FX). MVC2 is not included in the FX 3.5 distribution, so you will have to install it (see "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations", prerequisites section).
The difference between MVC2 and all the 3 solutions we discussed before is a structural one. Practically, now, the database is not queried using SQLDataSources, but it is represented by the Model (M), the "code behind" page is represented now by the Controller (C), while the ASPX page will be represented by the View (V). As an image, the data from the database will be loaded into Models by the Controller, they will become available for the Controller which will process and standardize the data; data will then be sent and displayed to the user by using Views.

Notice: Why is it called MVC2 ? Because is the second version of MVC framework of Microsoft. Although MVC is new for Microsoft, this structural model was developed and implemented some time before by Java based frameworks like ASF, JSF, Struts, Tapestry, aso. The MVC2 looks more like Struts 2 from Apache Foundations, in the sense that it is "action oriented", not "component oriented" as it is JSF for example.

How MVC2 Framework works ?
In order to load data in the Models, a persistence layer is used. In our case, LINQ (http://msdn.microsoft.com/en-us/library/bb397933.aspx) is used to get the data into Models which will be offered to Controllers through queryable interfaces (iQueryable). LINQ is somehow similar with SQL, but it allows server code (VB.NET, C#, aso) to interfer within its query syntaxes. The result of a LINQ query may be seen as a Recordset or Resultset Iterator, in the sense that you may browse its content with methods like First(), Last(), Next(); an important thing is that it may be cast-ed to a Collection like List.
The Controller is a set of ActionResults. An ActionResult is called by a FORM action event, it executes at the Controller level and then it is output to the user at the View level. As in the case of the discussed jQuery approach, at the View level we cannot use VS2008 specific ASP controls because of their internal events, but Microsoft has developed a set of new HTML helpers to be used by MVC2 for the View (see this: http://weblogs.asp.net/scottgu/archive/2010/01/10/asp-net-mvc-2-strongly-typed-html-helpers.aspx).

The MVC2 Framework Way sample
In my sample I used an "ASP.NET MVC2 Web Application" project template. To the "dcatalog" database tables I linked 3 HTML tables. The first table brings data from the "disk" table. The table Model is generated with the help of LINQ. A service ("/Services/DiskService.cs" interface) is implemented ("DiskServiceImpl.cs") to "ListAll()" the records of "disk" table. The "/Services/DiskService.cs" service is executed at the Controller level and it brings data from "disk" table when the application calls the "Disks()" ActionResult from the "/Controllers/HomeController.cs" Controller. The data from "DiskServiceImpl.cs" is passed to Controller by using the "dependency injection" pattern (see Spring Framework). Then it is output by the "/Views/Home/Disks.aspx" View.

Notice: It is important that the View to have the same name as the ActionResult from the Controller.

Then, a more complex Model is formed with the help of LINQ. It contains the "disk_items", "disk_genre", "disk_audio", "disk_video", "disk_games", aso, like in the figure:


To obtain "disk_items" we fire a radio button from the "disks" table radio buttons group and the "DiskItemsByIdDisk(int id)" ActionResult from the "HomeController.cs" Controller will be called, the Model data will be extracted with the help of "DiskSubitemService" service from the "disk_items" table and then output to "/Views/Home/DiskItemsByIdDisk.aspx" View.
A LINQ generated Model may consist of several database tables, the LINQ Model being responsible for GET-ing or SET-ing the data from or in the tables.

For the "Subitems", in order to get for example the "disk_audio_genre" or "disk_audio_type", I have created internal applications Models (kind of Plain Old Object) under the Models Namespace, that will keep all the "disk_audio" data and also the genre and the type. You may find these internal Models in "/Models/Disk_subitems_Full_Model.cs".
To obtain "disk_audio" subitems, when we click a radio from "disk_items" table, the "DiskSubitemsById(int id)" ActionResult from the "/Controller/HomeController.cs" Controller will be called, a comparison will be made to establish if the "disk_item.id" = "disk_audio.id_item" and if so, the data will be put in the the "Disk_Audio_Ext" internal Model and then extracted from it into an iList with Disk_Audio_Extalements. Then, the Controller outputs the ViewDatas to the user by the "/Views/Home/DiskSubitemsById.aspx" View.

Notice: as a consequence of the database design, in order to display the "Subitems", the Controller establishes more "ViewData" objects that are further managed by the View.

The destination objects in which the Views are loaded was established by jQuery actioned HTML "DIV" elements. More exactly, when we click a radio, a View outputs a HTML code with the help of jQuery "$.ajax()" function into a DIV HTML element (see for example the javaScript at the top of "/Views/Home/Disks.aspx").

Below there is an image with the Solution Explorer of this MVC 2 app:


Below there is an image with MVC2DCatalog app working:

Here is the source code of this application:
MVC2DCatalog.zip

Notice: In order to proper configure the IIS to deploy MVC2 applications, be sure you have the "Global.asax" configured in the same manner as in this application. It is important that the routes to be mapped in this way, in order for the MVC2 Framework to work properly. Note also how the HTTP query string is formed in case of MVC2 applications.

Conclusion:
The MVC2 is by far the most robust and well modularized approach to design a VS2008 web application. However, VS2008 has a lack of resources at the View level and it doesn't offer complex ASP controls as in the case of the previous 3 Solutions. You will have to build your own controls, but you have the help of jQuery objects.
Publicat de vsorinel la 3:33 PM 0 comentarii

Visual Studio 2008 - ASP.NET Web DB Application 3

dcJQuery - The jQuery AJAX 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". 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.
Publicat de vsorinel la 3:28 PM 0 comentarii

Visual Studio 2008 - ASP.NET Web DB Application 2

DCatalogAjax - The Microsoft ASP.NET AJAX 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". 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.
Publicat de vsorinel la 3:26 PM 0 comentarii

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:
DiskCatalog.zip

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

Below there is an image with this application 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:
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).
Publicat de vsorinel la 3:24 PM 0 comentarii

Visual Studio 2008 - ASP.NET Web DB Application

General Considerations
<<Visual Studio 2008 - Ways to Start a Web Database Application>> intends to offer some approaches in starting to develop internet based database applications.
As I am talking about Microsoft Visual Studio 2008 (VS2008), then the database support ofered in these samples is Microsoft SQL Server Express 2005 (SQLSE2005), as it comes integrated in the VS2008 package. The VS2008 samples here use the SQLSE2005 in a direct way, through a connection string, so we are not talking about N-tier applications or XML Services, aso. The samples intend to offer a way to use the business layer of a web application, so that is why I haven't complicated the access way to the database. The VS2008 samples included uses ASP .NET (framework 3.5 SP1) and they are C# coded behind.

Samples included in <<Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application>>:

Prerequisites:
- MS Windows x86 or 64-bit platform: Win XP SP2, Win Vista, Win 7;
- MS Visual Studio 2008;
- only for the MVC2 framework, you should install VS2008 SP1 and then the MVC2 framework for VS2008 SP1;

Notice:
Before installing VS2008, you have to be sure that you installed on your Windows the Internet Information Service (IIS) which is the Web Server used for the ASP.NET applications to work. To install IIS you need the original kit of Windows, then Start -> Control Panel -> Add or Remove Programs -> Add Remove Windows Components -> check IIS.
The ASP.NET Framework (FX) uses the "ASPNET" Windows user account and for this user the VS2008 installer will configure the IIS, by setting an API (aspnet_isapi.dll) to work with the FX.
Even if you haven't installed the IIS before installing VS2008, there exists a way to post-configure the IIS for FX based applications. The FX 3.5 includes the previous versions of FXs, namely 2.0 and 3.0. The FX 2.0 contains an utilitary to post-configure the IIS. Stop the IIS, then at the command line you type this: [Windows dir]\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe /i; start the IIS and now you should be able to run FX based we applications.
For example, I use Windows XP SP3 with IIS 5.

SQL Server Express 2005 Configuration
The SQL Server included into VS2008 is a lite version; Microsoft decided not to include a visual server manager, such as "Microsoft SQL Server Management Studio Express" (http://www.microsoft.com/downloads/details.aspx?FamilyId=C243A5AE-4BD1-4E3D-94B8-5A0F62BF7796&displaylang=en), and thus, SQLSE2005 may be managed through 2 simple interfaces: "SQL Server Configuration Manager" and "SQL Surface Area Configuration" both interfaces are included in SQLSE2005 distribution of VS2008.
The steps of configuring SQLSE2005 are described here: http://www.petefreitag.com/item/458.cfm, but advanced instructions for SQLSE2005 configuring can be found here: http://www.aspfree.com/c/a/MS-SQL-Server/Configuring-SQL-Server-Express-2005/

Notice:
In general, the SQLSE2005 server should be [computer_name]\SQLEXPRESS. You may use an username/password of a granted SQLSE2005 Windows user or the Windows "Integrated Security" connection.
Make sure you granted the acces for the Windows FX user "ASPNET" in SQLSE2005.

Database Configuration
For these samples I chosen to create an SQLSE2005 database named "dcatalog" that contains 15 tables; 3 of them are system tables: "disk_users" and "disk_roles" are used for the app users and their roles, while the "system_logger" table is used to keep the exceptions (errors and warnings) of the app.
I formed an SQL script for creating the "dcatalog" tables and their records.

In order to use this script, you should firstly create the "dcatalog" database.
Here is the script for creating "dcatalog" tables:
dcatalog.zip

After you created the database and its tables, the database should look as in the next diagram:

Notice: Anyone can design its own database; the "dcatalog" was designed according to my own considerations.
"Ways to Start an ASP.NET Web Database Application" is not intended to be a tutorial, it is more like a case study, from which the VS2008 developer may get an idea to start a web application; in this way, any of the 4 samples has a final section called "conclusion" that describes my conclusion in using the respective approach; of course there are various implementations and there may exist easy ways to implement these samples, but this is the way I chosen to present them and you will have to take them as they are.
Publicat de vsorinel la 3:21 PM 2 comentarii
Subscribe to: Posts (Atom)