c# - 以编程方式创建的 UpdatePanel 扩展以填充父容器的最佳实践？

Question

在对我的 Web 应用程序进行一些修改时，我遇到了以下问题:

虽然 ASP UpdatePanel 没有高度属性，但它不会自动扩展以填充其父容器。相反，它随着 child 的尺寸而增长。在我的场景中， child 没有尺寸——它应该扩展以填充其 parent 容器。这会导致 UpdatePanel 及其子项的高度都非常小。

之前我有:

[父容器] -> [子容器]，同时取消设置 ParentContainer 和 ChildContainer 的高度属性，以便它们将填充层次结构中更高的容器。

现在我有:

[父容器] -> [更新面板] -> [子容器]。 Parent Container 的尺寸不保证为非空，因此我无法在所有情况下以编程方式设置 ChildContainer 的尺寸。因此，我希望我的 UpdatePanel 以与其环绕的控件相同的方式工作。

我最好的选择是进入 CSS 并做类似的事情:

.UpdatePanel
{
    height: 100%;
}

或者我还有其他更清洁的选择吗？我在服务器端创建这些控件，所以我没有机会将它们包装在 div 中(我也不想)。

编辑:

我(不能？)使用 Panel 而不是 UpdatePanel，因为我想使用能够有条件地更新的功能。我的页面上有一个计时器，它调用控件上的 UpdatePanel.Update() - 此功能在面板 AFAIK 中不存在。

我的页面正文是 height: 100% ，这里是静态结构层次结构。

声明 RadPane2 的位置是将插入 UpdatePanel 的位置。它需要位于 RadPane 和 CormantRadDockZone 控件之间。然而，这只是“基础”实现。用户可以将更多的 RadPane/UpdatePanel/CormantRadDockZone 1:1:1 内容堆叠到页面上。因此，我有动态生成的 UpdatePanel——这意味着我不能将 CSS 仅应用于 UpdatePanel 的 ID。

<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">
    <telerik:RadPane ID="RadPane_DefaultExpand" runat="server" CssClass="allRoundedCorners" Scrolling="None">
        <telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server">
                <telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0" Height="100%" Skin="Web20" Width="100%">
                    <telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px">
                        <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" Width="20px">
                            <telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/configuration.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Configuration" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped" Skin="Web20" Width="100%" onclientdropped="OnClientDropped">
                                    <Items>
                                        <telerik:RadListBoxItem Text="Horizontal Bar" Value="Horizontal"/>
                                        <telerik:RadListBoxItem Text="Vertical Bar" Value="Vertical" />
                                    </Items>
                                </telerik:RadListBox>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" IconUrl="~/Content/Dashboard/Icons/chart.png" TabView="ImageOnly" BackColor="#ECF4FD" MinWidth="160" Scrolling="Y" Title="Custom Widgets" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/historical.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Historical Widgets" Width="160px" EnableDock="False">
                                <telerik:RadListBox ID="lstBxHistorical" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="RadSlidingPane4" Runat="server" IconUrl="~/Content/Dashboard/Icons/settings_global.png" onclientbeforeexpand="ShowDashboardGlobalSettings" TabView="ImageOnly" EnableDock="False" />
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" onclientresized="OnClientResized">
                        <cc1:CormantRadDockZone ID="RadDockZone1" runat="server" /> 
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </telerik:RadPane>
</telerik:RadSplitter>

Answer 1

UpdatePanel 将在客户端转换为 div 或 span，因此只要您正确设置 css 类，它就应该可以工作。通过 CSS 是最干净的方法。

这是设置 css 类的方法(如果您想在 css 文件中使用它，请确保您已将 PerformSubstitution 设置为 true):

#<%=UpdatePanel1.ClientID%> {
    height: 100;    
}

此外，根据浏览器类型，您可能必须将 margin 和 padding 重置为 0。

确保 UpdatePanel 的父级也设置了高度。

更新:使用一个面板来包裹更新面板(而不是替代它)

<asp:Panel ID="Panel1" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</asp:Panel>

注意到 RadPane 有一个 CssClass 属性，因此您可以将它添加到那里。

<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners myCssClass" Scrolling="None" onclientresized="OnClientResized">
    <cc1:CormantRadDockZone ID="RadDockZone1" runat="server" /> 
</telerik:RadPane>