使用.Net和C#开发Web应用程序往往能给我们很大的启示,尤其在开发相对简单的例行任务时就更是如此。例如,在许多时候,我们都需要有条件地显示一个网页的一部分。需要这么做的原因有许多,例如,根据用户的角色,有一部分是它不应当看到的。或者,我们也可以考虑搜索功能,只有点击了一个链接后,搜索选项才是可用的。
我们先来解释一下解决这一问题的方法,然后再详细地解释所使用的代码。在.Net中开发Web应用程序,我们既可以使用服务器端的Web控件(Web表单)也可以使用HTML控件。使用.NET开发Web应用程序的重点是服务器端控件。我们在本文中就使用了Web表单服务器端控件。
Panel是一个服务器端的Web表单控件,一个Panel控件就是HTML网页上的一个矩形区域,它是否可见可以在服务器端进行控制。因此,首先,我们可以从将HTML代码段放在一个Panel控件中,HTML代码段可以由服务器端控件和客户端控件组成。一旦我们将Panel控件的visibility属性设置为“false”,则整个HTML代码段就成为不可见的了。其次,我们可以使用名字为LinkButton的另一个Web表单控件,它本质上是一个超级链接,但通过服务器端的OnClick方法,它可以起到按钮的作用。在这种方法中,我们只要简单地访问Panel对象的C#语言表示,并将其visibility属性设置为true或false,网页就会自动地刷新自己。
在.NET中开发Web应用程序的一个重要差别是,网页上的每个控件都被表示为服务器端的一个.NET对象,而且这些对象(控件)的状态通过与服务器间的多次交互来维护,这就使我们能够对服务器端和客户端的事件作出反应。响应服务器端的事件时,百网页重新刷新时,其内部的所有对象(控件)也都会得到刷新。我们无需再绘制任何控件,这一切都是自动完成的。这种方法最有吸引力的是一个好的面向对象编程人员能够在一种编程语言模式中工作,而且可以方便地使用JavaScript,调试也非常简便。这种方法的一个小问题就是它不能使用FrontPage或Dreamweaver等HTML代码编辑器。一旦这个问题得到了解决,服务器端的编程模式就更完善了。
下面是编写本文中例子代码所需要的步骤:
·为HTML代码段获得Panel控件。
·将HTML代码置入Panel控件中。
·创建一个LinkButton控件。
·提供一个onClick函数。
·在按钮的点击函数中隐藏/显示Panel控件。
1、为HTML代码段获得Panel控件
打开网页(.aspx)的设计视图,并选择“Webforms控件”工具箱,从工具箱中拖出一个Panel控件到HTML网页的设计视图上。这时就会看到一个矩形框,发改变它的大小,直到能够容下你想输入的HTML代码段。
下面是HTML设计视图中Panel控件的定义:
<TABLE cellSpacing=0 cellPadding=0 width=600 bgColor=#ffffff border=0>
<?xml:namespace prefix = asp />
<asp:panel id=TestPanel Width="398px" Height="171px" runat="server">
HTML GOES HERE
</asp:panel>
</TABLE>
2、将我们的HTML代码输入到Panel控件中
在Panel控件中编写相关的HTML代码(或将HTML代码拖到Panel控件中),下面是一个例子:
<asp:panel id=TestPanel Width="398px" Height="171px" runat="server">
<H2>An example HTML segment that is going to disappear </H2>
An example drop down
<asp:DropDownList id=ADropDownListBox runat="server">
</asp:DropDownList>
</asp:panel>
3、创建一个LinkButton控件
我们需要对这一部分作一些解释。我们为什么会用LinkButton控件取代一个超级链接呢?超级链接意味着我们可以随意到包括当前的网页在内的任意网页上,但并不意味着我们要返回正在修改的网页。另外,也没有象OnClick这样能够处理超级链接的服务器端方法。
LinkButton的外观和风格与hyperlink相同,但它还有另外二点好处,即:
·点击时能够返回同一个网页。
·便于使用的OnClick方法。
下面是一个LinkButton控件定义的例子:
<asp:LinkButton id=ChangeAppearanceButton runat="server">
Change Appearance
</asp:LinkButton>
4、提供onClick函数
如果双击LinkButton控件,IDE就会自动地将我们引到服务器端该控件的OnClick方法处,在这里我们就可以编写隐藏Panel控件的代码。
5、在按钮的OnClick方法中隐藏/显示Panel控件
下面是OnClick方法的一个例子:
···
···