2010年5月27日 星期四

[ASP.NET]左右ListBox選單(3) -- 非同步PostBack Trigger

 承[ASP.NET] 左右ListBox選單(1) -- 按鈕Trigger[ASP.NET] 左右ListBox選單(2) -- Javascript Trigger的主題,有介紹以雙擊(double click)去觸發PostBack,然而以javascript送出則會有整頁往後送的效果,網頁會閃爍。
本文介紹將Control放入Update Panel來避免頁面閃爍的現象,另以非同步的javascript去做PostBack,同時可達到雙擊的效果與簡短了程式碼的撰寫。

首先,承上文的Code:
  1. Control放入UpdatePanel中
  2. ListBox的Control內加入Double Click事件的Function
  3. __doPostBack('ButtonRight','')  為非同步送出觸發ButtonRight 的事件
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table align="center" class="style1" style="width: 400px">
            <tr>
                <td align="left" style="font-weight: bold; font-size: 13px; font-family: Arial" width="150px">
                    可選擇的ProductID </td>
                <td>
                    &nbsp; </td>
                <td align="left" style="font-weight: bold; font-size: 13px; font-family: Arial">
                    已選擇的ProductID </td>
            </tr>
            <tr>
                <td align="left">
                    <asp:ListBox ID="ListBoxLeft" ondblclick="__doPostBack('ButtonRight','')" runat="server"
                        Rows="5" SelectionMode="Multiple" Width="150px"></asp:ListBox>                                                    
                </td>
                <td align="center">
                    <asp:Button ID="ButtonRight" runat="server" OnClick="ButtonRight_Click" Text=" > "
                        Width="40px" CssClass="barkbutton" />
                    <br />
                    <asp:Button ID="ButtonRightAll" runat="server" OnClick="ButtonRightAll_Click" Text=">>"
                        Width="40px" CssClass="barkbutton" />
                    <br />
                    <asp:Button ID="ButtonLeft" runat="server" OnClick="ButtonLeft_Click" Text=" < "
                        Width="40px" CssClass="barkbutton" />
                    <br />
                    <asp:Button ID="ButtonLeftAll" runat="server" OnClick="ButtonLeftAll_Click" Text="<<"
                        Width="40px" CssClass="barkbutton" />
                </td>
                <td align="left">
                    <asp:ListBox ID="ListBoxRight" ondblclick="__doPostBack('ButtonLeft','');" runat="server" Rows="5" SelectionMode="Multiple" Width="150px">
                    </asp:ListBox>
                </td>
            </tr>            
        </table>
    </ContentTemplate>
</asp:UpdatePanel>

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

沒有留言:

張貼留言