以编程方式创建UpdatePanel以填充父容器的最佳实践

本文关键字：最佳 编程 方式 创建 UpdatePanel 填充 | 更新日期: 2023-09-27 18:01:31

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

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

之前我有:

[Parent Container] -> [Child Container]同时取消ParentContainer和ChildContainer的height属性，这样它们就会填充层次结构中更高的容器。

现在我有:

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

是我最好的选择，进入CSS，做一些像这样的事情:

.UpdatePanel
{
    height: 100%;
}

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

编辑:

我(不能?)使用面板而不是UpdatePanel，因为我想使用能够有条件地更新的功能。我在我的页面上有一个定时器，它在控件上调用updateppanel . update()——这个功能在面板中不存在。

我的页面的主体是高度:100%，这是静态结构层次结构。

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

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

以编程方式创建UpdatePanel以填充父容器的最佳实践

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

以下是如何设置css类的方法(如果您想在css文件中使用它，请确保将PerformSubstitution设置为true): 
#<%=UpdatePanel1.ClientID%> {
    height: 100;    
}

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

确保UpdatePanel的父节点也设置了height。

Update:使用Panel来包装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>
相关文章：