Button按钮的一些常用方法

Button

Button 控件提供了命令按钮样式的控件,它用于将 Web 窗体页回发到服务器。下面的示例演示如何使用一个简单的 Button 控件。

在列表内冒泡按钮单击

当用于模板化的列表(如 RepeaterDataList)中时,许多 Button 控件可能会随着列表循环访问其数据源而呈现。因为这些 Button 控件中的每一个均共享同一个 ID,所以无法简单地将一个事件处理程序绑定到每个 Button 控件的 OnClick 事件来确定单击的特定 Button。若要解决此问题,请使用事件冒泡来触发容器控件(在此情况下为 RepeaterDataListDataGrid)的一个事件,再由容器将关于引发该事件的项的附加信息告知事件处理程序。

可以通过将 CommandName 属性指定为事件的名称来从 Button 引发这些事件。单击 Button 后,该命令“冒泡”到容器控件(如 Repeater),它触发自己的事件。此事件的参数可能包含附加信息,如自定义字符串或引发事件的项的索引。

下面的示例演示 Button 控件的命令如何能够冒泡到列表的 OnItemCommand 事件。 Button 控件的 CommandNameCommandArgument 字符串被传递给 OnItemCommand 事件,从而允许代码示例区分单击了哪一个按钮。

< html >
< head > < script language="C#" runat="server" >

        void Page_Load(Object Sender, EventArgs e) {

            if (!Page.IsPostBack) {

                ArrayList values = new ArrayList();

                values.Add( new PositionData("Microsoft", "Msft", "150 shares"));
                values.Add( new PositionData("Intel", "Intc", "25 shares"));
                values.Add( new PositionData("Dell", "Dell", "115 shares"));

                repeater1.DataSource = values;
                repeater1.DataBind();
            }
        }

        void Repeater1_ItemCommand( object sender, RepeaterCommandEventArgs e) {

            lblResult.Text = "<u>Command</u> is: <b>" + e.CommandName + "</b>, <u>CommandArgument</u> is: <b>" + e.CommandArgument + "</b>";
        }

        public class PositionData {

            private string name;
            private string ticker;
            private string shares;

            public PositionData( string name, string ticker, string shares) {
                this.name = name;
                this.ticker = ticker;
                this.shares = shares;
            }

            public string Name {
                get {
                    return name;
                }
            }

            public string Ticker {
                get {
                    return ticker;
                }
            }

            public string Shares {
                get {
                    return shares;
                }
            }
        }

    </ script >

</ head >
< body >

    < h3 > < font face="Verdana" >Bubbling Button Clicks Within a List </ font > </ h3 >
    < p > </ p >

    < form runat=server >
      < font face="Verdana" size="-1" >

        < asp:Repeater id=repeater1 onitemcommand="Repeater1_ItemCommand" runat="server">

            < ItemTemplate >
                < asp:Button id=btnBuy Text="Buy" CommandName="buy" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Ticker") %>' runat="server" />

                &nbsp;&nbsp;

                < asp:Button id=btnSell Text="Sell" CommandName="sell" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Shares") %>' runat="server" />

                &nbsp;&nbsp;

                < asp:Label id=lblCompany Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' Font-Bold="true" runat=server />

                < p >

            </ ItemTemplate >

        </ asp:Repeater>

        < asp:Label id=lblResult runat="server" />

      </ font >
    </ form >

</ body >
</ html >

按钮的鼠标悬停效果

可以将客户端脚本事件 onmouseoveronmouseoutButton 控件相关联,来提供鼠标悬停效果,如更改按钮的字体或颜色。在服务器上,ASP.NET 忽略客户端属性(如 onmouseover),并将之 “按原样”传递给浏览器。如果应用程序面向支持 DHTML 的新浏览器,则当光标经过按钮时将在浏览器中引发这些事件。下面的示例演示具有鼠标悬停效果的按钮。 

<html>
<head>

    <script language="C#" runat="server">

       void Button1_Click(object s, EventArgs e) {
          Label1.Text="You clicked Button1";
       }

       void Button2_Click(object s, EventArgs e) {
          Label1.Text="You clicked Button2";
       }

    </script>

</head>
<body>

    <h3><font face="Verdana">Mouse-Over Effects on Button</font></h3>
    <p>Move your mouse over the buttons to observe the mouse-over effects.</p>
    
    <form runat=server>
    <font face="Verdana" size="-1">

        <asp:Button id=Button1 runat="server"
            Text="Button1"
            Width="100px"
            οnmοuseοver="this.style.backgroundColor='yellow'"
            οnmοuseοut="this.style.backgroundColor='buttonface'"
            οnclick="Button1_Click" />

            &nbsp;&nbsp;
            Applies an inline CSS style (button background color)...

        <p>

        <asp:Button id=Button2 runat="server"
            Text="Button2"
            Width="100px"
            οnmοuseοver="this.style.fontWeight='bold'"
            οnmοuseοut="this.style.fontWeight='normal'"
            οnclick="Button2_Click" />

            &nbsp;&nbsp;
            Applies an inline CSS style (button font bold)...

        <p>
        
        <asp:Label id=Label1 runat=server />
        
    </font>
    </form>

</body>
</html>


 





 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值