多视图未显示答案

【问题标题】：MultiView Not Displayed多视图未显示
【发布时间】：2011-10-03 23:43:16
【问题描述】：

我有一个页面，我正在尝试使用 ASP:MultiView 和 ASP:Menu 控件实现一个简单的两个选项卡 Tab 控件。

我在同一个应用程序的另一个页面上可以正常工作，但由于某种原因，在这个页面上，整个 MultiView 被隐藏了。标记位于浏览器提供的源代码中，但任一视图中的所有控件都是不可见的。视图正在占用空间。当我在 MultiView 控件下方放置另一个控件时，它会显示在我期望的位置。

两个页面之间存在差异。这适用于一个标准的 ASP.NET 页面，它显示在模式对话框中。我正在努力解决的问题是使用母版页的内容页面。

页面上已经有很多标记，但我在下面包含了包含整个“选项卡控件”的面板的标记。

我确实尝试将“选项卡控件”从面板中移除，但行为没有改变。

对此的任何想法将不胜感激。

谢谢，道格

<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>

【问题讨论】：

无法从发布的代码中真正看出。检查您的 CSS PanelVisible 以获得 Display:Block。如果有其他问题，请尝试使用 Firebug。
PanelVisible 类被用在一个刚刚超过这个的面板上，一切都正确显示。面板也是可见的（边框为 1px，颜色可见），菜单控件也显示出来并且工作正常。这就是让这件事如此奇怪的原因。看起来它在那里只是没有显示。如果我有头发，我会把它拉出来:-)
我最好的建议是在 firebug 中为 firefox 调出页面。它可以为您提供有关应用了哪些 CSS 的详细信息，并可能告诉您为什么它不显示。

标签： asp.net

【解决方案1】：

我终于弄清楚了这个问题是什么。事实证明，您不能简单地复制标记并期望它起作用。 AJAX 选项卡控件也是如此。当您从工具箱添加 MultiView 元素时，它还会在后台执行添加任何 JavaScript 库和调用所需的操作，以使整个工作正常进行。当您只是从另一个页面复制标记时，这些项目不会完成，并且页面上的 MultiView 功能无法按预期运行。

您需要（至少）将元素从工具箱添加到页面，然后您可以复制内部标记。

这样做解决了我的问题。

【讨论】：