Will "the Mighty" Strohl

Wizard Control: Programmatically Access the HeaderTemplate Child Controls

I just began using the Wizard Web Server Control for the first time recently.  (Can you believe it?)  As it turns out, this control is very useful, and it allows you to easily manage short, wizard-like workflows within ASP.Net.  I am using this control inside of a new custom DotNetNuke® module I am writing, where I take a visitor through an application process. 

One of the features of the Wizard control is the HeaderTemplate.  The HeaderTemplate allows you to place a header section at the top of the control throughout the defined steps.  This is useful for usability to give you another way to visually tell the visitor what they are doing, or what step they’re on.  Here is a simplistic example of the control, using the HeaderTemplate feature.

<asp:Wizard ID="wizSignUp" runat="server" ActiveStepIndex="0" DisplaySideBar="false">
    <HeaderTemplate>
        <asp:Label ID="lblHeader" runat="server" />
    </HeaderTemplate>
    <WizardSteps>
        <asp:WizardStep ID="wizStep_0" runat="server" AllowReturn="true" StepType="Start">
            <h3 id="wizHeaderStep0" runat="server" />
            <p><asp:Label ID="lblWizStep_0" runat="server" /></p>
        </asp:WizardStep>
        <asp:WizardStep ID="wizStep_1" runat="server" AllowReturn="false" StepType="Step">
            <h3 id="wizHeaderStep1" runat="server" />
            <p><asp:TextBox ID="txtWizStep_1" runat="server" ReadOnly="true" /></p>
            <p><asp:CheckBox ID="chkWizStep_1" runat="server" TextAlign="Right" /></p>
        </asp:WizardStep>
        <asp:WizardStep ID="wizStep_2" runat="server" AllowReturn="false" StepType="Step">
            <h3 id="wizHeaderStep2" runat="server" />
            <p><asp:Label ID="lblWizStep_2" runat="server" /></p>
        </asp:WizardStep>
        <asp:WizardStep ID="wizStep_03" runat="server" AllowReturn="false" StepType="Finish">
            <h3 id="wizHeaderStep3" runat="server" />
            <p><asp:Label ID="lblWizStep_3" runat="server" /></p>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

In the HeaderTemplate, I have a simple Label control.  This could have been anything, as complicated as a table with a variety of controls.

What’s not immediately clear in this example though, is how to access the properties of the Label control programmatically.  For example, in DNN, I would obviously want to Localize the text in the label.  There unfortunately, is not an event to plug into like we do with controls such as the GridView control to bind the text of the Label.

However, the solution to access the controls in the HeaderTemplate is much more simple than you might think.  All you have to do is know that there is a child control created at runtime, called the HeaderContainer.  First off, I don’t think anyone knows that the HeaderContainer control exists without some thorough investigation, a good web search, or being told.

Here is an example of binding to my Label control, which I have done in the Page_Load event in my example. 

There are obviously more and better places to bind to this control, depending on your use case and business requirements.  Remember, this is an example.

Dim objControl As Object = Me.wizSignUp.FindControl("HeaderContainer").FindControl("lblHeader")
If Not objControl Is Nothing Then
    Dim lblControl As New System.Web.UI.WebControls.Label
    lblControl = CType(objControl, System.Web.UI.WebControls.Label)
    lblControl.Text = Localization.GetString("WizardHeader.Text", Me.LocalResourceFile)
End If

There is another variation of this that might be of more use to you, and maybe even faster (I haven’t benchmarked it).

Dim objControl As Object = Me.wizSignUp.FindControl("HeaderContainer$lblHeader")
If Not objControl Is Nothing Then
    Dim lblControl As New System.Web.UI.WebControls.Label
    lblControl = CType(objControl, System.Web.UI.WebControls.Label)
    lblControl.Text = Localization.GetString("WizardHeader.Text", Me.LocalResourceFile)
End If

If you notice, we do not directly reference the HeaderContainer control, but instead include it in our control collection to query, through the control name, HeaderContainer$lblHeader.



blog comments powered by Disqus