November 16, 2009

如何在單一頁面設置多個Default Button

小弟前陣子執行的專案中,有個需求是這樣的
系統登入的頁面中,有可以輸入帳號密碼的登入區塊
也有可以輸入關鍵字的資料查詢區塊
甲方希望在登入區塊輸入帳號密碼後可以不用按登入按鈕,直接按Enter也可以進行登入程序,而在資料查詢區塊中輸入關鍵字後不用按搜尋按鈕,直接按Enter即可進行查詢

原本想用Form提供的屬性DefaultButton來解決這個問題,但Form的DefaultButton只能設訂給其中一個Button,而我有兩個Button要設定

後來發現,原來Panel也有DefaultButton的屬性,只要我們登入區塊放至在Panel A,而資料查詢區塊放至在Panel B再將Panel A的DefaultButton設為登入按鈕的ID,Panel B的DefaultButton設為搜尋按鈕的ID,即可達到上述的需求

以下是部份範例程式,供各位參考

MultiDefaultButton.aspx
<form id="form1" runat="server">
    <div>
        <asp:panel id="Panel_Login" runat="server" defaultbutton="Button_Login">
            帳號:<asp:TextBox ID="TextBox_Account" runat="server"></asp:TextBox>
            密碼:<asp:TextBox ID="TextBox_Password" runat="server"></asp:TextBox>
            <asp:Button ID="Button_Login" runat="server" Text="登入" 
                OnClick="Button_Login_Click" />
        </asp:panel>
    </div>
    <br />
    <asp:panel id="Panel_Search" runat="server" defaultbutton="Button_Search">
        關鍵字:<asp:TextBox ID="TextBox_Keyword" runat="server"></asp:TextBox>
        <asp:Button ID="Button_Search" runat="server" Text="搜尋" 
            OnClick="Button_Search_Click" />
    </asp:panel>
</form>
MultiDefaultButton.aspx.cs
protected void Button_Login_Click(object sender, EventArgs e)
{
    Response.Write(string.Format("您輸入的帳號為{0},密碼為{1}", this.TextBox_Account.Text, this.TextBox_Password.Text));
}

protected void Button_Search_Click(object sender, EventArgs e)
{
    Response.Write(string.Format("您輸入的關鍵字為{0}", this.TextBox_Keyword.Text));
}

執行結果
1. 輸入帳號密碼後按Enter

2. 輸入關鍵字後按Enter