全面掌握Panel组件用法-.net - Powered by Discuz! Archiver

haidong 发表于 2010-2-25 10:21:47

全面掌握Panel组件用法

Panel组件在程序设计中是一个经常使用到的组件，在ASP.NET中Panel组件是以一个服务器端组件的形式出现的，所谓服务器端组件就是这些组件是在服务器端定义产生的。在ASP.NET可以使用的WebForm组件中有许多的服务器端组件，譬如：Table组件、ListBox组件等，虽然这些组件类型不同，但都被封装在命名空间System.Web.UI.WebControls中。Panel组件的一个最大的优点就是，他可以最为一个组件容器，就是在Panel组件中放置其他的WebForm组件，并且随着Panel组件面的变化，放置在Panel组件的其他组件也随之进行同样的变化。举一个简单例子，假定Panel组件放置了三个组件，你只需要隐藏Panel组件，就可以隐藏了另外三个组件了。这一特点，对于编写复杂的ASP.NET程序是比较重要的，因为做为ASP.NET的运行环境的载体是浏览器，如果你在程序中使用Panel组件，你往往就可以在一个浏览器页面中完成处理过程，而这在不使用Panel组件的时候，却往往需要多个浏览器页面才可以达到。这样不仅方便了程序设计人员，更方便了使用者。本文将通过编写一个用Panel组件来实现类似于Delphi中PageControl组件的程序来了解一下Panel组件的使用方法。<ccid_nobr>一、程序设计开发及运行环境：</ccid_nobr><ccid_nobr><ol><li>微软视窗2000服务器版</li><li>.Net FrameWork SDK Beta 2</li></ol></ccid_nobr><ccid_nobr>二、在ASP.NET页面中创建一个Panel组件：</ccid_nobr>创建一个Panel组件是非常容易的，只需要下列语句就可以创建一个Panel组件了：<ccid_nobr><table width="550" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code"><asp:Panel id = name runat = "server" > </asp:Panel > </td></tr></table></ccid_nobr>如果需要在Panel组件中放置其他的WebForm组件，可以在这二行语句中加入。下列代码是在Panel组件中加入一个ListBox组件：<ccid_nobr><table width="550" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code"><asp:Panel BackColor = Green height = 100% width = 100% id = Panel2 Visible = false runat = "server" > <asp:ListBox id = listbox1 runat = "server" > <asp:ListItem Value = "1" >第一条记录</asp:ListItem > <asp:ListItem Value = "2" >第二条记录</asp:ListItem > </asp:ListBox > </asp:Panel > </td></tr></table></ccid_nobr>如果要放置多个组件，可以在后面一并加入。<ccid_nobr>三、Panel组件中经常使用到的属性：</ccid_nobr>在Panel组件中经常使用到的属性有二个：Visible属性：布尔型，这是Panel组件最常使用的属性，主要功能是定义Panel组件是否可见Controls属性：主要作用是在程序运行中，动态的往Panel组件中加入组件。<ccid_nobr>四、利用Panel组件来实现类似于Delphi中PageControl组件的程序：</ccid_nobr>要想实现PageControl组件的主要功能只通过一个Panel组件是不行的，需要在程序中定义多个Panel组件，在不同的Panel组件中放置一些WebForm组件，然后通过定义Panel组件的"Visible"属性实现到底显示哪个Panel组件，从而达到PageControl组件的大致功能。以下程序（Panel.aspx）就是根据这个思路编写的，具体代码如下：<ccid_nobr><table width="550" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code"><% @ Page Language = "C#" Debug = "true" %> <% @ Import NameSpace = "System.Drawing" %> <html > <head > <title > Panel组件的演示程序 </title> <script runat = "server" > protected void Page_Load ( object sender , EventArgs e ) { Panel1 . Visible = true ; } protected void LinkButton_Click ( object sender , EventArgs e ) { //首先现隐藏所有的页面 HideAllPanels( ) ; //显示Panel1 if ( sender == Page1 ) { Panel1 . Visible = true ; } //显示Panel2 if ( sender == Page2 ) { Panel2 . Visible = true ; } //显示Panel3 if ( sender == Page3 ) { Panel3 . Visible = true ; } } protected void HideAllPanels ( ) { Panel1 . Visible = false ; Panel2 . Visible = false ; Panel3 . Visible = false ; Page1 . ForeColor = Color . Blue ; Page2 . ForeColor = Color . Blue ; Page3 . ForeColor = Color . Blue ; } </script > </head > <body > <h1 > <center >Panel组件的演示程序</h1 > </center > <form runat = "server" > <table width = 100% height = 100% cellspacing = 0 cellpadding = 0 border = 1 > <tr > <td > <asp:LinkButton id = Page1 onclick = "LinkButton_Click" runat = "server" Text = 页面01 /> &nbsp; <asp:LinkButton id = Page2 onclick = "LinkButton_Click" runat = "server" Text = 页面02 /> &nbsp; <asp:LinkButton id = Page3 onclick = "LinkButton_Click" runat = "server" Text = 页面03 /> <td > </tr > <tr > <td width = 100% height = 100% > <asp:Panel BackColor = Red height = 100% width = 100% id = Panel1 Visible = false runat = "server" > <h1 >页面01</h1 > <asp:TextBox Text = "第一个页面" runat = "server" /> </asp:Panel > <asp:Panel BackColor = Green height = 100% width = 100% id = Panel2 Visible = false runat = "server" > <h1 >页面02</h1 > <asp:ListBox id = listbox1 runat = "server" > <asp:ListItem Value = "1" >第一条记录</asp:ListItem > <asp:ListItem Value = "2" >第二条记录</asp:ListItem > </asp:ListBox > </asp:Panel > <asp:Panel BackColor = Yellow height = 100% width = 100% id = Panel3 visible = false runat = "server" > <h1 >页面03</h1 > </asp:Panel > </td > </tr > </table > </form > </body > </td></tr></table></ccid_nobr>下面这些图是程序运行的界面，怎么样，是否还真的有点类似于PageControl组件，具体如下：<ccid_nobr><center><imgsrc="http://www.hh010.com/upload_files/article/244/9_bjwtkc10682.gif"> 图01：点击"页面01"所得到的界面</center></ccid_nobr><ccid_nobr><center><imgsrc="http://www.hh010.com/upload_files/article/244/9_7cjrqk10683.gif"> 图02：点击"页面02"所得到的界面</center></ccid_nobr><ccid_nobr><center><imgsrc="http://www.hh010.com/upload_files/article/244/9_7suswq10684.gif"> 图03：点击"页面03"所得到的界面</center></ccid_nobr><ccid_nobr>五、总结：</ccid_nobr>至此就完全介绍了Panel组件的属性和一些重要的使用方法。由于在ASP.NET页面中可以使用的组件比一般程序设计中使用的组件要少许多，所以只有通过这些为数不多的组件来实现更多的组件功能。灵活使用Panel组件就可以达到这样的目标。（责任编辑 <ccid_nobr>尤北</ccid_nobr>）

页: [1]

鸿鹄论坛's Archiver

全面掌握Panel组件用法