ASP.NET - Button Web 服务器控件概述

 

      使用 ASP.NET 按钮 Web 服务器控件可使用户能够将页发送到服务器并触发页上的事件。

一、背景

可使用 Button Web 服务器控件为用户提供向服务器发送页的能力。该控件会在服务器代码中触发一个事件，您可以处理该事件来响应回发。例如，用户可以指示已完成表单或希望执行特定的命令。

ASP.NET 包括三种按钮控件，每种按钮控件在网页上显示的方式都不同，如下表所列：

控件	说明
Button	显示一个标准命令按钮，该按钮呈现为一个 HTML input 元素。
LinkButton	呈现为页面中的一个超链接。但是，它包含使窗体被发回服务器的客户端脚本。（可以使用 HyperLink Web 服务器控件创建真实的超链接。）
ImageButton	将图形呈现为按钮。这对于提供丰富的按钮外观非常有用。ImageButton 控件还提供有关图形内已单击位置的坐标信息。

      也可以使用 HtmlButton 和 HtmlInputButton 控件在页面上创建可以在服务器代码中进行编程的按钮。

ImageMap 控件使您能够创建具有作用点的图形，用户可以单击这些作用点来执行回发或其他操作。

 

1、按钮事件

当用户单击任何 Web 服务器控件按钮时，会将该页发送到服务器。这使得在基于服务器的代码中，网页被处理，任何挂起的事件被引发。这些按钮还可引发它们自己的 Click 事件，您可以为这些事件编写事件处理程序。

 

2、Button 控件和验证

如果某一页面包含 ASP.NET 验证程序控件，则在默认情况下，单击按钮控件会导致验证程序控件执行检查。如果为验证程序控件启用了客户端验证，则在验证检查失败时不会提交该页面。

 

下表描述了按钮控件所支持的使您可以更精确地控制验证过程的属性。

属性	说明
CausesValidation	指定单击按钮是否还执行验证检查。将此属性设置为 false 可避免验证检查。
ValidationGroup	使您能够指定单击按钮时调用页面上的哪些验证程序。如果未建立任何验证组，则单击按钮会调用页面上的所有验证程序。

 

3、按钮回发行为

当用户单击按钮控件时，该页回发到服务器。默认情况下，该页回发到其本身，在这里重新生成相同的页面并处理该页上控件的事件处理程序。

可以配置按钮以将当前页面回发到另一页面。这对于创建多页窗体可能非常有用。

默认情况下，Button 控件使用 HTML POST 操作提交页面。LinkButton 和 ImageButton 控件不能直接支持 HTML POST 操作。因此，使用这些按钮时，它们将客户端脚本添加到页面以允许控件以编程方式提交页面。（因此 LinkButton 和 ImageButton 控件要求在浏览器上启用客户端脚本。）

在某些情况下，您可能希望 Button 控件也使用客户端脚本执行回发。这在希望以编程方式操作回发（如将回发附加到页面上的其他元素）时可能非常有用。可以将 Button 控件的 UseSubmitBehavior 属性设置为 true 以使 Button 控件使用基于客户端脚本的回发。

 

4、对 UpdatePanel 控件使用按钮

通过部分页呈现，可以在不进行回发的情况下刷新页的某些部分。UpdatePanel 控件使您能够标记参与部分页呈现中的页面部分。默认情况下，UpdatePanel 控件内的控件（包括 Button 控件）的行为用于执行异步回发，而不是回发。这样将只刷新回发源自的 UpdatePanel 控件的内容。

除了 UpdatePanel 控件内部的 Button 控件的方案以外，还可以在下列方案中对 UpdatePanel 控件使用 Button 控件：

·将 UpdatePanel 控件外部的 Button 控件定义为该面板的 AsyncPostBackTrigger 控件。单击该按钮时，它将执行异步回发并刷新面板的内容。

·将 UpdatePanel 控件内的 Button 控件定义为该面板的 PostBackTrigger 控件。单击该按钮时，它将执行回发，即使它位于 UpdatePanel 控件内也是如此。

 

5、处理 Button 控件的客户端事件

Button 控件既可以引发服务器事件，也可以引发客户端事件。服务器事件在回发后发生，且这些事件在为页面编写的服务器端代码中处理。客户端事件在客户端脚本（通常为 ECMAScript (JavaScript)）中处理，并在提交页面前引发。通过向 ASP.NET 按钮控件添加客户端事件，可以执行一些任务（如在提交页之前显示确认对话框以及可能取消提交）。

 

6、数据控件中的按钮

Button Web 服务器控件常用于数据控件（如 DataList、GridView 和 Repeater 列表控件）中。在这些情况下，通常不会直接响应按钮单击事件。相反，数据控件中的按钮将引发特定于数据控件的事件。例如，在 DataList 控件中，一个按钮可能引发 DataList 控件的 ItemCommand 事件而不是引发 Button 控件的 Click 事件。

因为数据绑定列表控件可以包含多个按钮，所以可以设置按钮的 CommandArgument 属性以指定作为事件的一部分传递的值。然后，可以测试该参数以确定哪个按钮被单击。

 

7、将数据绑定到控件

为了动态控制 Button Web 服务器控件的属性设置，可将其绑定到一个数据源。例如，可使用数据绑定来设置按钮的 Text 属性。

 

二、代码示例

1、如何：向 Web 窗体页添加按钮 Web 服务器控件 (Visual Studio)

      使用 Web 服务器控件可以轻松地向 Web 窗体页添加不同类型的按钮。有三种类型的按钮 Web 服务器控件：Button、LinkButton 和 ImageButton。

将 ImageButton 控件添加到页面比处理其他类型的按钮稍微麻烦一些。有关详细信息，请参见 如何：向 Web 窗体页添加 ImageButton Web 服务器控件 (Visual Studio)。

      A、从工具箱的“标准”选项卡中，将 Button 或 LinkButton 控件拖到页面上。

      B、在“属性”窗口的“外观”类别中，通过设置控件的 Text 属性指定按钮标签。

 

定义访问键

若要使用户单击按钮更容易，可为按钮定义一个访问键。然后用户可以同时按 Alt 键和访问键来单击该按钮。

      说明： 并不是所有的浏览器都支持访问键。

 

定义按钮的访问键

在“属性”窗口的“可访问性”类别中，将按钮控件的 AccessKey 属性设置为单个字母或数字。例如，若要生成访问快捷键 Alt+B，请将 B 指定为 AccessKey 属性的值。

      说明： 在 Windows 应用程序中，访问键通常在按钮上用一个带下划线的字符表示。由于 HTML 中的限制，这种标记方法不适用于按钮 Web 服务器控件。如果希望能够显示按钮的访问键，可以使用 HtmlButton 控件。

 

2、如何：向 Web 窗体页添加 ImageButton Web 服务器控件 (Visual Studio)

      当您想要将图片或图像显示为超链接时，可以向 Web 窗体页添加 ImageButton Web 服务器控件。

说明： 若要创建具有多个可单击区域的图像时，您可以使用 ImageMap 控件。

      A、从工具箱的“标准”选项卡中，将 ImageButton Web 服务器控件拖动到页面上。

B、在“属性”窗口的“外观”类别中，将按钮的 ImageUrl 属性设置为指向一个图像文件（.gif、.jpg 等）。

说明： 在 ImageUrl 属性框中单击省略号 (...) 按钮，以使用“选择图像”对话框来选择图像。

      可使用 URL 或 UNC 路径指向任意位置的图像文件。

安全说明： 与 ImageButton 控件相关联的 URL 可能会被用户恶意篡改。

 

3、如何：确定 ImageButton Web 服务器控件中的坐标

      当用户单击 ImageButton 控件时，将向控件的 Click 事件的事件处理程序传递包含指示用户单击位置的坐标的参数。这允许您基于用户单击的位置执行不同的任务。

      说明： 要将图像的特定区域定义为用户可单击的区域时，也可以使用 ImageMap 控件。

      坐标信息作为 ImageButton 控件的 Click 事件的事件参数对象的组成部分发送。

A、为 ImageButton 控件的 Click 事件创建一个事件处理程序。在该方法中，事件参数对象的类型必须是 ImageClickEventArgs。

B、在 Click 事件处理程序中，获取 ImageClickEventArgs 参数对象的 X 和 Y 属性。

x 坐标和 y 坐标用像素表示，图像左上角的坐标是 (0,0)。

下面的示例显示如何确定用户在一个大小为 100 x 100 像素的图形上单击的位置。代码获取用户单击位置的 x 坐标和 y 坐标。然后，将它们与预设值进行比较，确定用户是否是在特定象限中单击的。结果显示在 Label 控件中。

protected void ImageButton1_Click(object sender,

    System.Web.UI.ImageClickEventArgs e)

{

    string msg = "";  

    int x = e.X;  

    int y = e.Y;  

 

    // The button graphic is assumed to be 100x100 pixels.

    // This checks coordinates against predetermined values that

    // make up quadrants of the picture.

    if(x >= 50 && y >= 50)

    {

        msg = "Southeast";

    }

    else if(x >=50 && y < 50)

    {

         msg = "Northeast";

    }

    else if(x < 50 && y >= 50)

    {

        msg = "Southwest";

    }

    else if(x < 50 && y < 50)

    {

        msg = "Northwest";

    }

    Label1.Text = msg;

}

 

4、如何：响应 Button Web 服务器控件事件

      单击 Button、LinkButton 或 ImageButton Web 服务器控件时，当前页被提交给服务器并在那里进行处理。

为下列事件之一创建事件处理程序：

·页的 Page_Load 事件。因为按钮总是将页发送给服务器，所以该方法总是在运行。如果只提交相应窗体，单击哪个按钮并不重要，则使用 Page_Load 事件。

·按钮的 Click 事件。当了解哪个按钮被单击很重要时，编写该事件的事件处理程序。

      说明： 如果使用的是 ImageButton 控件，并且想知道用户单击位置的 x 坐标和 y 坐标，则必须为该事件创建一个事件处理程序。

      下面的示例演示当用户单击 Button Web 服务器控件时的响应方法。该方法在 Label Web 服务器控件中显示一条消息。

public void Button1_Click (object sender, System.EventArgs e)

{

   Label1.Text="You clicked a button.";

}

      下面的示例演示在 Page_Load 事件处理程序中响应按钮单击的方法。该方法测试页的 IsPostBack 属性，确定该页是否是第一次处理或者是否是通过单击按钮提交的。

private void Page_Load(object sender, System.EventArgs e)

{

   if (!IsPostBack)

   {

      // Evals true first time browser hits the page.

   }

   else

   {

      // This is called if the form has been posted back, possibly

      // by a button click.

      this.Label1.Text = "You clicked a button.";

   }

}

      下面的示例显示一个具有四项功能的简单的整数计算器。通过将所有按钮（“加”、“减”、“乘”和“除”）绑定到同一方法，可以在一个位置处理全部计算，从而避免重复代码。将这些按钮绑定到 Calculate 方法是通过使用 Visual Basic 中的 AddHandler 方法和 C# 中的 += 运算符完成的。为确保输入值为整数，可以将错误处理代码添加到 Calculate 方法，或者使用可用于 Web 窗体的验证控件。

// Set the CommandName property of the buttons to "Add", _

// "Subtract", "Multiply", and "Divide".

protected void Page_Load(object sender, EventArgs e)

{

   btnAdd.Click += new System.EventHandler(this.Calculate);

   btnSubtract.Click += new System.EventHandler(this.Calculate);

   btnMultiply.Click += new System.EventHandler(this.Calculate);

   btnDivide.Click += new System.EventHandler(this.Calculate);

}

 

protected void Calculate (object sender, System.EventArgs e)

{

   int op1 = Convert.ToInt16(TextBox1.Text);

   int op2 = Convert.ToInt16(TextBox2.Text);

   int result = 0;

   switch(((Button)sender).CommandName)

   {

      case "Add" :

         result = op1 + op2;

         break;

      case "Subtract" :

         result = op1 - op2;

         break;

      case "Multiply" :

         result = op1 * op2;

         break;

      case "Divide" :

         // Integer division.

         if (op2 > 0)

               result = op1 / op2;

         else

               result = 0;

         break;

      default:

         // Error handling code here.

         break;

   }

   Label1.Text = result.ToString();

}

 

5、如何：响应客户端脚本中的 Button Web 服务器控件事件

      Button 控件既可以引发服务器事件，也可以引发客户端事件。服务器事件在回发后出现，且这些事件在为页面编写的服务器端代码中进行处理。客户端事件在客户端脚本（通常为 JavaScript (ECMAScript)）中处理，并在提交页面前引发。通过向 ASP.NET 按钮控件中添加客户端事件，可以执行各种任务，包括在提交页面前显示确认对话框，以及取消页面提交。

      在要添加客户端脚本的 ASP.NET 按钮 Web 服务器控件（Button、LinkButton 或 ImageButton 控件）中，将 OnClientClick 属性设置为要运行的客户端脚本。

      说明： 如果希望可以取消提交，请将 OnClientClick 属性设置为字符串“Return”和函数名称。此时，该客户端脚本可以通过返回 false 取消提交。

下面的代码示例演示如何向 Button 控件中添加客户端脚本 click 事件。

<%@ Page Language="C#" %>

<script runat="server">

    void Button1_Click(Object sender, EventArgs e)

        Label1.Text = "Server click handler called.";

    End Sub

</script>

 

<html  >

<body>

  <form id="form1" runat="server">

    <asp:Button ID="Button1" Runat="server"

      OnClick="Button1_Click"

      OnClientClick="return confirm('Ready to submit.')"

      Text="Test Client Click" />

    <br />

    <asp:Label ID="Label1" Runat="server" text="" />

  </form>

</body>

</html>