4.5　按钮服务器控件

按钮是提交窗体的常用元素，在Web应用程序和用户交互时，常常需要提交表单、获取表单信息等操作。按钮控件能够触发事件，或者将网页中的信息回传给服务器。Web服务器控件中包括Button、LinkButton和ImageButton三种类型的按钮，这三种按钮提供类似的功能，但具有不同的外观。

4.5.1　Button控件

Button按钮控件是一种常见的单击按钮传递信息的方式，能够把页面信息返回到服务器。该控件定义的语法如下：

或

Button控件除了基本属性之外，还有以下几个重要的属性和事件。

●　Text：设置或获取在Button控件上显示的文本内容，用来提示用户进行何种操作。

●　CommandName：用于设置和获取Button按钮将要触发事件的名称。当有多个按钮共享一个事件处理函数时，通过该属性来区分要执行哪个Button事件。

●　CommandArgument：用于指示命令传递的参数，提供有关要执行命令的附加信息以便在事件中进行判断。

●　OnClick：当用户单击按钮时要执行的事件处理方法。

●　Command：在单击Button控件时发生的服务器端事件。

●　PostBackUrl：获取或设置单击Button时从当前页发送到的网页URL。

●　OnClientClick：在单击Button控件时发生的客户端事件。

虽然Click和Command事件都能够响应单击事件，但它们并不相同。

Click事件在单击Button控件时发生。在开发过程中，双击Button按钮，便可为其自动产生事件触发函数，然后直接在此函数内编写所要执行的代码即可。以下是代码示例：

Command事件相对于Click事件具有更为强大的功能。它通过关联按钮的CommandName属性，使按钮可以自动寻找并调用特定的方法，还可以通过CommandArgument属性向该方法传递参数。

这样做的好处在于，当页面上需要放置多个Button按钮时，分别完成多个任务，而这些任务非常相似，容易用统一的方法来实现，不必为每个Button按钮单独实现Click事件，而可通过一个公共的处理方法结合各个按钮的Command事件来完成。

另外值得注意的两个属性：

●　PostBackUrl属性用于设置网页的URL，指示此Button按钮从当前页提交给哪个网页，默认为空，即本页。可以利用它进行跨页面的数据传送。

●　OnClientClick属性指向客户端函数，与指向服务器端事件的OnClick属性不同。

Visual Studio 2012可以同时处理服务器端脚本标记与客户端脚本标记，它们能无缝工作。

4.5.2　LinkButton控件

LinkButton控件是一个超链接按钮控件，它是一种特殊的按钮，其功能和普通按钮控件Button类似，但是该控件是以超链接的形式显示的。LinkButton控件外观和HyperLink相似，功能和Button相同。HyperLink控件声明的语法定义如下所示：

或

LinkButton控件的属性和Button控件非常相似，具有CommandName、CommandArgument属性，以及Click和Command事件，请参考上节的内容，这里不再赘述。

可以为上面定义的LinkButton1添加如下事件代码：

4.5.3　ImageButton控件

ImageButton控件是一个显示图片的按钮，其功能和普通按钮Button类似，但是ImageButton控件是以图片形式显示的。其外观与Image控件相似，但功能与Button相同。ImageButton控件定义的语法如下：

或

ImageButton控件除了基本的属性之外，其他重要的常用方法和事件如下。

●　ImageUrl：用于设置和获取在ImageButton控件中显示的图片位置。

●　OnClick事件：用户单击按钮后的事件处理函数。

●　AlternateText：图像无法显示时替换文字。

ImageButton控件大部分的属性与Button控件类似，下面将主要介绍该控件中的ImageUrl属性。ImageUrl属性用于设置控件显示的图像位置。在设置时可以用相对URL，也可以使用绝对URL。相对URL是图像的位置与网页的位置相关，当移植到其他地点时不需要修改ImageUrl属性值，而绝对URL使图像的位置和服务器的完整路径相关，需要修改。ImageButton控件的常用事件Click，是在单击ImageButton控件时引发的事件。

【实例4-3】按钮控件的使用

在电子商务网站中每个产品都会有图片介绍，这个图片通常会使用ImageButton控件，当用户单击图片后就可进入该产品信息介绍的页面，具体实现步骤如下：

01　启动Visual Studio 2012，执行“文件”|“新建项目”命令，打开“新建项目对话框”。创建一个名为“实例4-3”的ASP.NET空Web网站。

02　用鼠标右键单击解决资源管理器中生成的网站名“实例4-3”，在弹出的快捷菜单中选择“添加”|“添加新项”，在弹出的“添加新项”对话框中创建一个名为Default.aspx的窗体。

03　在网站根目录下添加一个产品的图片文件。

04　单击网站目录下的Default.aspx文件，进入“视图编辑”界面，打开“设计视图”，从工具箱中拖动一个ImageButton到编辑区中。然后切换到“源视图”，在编辑区中的<form></form>标记之间编写如下代码：

以上代码第1行～第12行设计了一个2行1列的表格。其中，第2行～第6行在表格的第一行中显示标题文字；第7行～第11行在表格的第二行添加了一个图片按钮控件，设置其ImageUrl属性获取图片路径和触发单击的事件Click。

05　在网站根目录下创建一个显示商品信息的窗体Information.aspx。

06　单击创建好的Information.aspx文件，进入“视图编辑”界面，打开“源视图”，在编辑区中的<form></form>标记之间编写如下代码：

以上代码第1行～第5行分别显示产品的主要信息，包括产品编号、名称、类别和价格信息。

07　双击网站目录下的Default.aspx.cs文件，编写关键代码如下：

以上代码中第1行定义处理ImageButton单击事件Click的方法。第2行使用Response对象的Redirect方法，跳转到显示商品信息页面Information.aspx。

08　按快捷键Ctrl＋F5运行程序，如图4-6所示。单击商品图片可以进入如图4-7所示的产品信息页面。

图4-6　运行结果1

图4-7　运行结果2