2013年5月14日

AS.PNET如何使用Javascript強制作Postback

我們如果要使用Javascript進行頁面的強制Postback,那可以怎麼做呢?

首先先看一下Asp.net在Client是怎麼進行這件事,我們新增一webform.aspx,把他執行起來,檢視原始碼,可以看到以下的原始碼:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title></head>
<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="dy3kcX7QV0Js29tZUx4q0IjbXNujnTRE
+7hGeJZAAnH1+Gd0uF0Axo1b63XY+m7q+wZMmXwkp7I3pzAum1bSk/6UyeAKMj5iWnPUDshfrDE=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

</form>
</body>
</html>


上面的程式碼,postback主要是靠__doPostBack,這個function,所以我們想辦法要呼叫這個 function, 這function 的第一個參數是啟動postback的Control ID,第二個是參數,可以不傳,有傳的話,會傳到code behind對應的method。


所以我們在code behind 註冊一段呼叫__postback的javascript,ASP.NET提供了ClientScript.GetPostBackEventReference這簡便的method用:


using System;
using System.Text;

namespace WebforcwPostBack2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            prepareForcePostback();
            if (Page.IsPostBack)
                Response.Write("PostBack!!");
        }


        void prepareForcePostback()
        {
            StringBuilder sbScript = new StringBuilder();
            sbScript.Append("<script language='JavaScript' type='text/javascript'>\n");
            sbScript.Append("function forcePostback() {");
            sbScript.Append("<!--\n");
            //呼叫 __doPostBack, 第一個參數傳入啟動Postback的Contol, 這邊給this, 表示整個Page作Postback 
            sbScript.Append(ClientScript.GetPostBackEventReference(this, "PBArg") + ";\n");
            sbScript.Append("// -->\n");
            sbScript.Append("}");
            sbScript.Append("</script>\n");
            ClientScript.RegisterStartupScript(Page.GetType(), 
"AutoPostBackScript", sbScript.ToString());
        }
    }
}


註冊好的function,我們在aspx 拉一個Html button,在其onclick,作一alert,並呼叫forcePostback


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebforcwPostBack2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <br />
        <input id="Button2" type="button" value="button" onclick="alert('hi');forcePostback();"/></div>
    </form>
</body>
</html>


到這裡就大功告成了


另外在Ajax環境下,如果你是利用windows.open一個視窗,選完資料後,要觸發所更新欄位的事件,可以加入以下Javascript,在window.close後可以觸發__doPostback




window.onunload = function (e) { opener.somefunction(); 
opener.__doPostBack ('txtBox','');; 
};



 



參考



Doing or Raising Postback using __doPostBack() function from Javascript in Asp.Net


Trigger postback on code-behind

沒有留言:

張貼留言