tags:

views:

11

answers:

0

For some reason, I can't seem to create a Wizard control using TemplatedWizardStep that doesn't render an outer table. As far as I'm aware, in .NET 4 if I'm using a LayoutTemplate I shouldn't expect a table.

As an example, I've taken the code from here and extended it a little: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.wizard.layouttemplate.aspx

Here's the mark-up:

 <asp:Wizard ID="Wizard1" runat="server">
    <LayoutTemplate>
        <div>
            <asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
        </div>
        <div>
            <asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
        </div>
        <div>
            <asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
        </div>
        <div>
        <asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
        </div>
    </LayoutTemplate>

    <SideBarTemplate>
        <asp:ListView ID="sideBarList" runat="server">
            <LayoutTemplate>
                <div id="ItemPlaceHolder" runat="server"/>
            </LayoutTemplate>

            <ItemTemplate>
            <asp:LinkButton ID="sideBarButton" runat="server" Text="Button" />
            </ItemTemplate>
        </asp:ListView>
    </SideBarTemplate>

    <HeaderTemplate>
        Header content.
    </HeaderTemplate>

    <WizardSteps>
        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
            Step 1 Content.
        </asp:WizardStep>
        <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
            Step 2 Content.
        </asp:WizardStep>
        <asp:TemplatedWizardStep ID="WizardStep3" runat="server" Title="Step 3">
            <ContentTemplate>
               Step 3 Content.
            </ContentTemplate>    
        </asp:TemplatedWizardStep>
    </WizardSteps>
</asp:Wizard>

And here is the result, when I am viewing Step 3 (with a little whitespace tidying for readability):

<div>Header content.</div>
<div>
  <table cellspacing="5" cellpadding="5" border="0">
    <tr>
      <td align="right"><input type="submit" name="Wizard1$FinishNavigationTemplateContainerID$FinishPreviousButton" value="Previous" id="Wizard1_FinishNavigationTemplateContainerID_FinishPreviousButton" /></td><td align="right"><input type="submit" name="Wizard1$FinishNavigationTemplateContainerID$FinishButton" value="Finish" id="Wizard1_FinishNavigationTemplateContainerID_FinishButton" /></td>
    </tr>
  </table>
</div>
<div>                 
     <a id="Wizard1_sideBarList_ctrl0_sideBarButton" href="javascript:__doPostBack('Wizard1$sideBarList$ctrl0$sideBarButton','')">Step 1</a>      
     <a id="Wizard1_sideBarList_ctrl1_sideBarButton" href="javascript:__doPostBack('Wizard1$sideBarList$ctrl1$sideBarButton','')">Step 2</a>      
     <a id="Wizard1_sideBarList_ctrl2_sideBarButton" href="javascript:__doPostBack('Wizard1$sideBarList$ctrl2$sideBarButton','')">Step 3</a>            
</div>

<div>
  <table cellspacing="0" cellpadding="0" border="0" style="height:100%;width:100%;border-collapse:collapse;">
    <tr>
       <td style="height:100%;width:100%;">
         Step 3 Content.
       </td>
    </tr>
  </table>
</div>

As you can see, the content of the 3rd step has an outer table. This doesn't happen on step 1 or 2, they just render purely their contents, so a standard WizardStep appears to function fine. Is this by design or a bug?