C# 以编程方式创建UpdatePanel扩展以填充父容器的最佳实践?
在对web应用程序进行一些返工时,我遇到了以下问题: 尽管ASP UpdatePanel没有height属性,但它不会自动展开以填充其父容器。相反,它会随着孩子的尺寸而增长。在我的场景中,子对象没有维度——它应该展开以填充其父对象容器。这会导致UpdatePanel及其子项的高度都非常小 在我之前: [Parent Container]->[Child Container],同时取消设置ParentContainer和ChildContainer的height属性,以便它们将填充层次结构中较高的容器 现在我有: [父容器]->[更新面板]->[子容器]。父容器的维度不能保证为非空,因此我无法在所有情况下通过编程设置ChildContainer的维度。因此,我希望我的UpdatePanel与它所包装的控件以相同的方式工作 是我进入CSS并执行以下操作的最佳选择:C# 以编程方式创建UpdatePanel扩展以填充父容器的最佳实践?,c#,css,updatepanel,C#,Css,Updatepanel,在对web应用程序进行一些返工时,我遇到了以下问题: 尽管ASP UpdatePanel没有height属性,但它不会自动展开以填充其父容器。相反,它会随着孩子的尺寸而增长。在我的场景中,子对象没有维度——它应该展开以填充其父对象容器。这会导致UpdatePanel及其子项的高度都非常小 在我之前: [Parent Container]->[Child Container],同时取消设置ParentContainer和ChildContainer的height属性,以便它们将填充层次结构中较高的
.UpdatePanel
{
height: 100%;
}
或者我还有其他更干净的选择吗?我正在服务器端创建这些控件,因此我没有机会将它们封装在div中(我也不想这样做)
编辑:
我(不能?)使用Panel而不是UpdatePanel,因为我想使用能够有条件地更新的功能。我的页面上有一个计时器,它在控件上调用UpdatePanel.Update()——这个功能在面板AFAIK中不存在
我的页面的主体是高度: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>
UpdatePanel
将在客户端转换为div
或span
,因此只要您正确设置css类,这应该可以工作。通过CSS是最干净的方法
下面是设置css类的方法(如果要在css文件中使用该类,请确保已将PerformSubstitution
设置为true
):
注意到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>
UpdatePanel的父级高度在代码中未设置。这就意味着高度:自动。这会给我带来麻烦吗?我的页面上只有一个控件,根控件,知道它的维度。其他所有内容都会根据它们在层次结构中相对于该根控件的位置自动调整大小。计算每个控件的维度直到这个UpdatePanel所在的位置将是一项任务。此外,我的更新面板是动态生成的。我无法将CSS应用于ID,只能应用于UpdatePanel类。如果一切都未设置,那么是的,它应该可以工作。否则,您也可以设置body{height:100%;}
,然后将它们包装在asp:Panel
中,并在codebehind中指定类,如Panel1.CssClass=“myCssClass”代码>啊,但我的页面上有一个计时器,它监视所有控件并告诉它们何时刷新。我将UpdatePanel的UpdateMode设置为conditional以支持这一点,这就是为什么我不使用Panel;)很抱歉一直透露更多关于这个问题的信息,我会将此编辑到帖子中。
<asp:Panel ID="Panel1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</asp:Panel>
<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>