用__doPostBack在client端更新UpdatePanel
本文介紹:用 __doPostBack 在 client 端更新 UpdatePanel,並用 Web Development Helper 觀察。
分析:
- 前 4 次連線是第一次載入時的頁面(default.aspx)本身及 3 個 AJAX 相關的 script 檔。Response:9,097。
第 5 次是按「選項1」。Response:1,042。
第 6 次是按「__doPostBack.1」。Response:1,042。
第 7 次是按「__doPostBack.2」。Response:1,042。 - 但 Request 的長度則略有不同。
用 UpdatePanel 的方式確實比原本整頁 postback 好。
但要注意:Page_Load 在普通的 postback 和 partial postback 都會執行(圖)。可以藉由 IsPostBack 和 IsInAsyncPostBack 來判斷兩者的差異。
可用 __doPostBack 第二個參數傳遞參數。
Server Side 流程
//==========================
// 第一次載入
Page_Load
IsPostBack=False
IsInAsyncPostBack=False
__EVENTTARGET=, __EVENTARGUMENT=
UpdatePanel1_PreRender
//==========================
// 按「選項1」
Page_Load
IsPostBack=True
IsInAsyncPostBack=True
__EVENTTARGET=, __EVENTARGUMENT=
Button1_Click
UpdatePanel1_PreRender
==========================
// 按「__doPostBack.1」
Page_Load
IsPostBack=True
IsInAsyncPostBack=True
__EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=參數1,參數2
UpdatePanel1_PreRender
==========================
// 按「__doPostBack.2」
Page_Load
IsPostBack=True
IsInAsyncPostBack=True
__EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=
UpdatePanel1_PreRender
==========================
// 按「清除」
Page_Load
IsPostBack=True
IsInAsyncPostBack=False
__EVENTTARGET=UpdatePanel1, __EVENTARGUMENT=
UpdatePanel1_PreRender
程式碼
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
onprerender="UpdatePanel1_PreRender">
<ContentTemplate>
票數:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="選項1" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="選項2" onclick="Button2_Click" />
<br />
<input type="button" value="__doPostBack.1" name="btn1" id="btn1" onclick="__doPostBack('UpdatePanel1', '參數1,參數2');" />
<input type="button" value="__doPostBack.2" name="btn2" id="btn2" onclick="__doPostBack('UpdatePanel1', '');" />
<br />裡面:<%=DateTime.Now.ToString() %>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnReset" runat="server" Text="清除" onclick="btnReset_Click" />
<br />外面:<%=DateTime.Now.ToString() %>
</div></form></body></html>
default.aspx.cs
using System;
using System.Diagnostics;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Debug.WriteLine("==========================rnPage_Load");
Debug.WriteLine(string.Format("tIsPostBack={0}", this.IsPostBack));
Debug.WriteLine(string.Format("tIsInAsyncPostBack={0}", this.ScriptManager1.IsInAsyncPostBack));
Debug.WriteLine(string.Format("t__EVENTTARGET={0}, __EVENTARGUMENT={1}", Request["__EVENTTARGET"], Request["__EVENTARGUMENT"]));
if (Session["0"] == null)
{
Session["0"] = 0;
Session["1"] = 0;
} // if
ShowResult();
}
protected void Button1_Click(object sender, EventArgs e)
{
Debug.WriteLine("Button1_Click");
Session["0"] = Int32.Parse(Session["0"].ToString()) + 1;
ShowResult();
}
protected void Button2_Click(object sender, EventArgs e)
{
Debug.WriteLine("Button2_Click");
Session["1"] = Int32.Parse(Session["1"].ToString()) + 1;
ShowResult();
}
private void ShowResult()
{
this.Label1.Text = string.Format("1:{0}, 2:{1}", Session["0"], Session["1"]);
}
protected void btnReset_Click(object sender, EventArgs e)
{
Session["0"] = 0;
Session["1"] = 0;
ShowResult();
}
protected void UpdatePanel1_PreRender(object sender, EventArgs e)
{
Debug.WriteLine("UpdatePanel1_PreRender");
}
}
}