UpdatePanel PostBack 時執行 Javascript 範例

11/19/2009 10:50:31 PM

之前寫過一篇介紹在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>

<%@ 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>

<%@ 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>

作者：Jeffrey



	首页新闻动态技术文档域名空间联系我们关于我们企业邮箱留言版



	昆明索仕科技开发有限公司版权所有 Copyright© 2002-2010 Kunming Source Technology Exploitive Co.,LTD. All Rights Reserved. 电话：0871-5627877　业务QQ：163871　本站基于:索仕网站信息管理系统建设版本 2.0.4325