2010年5月26日 星期三

[ASP.NET]左右ListBox選單(2) -- Javascript Trigger

[ASP.NET] 左右ListBox選單(1) -- 按鈕Trigger 的主題,選取Value後按下中間的四個按鈕觸發PostBack,本文將雙擊(double click)的動作加入觸發PostBack的行列,讓選取的時候更加方便與直覺。

首先,承上文的Code:
  1. <head></head>之間加入javascript,雙擊時將送出form
  2. ListBox的Control內加入Double Click事件的Function,並加入一個hidden欄位
  3. CS頁面內加入接收雙擊ListBox時操作
加入Javascript
<script language="javascript">
     function ListBox1_DoubleClick() {
       /* we will change value of this hidden field so  that inpage load event we can identify event.
       */
        document.forms[0].ListBox1Hidden.value = "doubleclicked";
        document.forms[0].submit();
     }
</script>

ListBox加入事件並加hidden 欄位
<asp:ListBox ID="ListBoxLeft" ondblclick="ListBox1_DoubleClick()" runat="server"
Rows="5" SelectionMode="Multiple" Width="150px"></asp:ListBox>       
<input type="hidden" name="ListBox1Hidden" /> 

cs頁面加入ListBox Double Click Code
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Params["ListBox1Hidden"] != null && (string)Request.Params["ListBox1Hidden"] == "doubleclicked")
    {
        ButtonRight_Click(null,null);
    }
}
雙擊左方的ListBox則當成第一個向右按鈕被觸發。

[ASP.NET]左右ListBox選單(1) -- 按鈕Trigger
[ASP.NET]左右ListBox選單(2) -- Javascript Trigger
[ASP.NET]左右ListBox選單(3) -- 非同步PostBack Trigger

沒有留言:

張貼留言