UpdatePanel PostBack時執行Javascript範例

之前寫過一篇介紹在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>
歡迎推文分享:
Published 08 December 2007 01:09 AM 由 Jeffrey
Filed under: , , ,
Views: 40,188



意見

# 馬克 said on 21 February, 2009 06:49 PM

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

# Jeffrey said on 23 February, 2009 01:46 PM

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

# 魔方网 said on 03 March, 2009 07:27 PM

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

# gym said on 14 April, 2009 03:38 AM

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

# 小路 said on 25 August, 2010 04:16 AM

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

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<December 2007>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication