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 的新瀏覽器,則當光標經過按鈕時將在瀏覽器中引發這些事件。下面的示例演示具有鼠標懸停效果的按鈕。 



     language="C#" runat="server"

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

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

    




     face="Verdana"Mouse-Over Effects on Button
    Move your mouse over the buttons to observe the mouse-over effects.
    
     runat=server
     face="Verdana" size="-1"



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

        



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

        
        
        
        
    
    





 





 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章