Dynamic Loading of Web User Controls - Architectural Aspect

Background

.NET is Microsoft's most advanced programming model for building Web applications. This paper provides a solution for the application architects/designers on how to utilize web user controls effectively by loading them dynamically, while doing design for the complex web based applications.

Salient Features of this solution are:

• Minimizing the development time
• Maximum utilization of Reusable GUI components and Dynamic GUI generation.
• Minimizing the maintenance time & Cost
• Ease of change/enhancements with future requirements/Better control on the code

The focused technology area is .NET Web User Controls.

Traditional Approach

Suppose we are developing a complex web-based application with more number of pages. In this approach, the web pages are developed individually at the design time. The controls placed on the Page are specific to the page where it is placed and there is no concept of reusability.

The main concerns with this approach are

• Development time is high � each page has to be specifically designed
• Not much of code reuse � controls on each page specific to that only
• Development cost is high � as each page developed separately
• Control on the code is less � due to increase in number of pages
• Maintenance time is high � due to increase in number of pages

This approach works well if we are developing web based application with few web pages.

Proposed Approach

The concerns in traditional approach while developing complex web applications with more number of pages can be overcome

• By logically grouping the controls at the design time and the respective Web User Controls (generalized) are identified.
• These web User Controls are loaded dynamically on the web Page at runtime (Dynamic GUI).
• The position (X, Y co-ordinates), caption and other information about the web User control are retrieved from the database.
• Also since the control�s information is coming from database localization can be easily implemented.

Proposed Architecture

Web User Control Architecture

• Initially in design time the web page will have nothing except a container control and other buttons (Ex: Save button).
• On Load of the each web page the respective web User Controls information that needs to be loaded are retrieved from the database (i.e. x-y coordinates, header etc).
• Each Web User Control has its own Business Class, which intern interacts with the generic Data Access Class.
• Each Web User Control has its own Save and Populate methods, which is backed by the respective business class having Insert, Update and GetData methods.
• While loading the web User Controls all the individual web user controls Populate, SetPosition etc methods will be called in Loop.
• To Save any changes done on the web form all the Save methods for each individual web User Controls need to be called in Loop.
• The Save Button is on the Webform, not on individual web User Controls.
  
  

Example

Suppose we are developing a Health Care Product, we need to maintain the Doctor and Patient Information. If we logically group the scenario Name & Address, Appointment dates are common for both Doctor/Patient. In order to handle Name & Address for Doctor and Patient following generalized web User Control is identified

In order to handle Appointment dates for Doctor and Patient following generalized web User Control is identified

Web User Controls on Doctor Information Page

When the web user control dynamically loaded on the Doctor Information web form, Headers of the generalized web user control are displayed as �Doctor Address� and �Doctor Appointment�. Also key information like �Doctor� is passed which will enable the web user controls to fetch and populate doctor specific data and populate the page accordingly.

Web User Control when Loaded on the Patient Information Page

When the web user control dynamically loaded on the Patient Information web form Headers of the generalized webuser control are passed as �Patient Address� and �Patient Appointment�. Also key information like �Patient� is passed which will enable the web user controls to fetch and populate patient specific data and populate the page accordingly.

Results

By using the proposed approach we are achieving

• Minimizing the development time
• Maximum Utilization of Reusable GUI components and Dynamic GUI generation.
• Minimizing the maintenance time & Cost
• Ease of change/enhancements with future requirements/Better control on the code

Code Download

• Please go through the attached Code snippet for better understanding. Thanks to my colleague Sanjoyan Mustafi (GMSBU - Wipro Technologies) for providing the code snippet.
• Follow the instruction mentioned in the installation guidelines document

Conclusion

This approach is recommended for complex web application development, as there is more code reusability and better control over the code. This intern reduces the development and Maintenance time.

• This solution is best suited for Migration Projects, where the similar concept is used in the existing system.
• This architecture is ideally suited for complex web-based application (Products/Projects) with similar functionality in various web pages.
• Logical grouping of controls should be done properly at the design time for better usage of this approach. This in turn requires a lot of Domain/Technical Expertise.
• Even dynamic loading of web user controls takes place while loading the page; it will not affect much on the performance. The performance gain can be achieved by using caching technique.