Effectively Generate Dynamic User Control Forms

• Download the Source Code - 232.2 KB

Introduction

For .NET web applications, there is often a need to create several forms and each form contains unknown number of form objects that are generated on the fly by end user. For example, one form might allow user to create a list of contact information (e.g. First Name, Last Name, etc.). By clicking “Add”, user could obtain a new section of contact info following the existing sections. By clicking “Save”, the whole list of contact information will be saved to database. To efficiently create multiple dynamic control forms, a central management mechanism is needed to place common control code in one place. This project is made to demonstrate how to greatly enhance the maintainability and efficiency of creating new dynamic control forms.
The project is .Net 4.0 C# web application. The development tool is Visual Studio 2010.

Background

An ASP.NET application with pages that use dynamic generation of controls often is hard to maintain especially with multiple such forms. Because dynamically generated controls need to be recreated and populated on each page load, and also user need to dynamically add new sections and/or delete certain sections, all these add complexity to the process. An efficient way need to be found to simplify this process.

Using the code

I wrap up most of the dynamic control maintain code in a central user control called DynCtlMgr.ascx to allow code integration and some custom control related functions in GenericControl.ascx to allow inheritance.

The demo project default.aspx contains two frames. The left frame contains menu.aspx including two links (pCtr1.aspx, pCtr2.aspx).

pCtrl1.aspx allows user to dynamically create a list of contact information (only two fields First Name, Last Name). Each section has a checkbox labeled “Remove”, and when checked, the record will be deleted when save button get clicked. The “Add” and “Save” linked button will allow user to add a new section and save the whole list.

In the pCtrl1.aspx, a user control is embedded. The registration and use of the control is like :

<%@Register TagPrefix="uc" TagName="DynCtlMgr" Src="Usercontrols/DynCtlMgr.ascx" %>

<uc:DynCtlMgr id="ucDynCtlMgr" runat="server" 
  controlfilename="Ctrl.ascx" controlclassname="Ctrl" 
  controldeletespname="usp_DeleteContact" 
  controlgetspname="usp_GetContact" 
  controlsavespname="usp_SaveContact"/>

There are several .NET user controls under the UserControls folder :

1. 1. DynCtlMgr.ascx

This is the central management module. You don’t need to modify the code in this control module to make the application to work, but you may need to customize it more if there is new most customized feature required for the form. I make the code as more generic as possible. Class “Reflection” is being used to call a method using class name and function name. Some properties are used to contribute to the generic feature:

• ControlFileName: custom control file name (e.g. Ctr1.ascx). Used for LoadControl() by file name.
• ControlClassName: custom control class name (e.g. Ctr1). Used for class reflection.
• ControlXXXSpName: the stored procedure names for delete, get, save.
2. GenericControl.ascx

This is control that custom form controls derive from including some common properties and methods. IsRecDelete(): method to check is the control section is flaged as deletion.

• DeleteControls(): this is called from DynCtlMgr.ascx to delete all records to prepare for saving new values. This method could be overridden in the custom form control page (e.g. Ctr1.ascx).
• GetControls(): this is called from DynCtlMgr.ascx to select all records to prepare for populating controls. This method could be overridden in the custom form control page (e.g. Ctr1.ascx).
3. Custom Form controls, eg. Ctr1.ascx, Ctr2.ascx, etc.

These are user defined controls to show different elements.

• FillControl(): used to populate form elements
• SaveControl(): used to save the form element values to the database.

pCtrl2.aspx is similar to pCtrl1.aspx with different form elements.

The backend database in the project is a MS SQL Express database called mydb.mdf which resides in the App_Data folder. In order to make it work, you need to have MS SQL Express installed on your machine first. The demo database include two tables: tblContact, tblCategory. There are three stored procedures corresponding to each new added form: usp_DeleteXXX, usp_GetXXX, usp_SaveXXX.

To add more dynamic control form, one needs to follow the steps :

1. Add a new table to hold new form data.
2. Add a new set of three stored procedures like usp_DeleteXXX, usp_GetXXX, usp_SaveXXX to save your own form data.
3. Add a new user control page similar to Ctrl1.ascx under UserControls folder.
4. Add a new .aspx page similar to pCtr1.aspx.

Points of Interest

1. The control names are zero based, i.e. ctl_0, ctl_1 …
2. The number of controls is stored in viewstate variable : cnt
3. MS SQL Express need to be installed on the machine to run this demo project. VS 2010 and .net 4.0 are required.

History

• 5/10/2013: Initial post.