0

有時候，我們需要透過JavaScript觸發UpdatePanel的更新動作。我個人偏好在UpdatePanel中放一顆按鈕，然後由Javascript來"按"下這顆按鈕。如此，更新邏輯就可大大方方地寫在Button的Server-Side Click事件中，跟標準的ASP.NET AJAX設計方式相同，程式區塊一目瞭然，對寫程式跟看程式的人來說，都很直覺易懂。

例如以下的範例:

<form id="form1" runat="server">
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
    <a href="javascript:$get('Button1').click();void(0);">
    Trigger UpdatePanel With JavaScript&nbsp;</a><br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <br />
            <asp:Button ID="Button1" runat="server" Text="Button" 
            OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
</form>

Server-Side Code如下:

protected void Page_Load(object sender, EventArgs e)
{
    Label2.Text = DateTime.Now.ToString("HH:mm:ss");
}
protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString("HH:mm:ss");
}

UpdatePanel上方有個Label2, UpdatePanel中則有Label1及Button1，按下Button1就可觸發UpdatePanel的動態更新Label1的時間顯示，形成Label1.Text!=Label2.Text的效果當作動態更新的驗證。Javascript觸發Button1按下動作，則用$get("Button1").click()的寫法完成。

用IE開啟，測試OK! 一切看來都很順利，不是嗎?

美好的假像可以維持到你使用FireFox測試為止(當然你也可以選擇當鴕鳥，禁止User使用IE以外的瀏覽器)。在FireFox中，$get("Button1").click()會觸發POSTBACK~~~ AJAX破功了!

依據這串討論文章，似乎指向FireFox並未依W3C的規範實作click()行為。不過，不Work就是不Work，誰對誰錯又如何? 很幸運地，討論串中就有解決方案，我們可以利用UseSubmitBehavior="false"改變Button的HTML呈現:

由原來的
<input type="submit" name="Button1" value="Button" id="Button1" />
變成以下形式
<input type="button" name="Button1" value="Button" 
onclick="javascript:__doPostBack('Button1','')" id="Button1" />

搞定收工!


Comments

Be the first to post a comment

Post a comment