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.

No comments:

Post a Comment