之前寫過一篇介紹在UpdatePanel動態更新時觸發Javascript的方法,不過有網友反應不清楚實作的細節,索性就寫一個極簡單的程式,實際示範一下。

<%@ Page Language="C#" AutoEventWireup="true" %>
<html>
<head><title>UpdatePanel Call Javascript</title></head>
<body>
    <form id="form1" runat="server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:Button ID="Button1" runat="server" Text="Button" 
                onclick="Button1_Click" />
                <asp:HiddenField ID="hdnScript" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(blah);
        function blah() {
            eval($get("hdnScript").value);
        }
        </script>
    </form>
<script type="text/C#" runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
    hdnScript.Value = "alert('I did it!');";
}
</script>
</body>
</html>

運作的原理是利用add_endRequest()在每次UpdatePanel Postback時觸發blah()函數,blah()會用eval()執行Hidden欄位的字串值,所以在Server-Side將要執行的Javascript Code以字串方式傳回,按下按鈕後就會被執行。That's all, folks.

PS: 順便宣導一下資安觀念,傳回的Javascript Code不宜開放給User自行輸入或更動,不然會造成XSS攻擊的漏洞。
PS2: 用VS 2008寫這段Code時,輸入Sys.WebForms.PageRequestManager.getInstance()後還會提示add_Request,不亦快哉!!

Update 2007-12-08

Javascript牛人Ammon再露了一手,提供更簡便的做法ScriptManager.RegisterStartupScript(),在此謝過:

<%@ Page Language="C#" AutoEventWireup="true" %>
<html>
<head><title>UpdatePanel Call Javascript</title></head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" 
                onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
<script type="text/C#" runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Button1, typeof(Button),
        "alert", "alert('Amazing');", true);
}
</script>
</body>
</html>

Comments

# by 馬克

請問一下,您是否有試過,如第二個範例一般,但是ScriptManager.RegisterStartupScript改成一個confirm,confirm成立的話,再去觸發另一個button的事件呢?

# by Jeffrey

to 馬克,聽起來是可行的,你在實作上有遇到困難嗎?

# by 魔方网

to Jeffrey 做起来比较困難,不好实现。

# by gym

to 馬克,如果实现麻烦在这里告诉下

# by 小路

最近有遇到這個需求,只是postback 的對象為 GridView 裡面的 label XD,這又該如何實現呢?請教了。

Post a comment


23 - 6 =