ASP.NET的标准服务器控件-应用(一)

1、标签控件Label Control

1.1 示例代码

<asp:Label id="labMsg" runat="server" text="hello"/>

labMsg.Text = "<p>This is the <i>First</i> line";

labMsg.Text += "<br>" + "This is second line</p>";

标签控件在HTML的返回形式是<span id="labMsg">hello</span>

1.1 Assigning an Access Key

例子如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LabelHotKeys.aspx.cs" Inherits="LabelHotKeys" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            Using AccessKey for Controls</h1>
        <asp:Label ID="labName" runat="server" AccessKey="N" AssociatedControlID="txtName"
            Text="&lt;u>N</u>ame">
        </asp:Label>
        <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
        <asp:Label ID="labMonth" runat="server" AccessKey="M" AssociatedControlID="drpMonth"
            Text="&lt;u>M</u>onth">
        </asp:Label>
        <asp:DropDownList ID="drpMonth" runat="server">
            <asp:ListItem>January</asp:ListItem>
            <asp:ListItem>February</asp:ListItem>
            <asp:ListItem>March</asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

代码说明：红色代码的含义是当在浏览器显示结果的时候使用ALT+N(AccessKey定义的)鼠标指针的焦点转移到文本框控件txtName(AssociatedControlID)上。但是不能定义已经被浏览器所使用过的热键，例如Alt+F是浏览器用来激活浏览器菜单。

<h1>Using AccessKey for Controls</h1>
<asp:Label ID="labName" runat="server"
AccessKey="N" AssociatedControlID="txtName" Text="<u>N</u>ame">
</asp:Label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
<asp:Label ID="labMonth" runat="server"
AccessKey="M" AssociatedControlID="drpMonth" Text="<u>M</u>onth">
</asp:Label>
<asp:DropDownList ID="drpMonth" runat="server">
<asp:ListItem>January</asp:ListItem>
<asp:ListItem>February</asp:ListItem>
<asp:ListItem>March</asp:ListItem>
</asp:DropDownList>

2、Literal Control

Literal控件在HTML中不返回任何HTML标记。

3、文本框控件TextBox Control

3.1 属性

3.2 事件

4、按钮型控件Button-Style Controls

4.1 按钮Button

4.2 链接按钮LinkButton

4.3 图片按钮ImageButton

当点击按钮控件的时候，它们都向服务器提交表单，也就是说它们都向服务器回传。按钮控件可以是提交按钮或(submit button)者是命令按钮(command buttons)，默认是提交按钮，提交和命令回传服务器后分别有相应的事件处理器来处理它们(Click event handler；Command event handler)。

4.4 属性

4.5 事件

4.6 示例代码

ButtonTest.aspx

<p>

<asp:ImageButton ID="imgbtnTest" runat="server"

ImageUrl="images/navigation.gif"

AlternateText="Navigation Menu"

OnClick="imgbtnTest_Click" />

<br />

<asp:Label ID="labMessage1" runat="server"></asp:Label>

</p>

<p>

<asp:Button ID="btnTest" runat="server" Text="Click Me"

OnClick="btnTest_Click" />

<br />

<asp:Label ID="labMessage2" runat="server"></asp:Label>

</p>

<p>

<asp:LinkButton ID="lnkbtnTest" runat="server"

OnClick="lnkbtnTest_Click">

Link to click

</asp:LinkButton>

<br />

<asp:Label ID="labMessage3" runat="server"></asp:Label>

</p>

ButtonTest.aspx.cs

   1:  /// <summary>

   2:  /// Handler for the image button

   3:  /// </summary>

   4:  protected void imgbtnTest_Click(object sender,

   5:  ImageClickEventArgs e)

   6:  {

   7:  labMessage1.Text = " ImageButton Clicked Coordinates: " +

   8:  e.X.ToString();

   9:  labMessage1.Text += ", " + e.Y.ToString();

  10:  }

  11:  /// <summary>

  12:  /// Handler for the (regular) button

  13:  /// </summary>

  14:  protected void btnTest_Click(object sender, EventArgs e)

  15:  {

  16:  labMessage2.Text = "Button was clicked";

  17:  }

  18:  /// <summary>

  19:  /// Handler for the link button

  20:  /// </summary>

  21:  protected void lnkbtnTest_Click(object sender, EventArgs e)

  22:  {

  23:  labMessage3.Text = "LinkButton was clicked";

  24:  }

运行结果

4.7 命令事件Command Event

我们通常遇到的一种情况是一个页面有许多相似的按钮，比如将产品列表添加到购物车中。这种情况需用我们使用一个事件处理器来处理不同的按钮的点击事件。这个过程我们需要判断是哪个按钮激发了这Click事件，这就是Command Event。当我们点击按钮后，Click和Command事件都被激发(首先是Click事件),两者的区别在于Command将一些另外的信息通过CommandName和CommandArgument属性传递给Command Event。

示例如下：CommandTest.aspx

<h1>Simple Calculator</h1>

        <div class="box">

            <asp:TextBox ID="txtValue1" runat="server" />

            <asp:Button runat="server" ID="btnAdd" Width="30px" Text="+" OnCommand="Button_Command"

                CommandName="add" />

          <asp:Button runat="server" ID="btnSubtract" Width="30px" Text="-" OnCommand="Button_Command" CommandName="subtract" />

            <br />

            <asp:TextBox ID="txtValue2" runat="server" />

           <asp:Button runat="server" ID="btnMultiply" Width="30px" Text="*" OnCommand="Button_Command"

                CommandName="multiply" />

            <asp:Button runat="server" ID="btnDivide" Width="30px" Text="/" OnCommand="Button_Command"

                CommandName="divide" />

        </div>

<p>

            <asp:Label ID="labMessage" runat="server" /></p>

CommandTest.aspx.cs

 /// <summary>

    /// Single Command event handler for all the calculator buttons

    /// </summary>

    protected void Button_Command(Object o, CommandEventArgs e)

        double dVal1 = 0.0;

        double dVal2 = 0.0;

        // Try converting user input into double values

        bool val1okay = Double.TryParse(txtValue1.Text, out dVal1);

        //TryParse用于将字符串转换为对应的Double类型，返回类型是Boolean值，就是转换是否成功

        bool val2okay = Double.TryParse(txtValue2.Text, out dVal2);

        if (val1okay && val2okay)

            double result = 0;

            string op = "";

            switch (e.CommandName)

                case "add":

                    op = "+";

                    result = dVal1 + dVal2;

                    break;

                case "subtract":

                    op = "-";

                    result = dVal1 - dVal2;

                    break;

                case "multiply":

                    op = "*";

                    result = dVal1 * dVal2;

                    break;

                case "divide":

                    op = "/";

                    result = dVal1 / dVal2;

                    break;

            labMessage.Text = txtValue1.Text + op + txtValue2.Text

            + "=" + result;

        else

            labMessage.Text =

            "Unable to compute a value with these values";

Notice the use of the Double.TryParse method. This method is used
to convert the contents of the TextBox controls into double values. The
out keyword indicates that the variable is being passed by reference. This
means that the TryParse method returns the converted double value
within the passed variable.

4.8 处理客户端事件Working with Client-Side Events

有时候你想给按钮添加一些客户端行为(事件)。如果你想添加的客户端行为属性和服务器空间定义的属性具有相同名字该如何处理呢？通常的处理方式是将事件通过编程方式添加。例如：

myButton.Attributes.Add("onclick", "alert('Posting information...')");

ASP.NET2.0没有这个通过代码传递属性的机制，而是通过添加OnClientClick属性来实现。

例子ClientEvents.aspx

点击按钮弹出消息框，鼠标移动过按钮发生颜色改变

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientEvents.aspx.cs" Inherits="ClientEvents" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Client Events</title>

    <link href="chapterStyles.css" type="text/css" rel="stylesheet" />

    <style type="text/css">

        .normal

            border: 3px double #999999;

            padding: 0.25em;

            background-color: aliceblue;

            color: DimGray;

            font: bold 12px Verdana,Helvetica,Arial,sans-serif;

        .over

            border: 3px double DarkRed;

            padding: 0.25em;

            background-color: Red;

            color: DarkRed;

            font: bold 12px Verdana,Helvetica,Arial,sans-serif;

    </style>

</head>

<body>

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

    <div id="container">

        <h1>

            Using client-side events</h1>

        <asp:Button ID="btnTest" runat="server" Text="Click Me" CssClass="normal" OnClientClick="alert('posting to server, please wait');"

            OnMouseOver="this.className='over';" OnMouseOut="this.className='normal';" />

    </div>

    </form>

</body>

</html>

5、CheckBox Control

5.1属性和事件

5.2示例代码

CheckBoxTest.aspx

<h1>Check Box Test</h1>

        <div class="box">

            <p>Delivery:<asp:CheckBox ID="chkDelivery" runat="server" OnCheckedChanged="CheckChanged" AutoPostBack="True" /></p>

            <p><asp:Label ID="labAddress" runat="server" Text="Customer Address: " Visible="false" /><br /><asp:TextBox ID="txtAddress" runat="server" Columns="60" Visible="False" /></p>

            <p>Pizza Styles:<br /><asp:CheckBox ID="chkThin" runat="server" Text="Thin Crust" /><br />

                <asp:CheckBox ID="chkExtra" runat="server" Text="Extra Sauce" /></p>

        </div>

        <asp:Button ID="btnOrder" runat="server" Text="Order Pizza" OnClick="btnOrder_Click" />      <p><strong><asp:Label ID="labMessage" runat="server" /></strong></p>

CheckBoxTest.aspx.cs

/// <summary>

    /// Called when user changes the delivery check box

    /// </summary>

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

        if (chkDelivery.Checked)

            txtAddress.Visible = true;

            labAddress.Visible = true;

        else

            txtAddress.Visible = false;

            labAddress.Visible = false;

    /// <summary>

    /// Called when user clicks order button

    /// </summary>

    protected void btnOrder_Click(object sender, EventArgs e)

        labMessage.Text = "Pizza Order Styles: <br/>";

        if (chkThin.Checked)

            labMessage.Text += chkThin.Text + "<br/>";

        if (chkExtra.Checked)

            labMessage.Text += chkExtra.Text + "<br/>";

运行结果

6、RadioButton Control

RadioButton control与CheckBox几乎相同，因为它是CheckBox class的一个子类。它的唯一性属性只有GroupName,用来将单个的RadioButton形成一个组，执行功能类似RadioButtonList相互排斥选择的一组选项列表。

Select a philosopher: <br/>

<asp:RadioButton ID="radPhil1" Runat="server"

GroupName="phil" Text="Aristotle" />

<asp:RadioButton ID="radPhil2" Runat="server"

GroupName="phil" Text="Plato"/>

7、列表类型的控件List-Style Controls

DropDownList
ListBox
CheckBoxList
RadioButtonList
Bulleted-List

上面这些列表控件都共享同样的基类(Base Class）：ListControl class。它们的继承关系如下：

7.1属性

7.2 事件

7.3 值得注意的特性

ListControl类有一个ListItem controls集合. ListItem包括一个列表(list)中元素(item)的文本(text)和值(value).

ListItem对象(ListItem objects)可以通过声明(declaratively)和编程(programmatically)两种方式添加:

//声明方式添加ListItem

<asp:DropDownList ID="myDrop" runat="server">

<asp:ListItem Selected="True">Choose a color</asp:ListItem>

<asp:ListItem>Red</asp:ListItem>

<asp:ListItem>Blue</asp:ListItem>

<asp:ListItem Value="#00FF00">Green</asp:ListItem>

</asp:DropDownList>

//编程方式添加ListItem

ListItem li = new ListItem("Choose a color ");

li.Selected = true;

myDrop.Items.Add(li);

myDrop.Items.Add(new ListItem("Red"));

myDrop.Items.Add(new ListItem("Blue"));

// Specify both display text and value

myDrop.Items.Add(new ListItem("Green","#00FF00"));

ListControl类的循环取值

ListControlProgrammatic.aspx

<h1>Choose multiple colors (use ctrl or shift): </h1>

<asp:ListBox ID="myList" runat="server"

SelectionMode="Multiple" Rows="6">

<asp:ListItem Value="#FF0000">Red</asp:ListItem>

<asp:ListItem Value="#FF00FF">Magenta</asp:ListItem>

<asp:ListItem Value="#FFFF00">Yellow</asp:ListItem>

<asp:ListItem Value="#00FF00">Green</asp:ListItem>

<asp:ListItem Value="#00FFFF">Cyan</asp:ListItem>

<asp:ListItem Value="#0000FF">Blue</asp:ListItem>

</asp:ListBox>

<p><asp:Button ID="myBtn" runat="server" Text="Submit"/></p>

<asp:Label ID="labResult" runat="server" />

ListControlProgrammatic.aspx.cs

 /// <summary>

    /// Called each time the page loads

    /// </summary>

    protected void Page_Load(object sender, EventArgs e)

        if (IsPostBack)

            labResult.Text = "Colors chosen: <br/>";

            foreach (ListItem li in myList.Items)

                if (li.Selected)

                    labResult.Text += "<span style='color:";

                    labResult.Text += li.Value + "'>" + li.Text;

                    labResult.Text += "</span><br/>";

7.4 BulletedList

7.4.1 属性

BulletedList的显示模式HyperLink和LinkButton在外表上都一样，但是区别在于前者不回传服务器，后者回传服务器。

7.4.2 示例

BulletedListTest.aspx

 <p>Choose a display mode:

            <asp:DropDownList ID="drpDisplayMode" runat="server" OnSelectedIndexChanged="drpDisplayMode_SelectedIndexChanged"

                AutoPostBack="True">

                <asp:ListItem Selected="True">Text</asp:ListItem>

                <asp:ListItem>HyperLink</asp:ListItem>

                <asp:ListItem>LinkButton</asp:ListItem>

            </asp:DropDownList>

        </p><asp:BulletedList ID="blCompanies" runat="server" DisplayMode="Text" BulletStyle="Square"

            OnClick="blItems_Click">

            <asp:ListItem Value="http://www.microsoft.com">Microsoft</asp:ListItem>

            <asp:ListItem Value="http://www.adobe.com">Adobe</asp:ListItem>

            <asp:ListItem Value="http://www.oracle.com">Oracle</asp:ListItem>

        </asp:BulletedList>

        <p><asp:Label ID="labMsg" runat="server"></asp:Label></p>

BulletedListTest.aspx.cs

/// <summary>

    /// Handler for bullet list click

    /// (only called when DisplayMode = LinkButton)

    /// </summary>

    protected void blItems_Click(object sender, BulletedListEventArgs e)

        labMsg.Text = "The bullet item index you selected was "

        + e.Index;

    /// <summary>

    /// Handler for drop-down list of display modes

    /// </summary>

    protected void drpDisplayMode_SelectedIndexChanged(object sender, EventArgs e)

        // Get the selected value in the drop-down list

        string sMode = drpDisplayMode.SelectedItem.Text;

        // Convert the string to the display mode enum

        BulletedListDisplayMode mode = (BulletedListDisplayMode)Enum.Parse(typeof(BulletedListDisplayMode), sMode, true);

        // Change the display mode of bulleted list to selected value

        blCompanies.DisplayMode = mode;

上面的代码使用了Enum类的Parse()方法来转换DropDownList中的字符串成为BulletedList的枚举类型。另外可以用更多代码实现方式，可能更清楚的表示处理过程：

string sMode = drpDisplayMode.SelectedItem.Text;

if (sMode == "Text")

blCompanies.DisplayMode = BulletedListDisplayMode.Text;

else if (sMode == "HyperLink")

blCompanies.DisplayMode = BulletedListDisplayMode.HyperLink;

else if (sMode == "LinkButton")

blCompanies.DisplayMode = BulletedListDisplayMode.LinkButton;

7.5 RadioButtonList and CheckBoxList

7.5.1 属性

7.5.2 示例代码

CheckAndRadioLists.aspx

<div class="layout">

        Repeat Direction:

        <asp:DropDownList ID="drpDirection" runat="server">

            <asp:ListItem>Horizontal</asp:ListItem>

            <asp:ListItem Selected="True">Vertical</asp:ListItem>

             </asp:DropDownList><br />

        Repeat Layout:

        <asp:DropDownList ID="drpLayout" runat="server">

        <asp:ListItem Selected="True">Table</asp:ListItem> <asp:ListItem>Flow</asp:ListItem>

        </asp:DropDownList><br />

        Repeat Columns:

        <asp:DropDownList ID="drpColumns" runat="server">

            <asp:ListItem>1</asp:ListItem>

            <asp:ListItem>2</asp:ListItem>

            <asp:ListItem>3</asp:ListItem>

        </asp:DropDownList><br />

        <asp:Button ID="btnChange" runat="server" Text="Change Properties" OnClick="btnChange_Click" />

    </div>

    <div class="box">

        <p>Crust:<br>

            <asp:RadioButtonList ID="rlstCrust" runat="server">

                <asp:ListItem>Thin</asp:ListItem>

                <asp:ListItem>Medium</asp:ListItem>

                <asp:ListItem Selected="True">Thick</asp:ListItem>

            </asp:RadioButtonList></p>

            <p>Toppings:<br>

            <asp:CheckBoxList ID="clstToppings" runat="server" RepeatColumns="2" RepeatDirection="Vertical" RepeatLayout="Table">

                <asp:ListItem>Ham</asp:ListItem>

                <asp:ListItem>Mushrooms</asp:ListItem>

                <asp:ListItem>Pepperoni</asp:ListItem>

                <asp:ListItem>Tomatoes</asp:ListItem>

                <asp:ListItem>Green Peppers</asp:ListItem>

                <asp:ListItem>Shrimp</asp:ListItem>

                <asp:ListItem>Extra Cheese</asp:ListItem>

                <asp:ListItem>Anchovies</asp:ListItem>

            </asp:CheckBoxList> </p>

        <asp:Button ID="btnOrder" runat="server" Text="Order" OnClick="btnOrder_Click" />

    </div>

    <p><asp:Label ID="labMessage" runat="server" /></p>

CheckAndRadioLists.aspx.cs

   1:  /// <summary>

   2:      /// Handler for change properties button

   3:      /// </summary>

   4:      protected void btnChange_Click(object sender, EventArgs e)

   5:      {

   6:          // Apply the layout settings to the two lists

   7:          // First get the number of columns and apply to lists

   8:          int columns = Convert.ToInt32(drpColumns.SelectedValue);

   9:          rlstCrust.RepeatColumns = columns;

  10:          clstToppings.RepeatColumns = columns;

  11:          // Now get the layout and apply to lists

  12:          string sLayout = drpLayout.SelectedValue;

  13:          RepeatLayout layout = (RepeatLayout)Enum.Parse(typeof(RepeatLayout), sLayout, true);

  14:          rlstCrust.RepeatLayout = layout;

  15:          clstToppings.RepeatLayout = layout;

  16:          // Finally get the repeat direction and apply to lists

  17:          string sDirect = drpDirection.SelectedValue;

  18:          RepeatDirection direct = (RepeatDirection)Enum.Parse(typeof(RepeatDirection), sDirect, true);

  19:          rlstCrust.RepeatDirection = direct;

  20:          clstToppings.RepeatDirection = direct;

  21:      }

  22:      /// <summary>

  23:      /// Handler for order button

  24:      /// </summary>

  25:      protected void btnOrder_Click(object sender, EventArgs e)

  26:      {

  27:          // Get the crust from the radio list and display

  28:          labMessage.Text = "<b>Pizza Ordered: </b><br>";

  29:          labMessage.Text += rlstCrust.SelectedItem.Text;

  30:          labMessage.Text += " Crust<br/><b>Toppings:</b><br/>";

  31:          // Get all the toppings selected in list and display

  32:          foreach (ListItem topping in clstToppings.Items)

  33:          {

  34:              if (topping.Selected)

  35:              {

  36:                  labMessage.Text += topping.Text + "<br/>";

  37:              }

  38:          }

  39:      }

运行结果

8、图像控件Image Control

8.1 属性

8.2 示例代码

ImageTest.aspx

<h1>Image Control test</h1>

        <asp:Image ID="imgTest" runat="server" AlternateText="No image chosen yet" /><br />

        <asp:DropDownList ID="drpImages" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drpImages_SelectedIndexChanged">

            <asp:ListItem>Select an image to display</asp:ListItem>

            <asp:ListItem Value="2009-05-15_113726">Core Java</asp:ListItem>

            <asp:ListItem Value="2009-05-15_113835">Core C#</asp:ListItem>

            <asp:ListItem Value="2009-05-15_114132">Framework Design

Guidelines</asp:ListItem>

        </asp:DropDownList>

ImageTest.aspx.cs

protected void Page_Load(object sender, EventArgs e)

        // Hide the image until there is an item selected

        if (drpImages.SelectedIndex == 0)

            imgTest.Visible = false;

    /// <summary>

    /// Called when user selects from drop-down list

    /// </summary>

    protected void drpImages_SelectedIndexChanged(object sender,

    EventArgs e)

        // Only display image if user has selected an image

        if (drpImages.SelectedIndex > 0)

            imgTest.Visible = true;

            imgTest.ImageUrl = "~/images/" +

            drpImages.SelectedItem.Value + ".jpg";

9、ImageMap Control

9.1 属性和事件

9.2 示例代码

ImageMapTest.aspx

<h1>ImageMap Control Test</h1>

       <asp:ImageMap ID="imapMenu" runat="server" ImageUrl="images/navigation.gif" AlternateText="Menu"

            OnClick="imapMenu_Click">

            <asp:PolygonHotSpot HotSpotMode="Navigate" NavigateUrl="Home.aspx" AlternateText="Go to Home Page" Coordinates="2,3,2,39,156,39,158,18,60,18,41,3" />

       <asp:RectangleHotSpot Bottom="65" HotSpotMode="PostBack" Left="115" PostBackValue="Home"

                Right="154" Top="41" AlternateText="Go to the home page" />

       <asp:RectangleHotSpot Bottom="65" HotSpotMode="PostBack" Left="165" PostBackValue="Browse"

                Right="220" Top="41" AlternateText="Browse our products" />

       <asp:RectangleHotSpot AlternateText="Do an advanced search" Bottom="65" HotSpotMode="PostBack" Left="232" PostBackValue="Search" Right="285" Top="41" />

       <asp:RectangleHotSpot AlternateText="Find out more about us" Bottom="65" Left="293" Right="360" Top="41" />

        </asp:ImageMap>

        <br />

        <asp:Label ID="labMessage" runat="server"></asp:Label>

ImageMapTest.aspx.cs

 /// <summary>

    /// Called when hot spot has HotSpotMode=PostBack

    /// </summary>

    protected void imapMenu_Click(object sender, ImageMapEventArgs e)

        labMessage.Text = "You clicked " + e.PostBackValue;

10、HiddenField Control

隐藏字段控件的作用是用来存储页面上的值用来向服务器进行传输。

示例代码

HiddenFieldTest.aspx

<h1>HiddenField Test</h1>

    <p>Click multiple times on these two images</p>

    <div id="left">

        <div class="box">

            <asp:ImageButton ID="ibtnImage1" runat="server" ImageUrl="~/images/2009-05-15_113726.jpg"

                AlternateText="Click on me" OnClick="ibtnImage1_Click" />

            <p><asp:Label ID="labMessage1" runat="server" /></p>

            <asp:HiddenField ID="hfImage1" runat="server" /></div>

    </div><div id="right">

        <div class="box">

            <asp:ImageButton ID="ibtnImage2" runat="server" ImageUrl="~/images/2009-05-15_114132.jpg"

                AlternateText="Click on me" OnClick="ibtnImage2_Click" />

            <p><asp:Label ID="labMessage2" runat="server" /></p>

            <asp:HiddenField ID="hfImage2" runat="server" />

        </div>

    </div>

HiddenFieldTest.aspx.cs

   1:   /// <summary>

   2:      /// Called each time the page loads

   3:      /// </summary>

   4:      protected void Page_Load(object sender, EventArgs e)

   5:      {

   6:          // initialize the value in the hidden fields

   7:          if (!IsPostBack)

   8:          {

   9:              hfImage1.Value = "0";

  10:              hfImage2.Value = "0";

  11:          }

  12:      }

  13:      /// <summary>

  14:      /// Click handler for first image button

  15:      /// </summary>

  16:      protected void ibtnImage1_Click(object sender, EventArgs e)

  17:      {

  18:          IncrementCount(hfImage1);

  19:          labMessage1.Text = "# Clicks: " + hfImage1.Value;

  20:      }

  21:      /// <summary>

  22:      /// Click handler for second image button

  23:      /// </summary>

  24:      protected void ibtnImage2_Click(object sender, EventArgs e)

  25:      {

  26:          IncrementCount(hfImage2);

  27:          labMessage2.Text = "# Clicks: " + hfImage2.Value;

  28:      }

  29:      /// <summary>

  30:      /// Increments the count value in the passed hidden field

  31:      /// </summary>

  32:      private void IncrementCount(HiddenField hf)

  33:      {

  34:          int count = Convert.ToInt32(hf.Value);

  35:          count++;

  36:          hf.Value = count.ToString();

  37:      }

11、Table Control

11.1 对象模型

11.2 属性

11.3 示例代码

运行结果

TableTest.aspx

<div>

        <h1>Using Table Control</h1>

        <h2> Table via Markup</h2>

        <p><asp:Table ID="tabMarkup" runat="server">

                <asp:TableRow HorizontalAlign="Center" BackColor="#FFFF80" Font-Bold="True">

                    <asp:TableCell Width="100px" Text="First"></asp:TableCell>

                    <asp:TableCell Width="100px" Text="Second"></asp:TableCell>

                </asp:TableRow>

                <asp:TableRow HorizontalAlign="Center" BackColor="#FFFFC0">

                    <asp:TableCell Text="10.5"></asp:TableCell>

                    <asp:TableCell Text="36.5"></asp:TableCell>

                </asp:TableRow>

                <asp:TableRow HorizontalAlign="Center" BackColor="#FFFFC0">

                    <asp:TableCell Text="45.3"></asp:TableCell>

                    <asp:TableCell Text="16.5"></asp:TableCell>

                </asp:TableRow>

            </asp:Table></p>

        <h2>Table via Programming</h2>

        <p><asp:Table ID="tabProgramming" runat="server">

            </asp:Table>

        </p>

    </div>

TableTest.aspx.cs

   1:  protected void Page_Load(object sender, EventArgs e)

   2:      {

   3:          // ------- Set up table row 1 -------

   4:          TableRow tr1 = new TableRow();

   5:          tr1.BackColor = System.Drawing.Color.Goldenrod;

   6:          tr1.Font.Bold = true;

   7:          // Set up cells for row 1

   8:          TableCell tc1a = new TableCell();

   9:          tc1a.Text = "Author";

  10:          tc1a.Width = 100;

  11:          TableCell tc1b = new TableCell();

  12:          tc1b.Text = "Nationality";

  13:          tc1b.Width = 100;

  14:          // Add cells to row 1

  15:          tr1.Cells.Add(tc1a);

  16:          tr1.Cells.Add(tc1b);

  17:          // ------- Set up table row 2 -------

  18:          TableRow tr2 = new TableRow();

  19:          tr2.BackColor = System.Drawing.Color.LightGoldenrodYellow;

  20:          // Set up cells for row 2

  21:          TableCell tc2a = new TableCell();

  22:          tc2a.Text = "Milton";

  23:          TableCell tc2b = new TableCell();

  24:          tc2b.Text = "English";

  25:          // Add cells to row 2

  26:          tr2.Cells.Add(tc2a);

  27:          tr2.Cells.Add(tc2b);

  28:          // ------- add rows to table -------

  29:          tabProgramming.Rows.Add(tr1);

  30:          tabProgramming.Rows.Add(tr2);

  31:      }

11.4 Creating Accessible Tables

运行结果

返回的页面HTML源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title></head>

<body>

    <form name="form1" method="post" action="AccessibleTable.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA1OTc5NjAyMWRkHjhxb7PcBHWQ1vTioEA+znEpJZk=" />

</div>

    <div>

        <table id="tabAccessible" border="0">

    <caption align="Top">

        Timing Results for Running Test

    </caption><thead>

        <tr>

            <th id="headName">Name</th><th id="headFirst">First Trial</th><th id="headSecond">Second Trial</th>

        </tr>

    </thead><tbody>

        <tr>td headers="headName">Fred</td><td headers="headFirst">10.5</td><td headers="headSecond">36.5</td>

        </tr><tr>

            <td headers="headName">Sue</td><td headers="headFirst">45.3</td><td headers="headSecond">16.5</td>

        </tr>

    </tbody><tfoot>

        <tr><td headers="headName">Average</td><td headers="headFirst">27.9</td><td headers="headSecond">10.0</td>

        </tr>

    </tfoot>

</table>

    </div>

    </form>

</body>

</html>

AccessibleTable.aspx

<div>

        <asp:Table ID="tabAccessible" runat="server" CaptionAlign="Top" Caption="Timing Results for Running Test">

            <asp:TableHeaderRow TableSection="TableHeader">

                <asp:TableHeaderCell Text="Name" ID="headName" />

                <asp:TableHeaderCell Text="First Trial" ID="headFirst" />

                <asp:TableHeaderCell Text="Second Trial" ID="headSecond" />

            </asp:TableHeaderRow>

            <asp:TableRow>

                <asp:TableCell Text="Fred" AssociatedHeaderCellID="headName" />

                <asp:TableCell Text="10.5" AssociatedHeaderCellID="headFirst" />

                <asp:TableCell Text="36.5" AssociatedHeaderCellID="headSecond" />

            </asp:TableRow>

            <asp:TableRow>

                <asp:TableCell Text="Sue" AssociatedHeaderCellID="headName" />

                <asp:TableCell Text="45.3" AssociatedHeaderCellID="headFirst" />

                <asp:TableCell Text="16.5" AssociatedHeaderCellID="headSecond" />

            </asp:TableRow>

            <asp:TableFooterRow TableSection="TableFooter">

                <asp:TableCell Text="Average" AssociatedHeaderCellID="headName" />

                <asp:TableCell Text="27.9" AssociatedHeaderCellID="headFirst" />

                <asp:TableCell Text="10.0" AssociatedHeaderCellID="headSecond" />

            </asp:TableFooterRow>

        </asp:Table>

    </div>

posted on 2009-05-16 13:23 虎克阅读(1035) 评论(0) 收藏举报

刷新页面返回顶部

缤纷多彩的植物信息世界

公告

1、标签控件Label Control

1.1 示例代码

1.1 Assigning an Access Key

2、Literal Control

3、文本框控件TextBox Control

3.1 属性

3.2 事件

4、按钮型控件Button-Style Controls

4.1 按钮Button

4.2 链接按钮LinkButton

4.3 图片按钮ImageButton

4.4 属性

4.5 事件

4.6 示例代码

4.7 命令事件Command Event

4.8 处理客户端事件Working with Client-Side Events

5、CheckBox Control

5.1属性和事件

5.2示例代码

6、RadioButton Control

7、列表类型的控件List-Style Controls

7.1属性

7.2 事件

7.3 值得注意的特性

7.4 BulletedList

7.4.1 属性

7.4.2 示例

7.5 RadioButtonList and CheckBoxList

7.5.1 属性

7.5.2 示例代码

8、图像控件Image Control

8.1 属性

8.2 示例代码

9、ImageMap Control

9.1 属性和事件

9.2 示例代码

10、HiddenField Control

11、Table Control

11.1 对象模型

11.2 属性

11.3 示例代码

11.4 Creating Accessible Tables