Danny Quinn
.NET & SQL Server

In a previous post I started looking at a sample application that could dynamically create forms in ASP.NET and then store the user input into a database.

In this post I am going to continue by looking at the classes used to generate the web controls.

As I mentioned in the first post I took the basic ideas from this article on MSDN by Scott Mitchell (2004).  My first few attempts mirrored this code almost exactly and there is still quite a bit of code in my solution that came from reading this.  Just how much, I’ll leave to you to decide.

One big change I made was to move away from using UserControls as I came across problems with partial page rendering and had to rely on nasty hacks to get the forms to work properly.  In the above article each question is a user control that implements an interface.  Initially I kept the idea of the interface and created a class for each question.  It soon became apparent that I had lots of duplicated code and in the early stages of development a simple change would require me to change each Question class.  For this reason I moved away from an Interface and created an abstract base class instead.

I decided that my Survey class would inherit from Table, and each Question from TableRow (This just helps to keep the layout neat).  The class diagram is displayed below.

The QuestionBase class has two abstract properties and one astract method that classes inheriting must implement. DataType – which is an enumeration, this is used to determine which column in the Answer table to read / update.  PostBackControl – The base class handles the LoadPostData event and in the default implementation it also creates a required field validator (if the mandatory flag for a question a set).  In order to do both of these things the class need to know which control to attach to.  The method is CreateAnswerCell() – Each class is responsible for rendering the controls it needs to create the question control and required validators (other than the required validator previously mentioned).

You can also override the method CreateQuestionCell() and CreateValidatorCell() if you don’t want the base implementation or you can override CreateControlHierarchy() if you want the child classes to control the rendering of the entire TableRow.

Okay, it will probably make more sense with the code, so here is the implementation of QuestionString.

namespace DQ.WebControls
{
    public class QuestionString : QuestionBase
    {
        private TextBox textBox;

        public override UIDataType DataType{get{return UIDataType.String;}}

        protected override Control PostBackControl{get{return textBox;}}

        protected override void CreateAnswerCell(bool loadData)
        {
            TableCell tcAnswer = new TableCell();

            textBox = new TextBox();
            textBox.ID = "textbox";
            textBox.MaxLength=MaxLength;

            tcAnswer.Controls.Add(textBox);

            if (loadData)
                textBox.Text=(Answer==null?string.Empty:Answer.ToString());

           Controls.Add(tcAnswer);
        }
    }
}

Seems pretty simple really.  All the real work is done in QuestionBase.

namespace DQ.WebControls
{
    public abstract class QuestionBase : TableRow,
            INamingContainer, IPostBackDataHander
    {
        // Most questions will have the option of being mandatory and so
        // it makes sense to place the validator in the base class.
        protected RequiredFieldValidator rfv;

        // Properties
        public string QuestionText{get;set;}
        public string ValidationGroup{get;set;}
        public int MaxLength{get;set;}
        public int ListID{get;set;}
        public bool Mandatory{get;set;}
        public object Answer{get;set;}

        // Each question is strongly typed.  Each question class
        // must provide this information.
        public abstract UIDataType DataType{get;}

        // Each child class should override this property and
        // return the control that will accept input.
        protected abstract Control PostBackControl{get;}

        // The databind method is called when populating
        // the controls with info from the database.
        public override void DataBind()
        {
            base.DataBind();
            Controls.Clear();
            ClearChildControlState();
            CreateControlHierarchy(true);
            ChildControlsCreated=true;
        }

        // This method recreates controls on postback
        protected override void CreateChildControls()
        {
            Controls.Clear();
            CreateControlHierarchy();
        }

        // You can override this method if you want
        // to control the TableRow layout
        protected virtual void CreateControlHierarchy(bool loadData)
        {
            CreateQuestionCell(loadData);
            CreateAnswerCell(loadData);
            CreateValidatorCell(loadData);
        }

        // The question cell is simple.  Just text
        // in a table cell.
        protected virtual void CreateQuestionCell(loadData)
        {
            TableCell tcQuestion = new TableCell();
            tcQuestion.Text = QuestionText;
            Controls.Add(tcQuestion);
        }

        // The answer cell is abstract, child class must
        // provide this implementation.
        protected abstract void CreateAnswerCell(bool loadData);

        // The validator cell is straight forward enough.  It
        // uses the property PostBackControl to attach to the
        // input control.
        protected virtual CreateValidatorCell(bool loadData){
            TableCell tcValidator = new TableCell();

            if (Mandatory){
                rfv = new RequiredFieldValidator();
                rfv.ID = "validator";
                rfv.ControlToValidate = PostBackControl.ID;
                rfv.Display = ValidatorDisplay.Dynamic;
                rfv.ErrorMessage="*";
                rfv.CssClass="ValidationError";
                rfv.ValidationGroup=ValidationGroup;

                tcValidator.Controls.Add(rfv);
            }

            Controls.Add(tcValidator);
        }

        // Register the control for both ControlState and PostBackEvents
        protected override void OnInit(EventArgs e)
        {
            Page.RegisterRequiresPostBack(this);
            Page.RegisterRequiresControlState(this);
            base.OnInit(e);
        }
        // I don't use this method but it has to be implemented.
        void IPostBackDataHandler.RaisePostBackDataChangedEvent(){}

        // LoadPostData retrieves the value entered and stores in the
        // Answer property.
        // The PostBackControl property is used as the key to retrieve
        // the correct value from the collection.
        bool IPostBackDataHandler.LoadPostData(string postKey,NameValueCollection values)
        {
            EnsureChildControls();
            Answer = values[PostBackControl.UniqueID];
            return false;
        }

        // Finally two methods for control state
        protected override void LoadControlState(object savedState)
        {
            object[] state = savedState as object[];
            base.LoadControlState(state[0]);
            Answer = state[1];
        }
        protected override object SaveControlState()
        {
            object baseState = base.SaveControlState();
            return new object[]{baseState,Answer};
        }
    }
}
public enum UIDataType
{
    String,
    Integer,
    Double,
    Date,
    Boolean
}

Each of the other question classes looks very similar to the QuestionString class and I won’t show the code for each.  I will show two more which implement slightly different behaviour; QuestionDate & QuestionList. Note – QuestionDate uses the AjaxControlToolkit controls CalendarExtender and VallidatorCalloutExtender.

public class QuestionDate : QuestionBase
{
    private TextBox textBox;
    private CalendarExtender ce;
    private CompareValidator cv;
    private ValidatorCalloutExtender vce;

    public override UIDataType DataType{get{return UIDataType.Date;}}

    protected override Control PostBackControl{get{return textBox;}}

    protected override CreateAnswerCell(bool loadData){
        TableCell tcAnswer = new TableCell();

        textBox = new TextBox();
        textBox.ID = "textbox";
        textBox.MaxLength=10;
        textBox.Columns=10;

        tcAnswer.Controls.Add(textBox);

        if (loadData){
            textBox.Text=string.Format("{0:dd/MM/yyyy}",Answer);
        }

        // Add a Calendar Extender
        ce = new CalendarExtender();
        ce.ID = "calendar";
        ce.TargetControlID = textBox.ID;
        ce.Format="dd/MM/yyyy";
        ce.PopupPosition = CalendarPosition.TopLeft;

        tcAnswer.Controls.Add(ce);

        // Add a compare validators to enusre input is a valid
        // date.

        cv = new CompareValidator();
        cv.ID = "compare";
        cv.ControlToValidate = textBox.ID;
        cv.Display = ValidatorDisplay.None;
        cv.ErrorMessage = "Invalid date format.  Use dd/MM/yyyy.";
        cv.Operator = ValidationCompareOperator.DataTypeCheck;
        cv.Type = ValidationDataType.Date;
        cv.ValidationGroup = ValidationGroup;

        tcAnswer.Controls.Add(cv);

        // Finally an an extender for the validator.

        vce = new ValidatorCalloutExtender();
        vce.ID = "extender";
        vce.TargetControlID = compareValidator.ID;
        vce.PopupPosition = ValidatorCalloutPosition.Right;

        tcAnswer.Controls.Add(vce);

        Controls.Add(tcAnswer);
    }
}

QuestionList uses a DropDownList control instead of a textbox.  It also needs to retrieve the list from the database and override the CreateValidatorCell() method as below.

public class QuestionList : QuestionBase
{
    private DropDownList dropDownList;

    public override UIDataType DataType{get{return UIDataType.Integer;}}

    protected override Control PostBackControl{get{return dropDownList;}}

    protected override CreateAnswerCell(bool loadData)
    {
        TableCell tcAnswer = new TableCell();

        dropDownList = new DropDownList();
        dropDownList.ID = "dropdown";
        dropDownList.Width=Unit.Pixel(180);

        tcAnswer.Controls.Add(dropDownList);

        // Retrieve list from database.
        using (SqlConnection sqlConn = new SqlConnection("Data Source Here"))
        using (SqlDataAdapter sqlAdp = new SqlDataAdapter("dbo.SELECT_LIST",sqlConn))
        using (DataTable dt = new DataTable())
        {
            sqlAdp.SelectCommand.CommandType=CommandType.StoredProcedure;

            sqlAdp.SelectCommand.Parameters.Add(
                new SqlParameter("@ListID",ListID)
            );

            sqlAdp.Fill(dt);

            // Add a default row to handler NULL values i.e.
            // where the user is yet to make a selection.
            DataRow dr = dt.NewRow();
            dr[0]="0";
            dr[1]="Please Select";
            dt.Rows.Add(dr);

            dropDownList.DataSource = dt;
            dropDownList.DataValueField=dt.Columns[0].ColumnName;
            dropDownList.DataTextField=dt.Columns[1].ColumnName;
            dropDownList.DataBind();
        }

        if (loadData)
        {
            // Select appropriate listitem
            dropDownList.ClearSelection();

            string answer = (Answer==null?"0":Answer.ToString());

            for (int i=0;i<dropDownList.Items.Count;i++)
            {
                if (dropDownList.Items[i].Value==answer)
                {
                    dropDownList.Items[i].Selected=true;
                    break;
                }
            }
       }
       Controls.Add(tcAnswer);
    }

    // Override CreateValidatorCell as we need to add the property
    // InitialValue to the required field validator.
    protected override void CreateValidatorCell(bool loadData)
    {
        // Create the default implementation.
        base.CreateValidatorCell(loadData);

        // if Mandatory is true then the validator exists
        if (Mandatory)
        {
            // Add the property value
            rfv.InitialValue="0";
        }
    }
}

In the next (final) post on this subject I will create the Survey Web Control and show how to use the control on a web page.