Question

I have a page where I am trying to implement a simple two tab Tab control using the ASP:MultiView and ASP:Menu controls.

I have this working just fine on another page in the same application but for some reason on this page the entire MultiView is hidden. The markup is there in the source provided by the browser but all of the controls in either View are invisible. The View is taking up space. When I place another control beneath the MultiView control it is displayed where I would expect it to be.

There are differences between the two pages. The one where this works is a standard ASP.NET page that is displayed in a modal dialog. The one that I am struggling with is a Content Page using a Master Page.

There is a lot of markup already on the page but I have included the markup for the Panel that contains the entire “Tab Control” below.

I did try taking the “Tab Control” out of the Panel but there was no change in the behavior.

Any thoughts on this would be truly appreciated.

Thanks,
Doug

<asp:Panel ID="pnlAddressInfo" runat="server" CssClass="PanelVisible">
    <asp:Table ID="tblTabControl" runat="server">
        <asp:TableRow>
            <asp:TableCell>

                <asp:Menu
                    ID="mnuTabControl"
                    Width="262px"
                    runat="server"
                    Orientation="Horizontal"
                    StaticEnableDefaultPopOutImage="False">
                    <Items>
                        <asp:MenuItem ImageUrl="../Images/USAddrSelected.png" Text=" " Value="0" />
                        <asp:MenuItem ImageUrl="../Images/PFAddrUnselected.png" Text=" " Value="1" />
                    </Items>
                </asp:Menu>

                <asp:MultiView 
                    ID="mtvAddressInfo"
                    runat="server"
                    ActiveViewIndex="0"  >

                    <asp:View ID="tabUSAddr" runat="server">
                        <asp:Table ID="tblUSAddrMain" runat="server" width="567px" height="250px" cellpadding=0 cellspacing=0>
                            <asp:TableRow  VerticalAlign="top">
                                <asp:TableCell CssClass="AddressTabArea" style="width: 567px">
                                    <asp:Table ID="tblUSAddr" runat="server">
                                        <asp:TableRow>
                                            <asp:TableCell>
                                                <asp:Label ID="lstFunctionsAvailable_Label" runat="server" CssClass="StdLabel" Text="Address Line #1" />
                                            </asp:TableCell>
                                            <asp:TableCell>
                                                <asp:TextBox ID="txtUSAddrLine1" runat="server" CssClass="ResizableTextBox" />
                                            </asp:TableCell>
                                        </asp:TableRow>
                                        <asp:TableRow>
                                            <asp:TableCell>
                                                <asp:Label ID="txtUSAddrLine2_Label" runat="server" CssClass="StdLabel" Text="Address Line #2" />
                                            </asp:TableCell>
                                            <asp:TableCell>
                                                <asp:TextBox ID="txtUSAddrLine2" runat="server" CssClass="ResizableTextBox" />
                                            </asp:TableCell>
                                        </asp:TableRow>
                                    </asp:Table>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:View>

                    <asp:View ID="tabUsers" runat="server">
                        <asp:Table ID="tblPFAddrMain" runat="server" width="567px" height="250px" cellpadding=0 cellspacing=0>
                            <asp:TableRow  VerticalAlign="top">
                                <asp:TableCell CssClass="RolesEditorTabArea" style="width: 567px">
                                    <asp:Table ID="tblPFAddr" runat="server">
                                        <asp:TableRow>
                                            <asp:TableCell>
                                                <asp:Label ID="txtPFAddrLine1_Label" runat="server" CssClass="StdLabel" Text="Address Line #1" />
                                            </asp:TableCell>
                                            <asp:TableCell>
                                                <asp:TextBox ID="txtPFAddrLine1" runat="server" CssClass="ResizableTextBox" />
                                            </asp:TableCell>
                                        </asp:TableRow>
                                        <asp:TableRow>
                                            <asp:TableCell>
                                                <asp:Label ID="txtPFAddrLine2_Label" runat="server" CssClass="StdLabel" Text="Address Line #2" />
                                            </asp:TableCell>
                                            <asp:TableCell>
                                                <asp:TextBox ID="txtPFAddrLine2" runat="server" CssClass="ResizableTextBox" />
                                            </asp:TableCell>
                                        </asp:TableRow>
                                    </asp:Table>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:View>

                </asp:MultiView>  
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>                      
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>

</asp:Panel>

Answer 1

I finally figured out what the issue was with this. It turns out that you cannot simply copy the markup and expect this to work. Same is true for the AJAX Tab Control. When you add the MultiView elements from the Toolbox it also performs actions in the background that add whatever JavaScript libraries and calls are needed to make the whole thing work. When you simply copy the markup from another page these items do not get completed and the MultiView functionality on the page does not function as expected.

You need to (at least) add the elements to the page from the Toolbox and then you can copy the internal markup.

Doing this solved my issue.