淺析UpdatePanel的partial render原理 ??????在我接觸ajax.net前，update panel的大名已經(jīng)是如雷貫耳了。update panel到底如何實(shí)現(xiàn)partial render的呢，半年來一直塞在我的思緒中。
??????一個(gè)星期前，終于開始了我的ajax.net之旅,美妙絕倫的js 擴(kuò)展令人陶醉。但不幸的是在我以u(píng)pdatepanel machinism,inside updatepanel ajax等等等為關(guān)鍵字 google，baidu后依然沒有任何斬獲，大多數(shù)搜到的條目都是告訴你如何往updatepanel里面拖控件的。我也知道博客園眾多高人，其中老趙同志最為顯目，我翻了他的很多文章，都沒能打開我的心結(jié)。（可能他寫過相關(guān)文章，我沒找到。）
???? 沒辦法，只好用reflector打開程序集，我努力的尋找，尋找那個(gè)方法，那個(gè)能改變呈現(xiàn)流程的方法。終于我找到了你??----------- SetRenderMethodDelegate。
??????以下代碼模擬了update panel的partial render行為。
?ParialRender.aspx.cs?

using?System;
using?System.Data;
using?System.Configuration;
using?System.Collections;
using?System.Web;
using?System.Web.Security;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.WebControls.WebParts;
using?System.Web.UI.HtmlControls;
using?System.Collections.Specialized;

public?partial?class?PartialRender?:?System.Web.UI.Page
{
????private?static?Random?random?=?new?Random();

????protected?void?Page_Load(object?sender,?EventArgs?e)
????{
????????NameValueCollection?headers?=?this.Request.Headers;
????????//?識(shí)別異步回調(diào)
????????if(headers["x-myajax"]?!=?null)
????????{
????????????this.SetRenderMethodDelegate(this.MyAjaxPageRender);
????????????this.form1.SetRenderMethodDelegate(this.MyAjaxFormRender);
????????}
????}

????//?改變頁面的呈現(xiàn)流程
????private?void?MyAjaxPageRender(HtmlTextWriter?writer,?Control?page)
????{
????????this.form1.RenderControl(writer);
????}

????//?改變form的呈現(xiàn)流程
????private?void?MyAjaxFormRender(HtmlTextWriter?writer,?Control?page)
????{
????????this.UpdatePanel.RenderControl(writer);
????}

????protected?void?btnSubmit_Click(object?sender,?EventArgs?e)
????{
????????this.txtRandomNumber.Text?=?random.Next(1000).ToString();
????}
}

PartialRender.aspx

<%@?Page?Language="C#"?AutoEventWireup="true"?CodeFile="PartialRender.aspx.cs"?Inherits="PartialRender"?%>

<!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>淺析update?panel?之?partial?render?原理</title>
????<script>
????var?xmlHttp;
????
????//?創(chuàng)建xmlhttprequest對(duì)象
????function?createXMLHttpRequest()?{
????????if?(window.ActiveXObject)
????????{
????????????return?new?ActiveXObject("Microsoft.XMLHTTP");
????????}
????????else?if?(window.XMLHttpRequest)?{
????????????return?new?XMLHttpRequest();
????????}
????????else?{
????????????return?null;
????????}
????}
????
????//?狀態(tài)改變handle
????function?handleStateChange()?{
????????if?(xmlHttp.readyState?==?4)?{
????????????if?(xmlHttp.status?==?200)?{
????????????????processCallback();
????????????}
????????}
????}
????
????//?處理異步回調(diào)
????function?processCallback()?{
????????parseDom(xmlHttp.responseText);
????}
????
????//?發(fā)出異步請求
????function?doRequest()?{
????????xmlHttp?=?createXMLHttpRequest();
????????var?url?=?window.location.href;
????????xmlHttp.open("POST",?url,?true);
????????xmlHttp.onreadystatechange?=?handleStateChange;
????????//?標(biāo)記異步回調(diào)
????????xmlHttp.setRequestHeader("x-myajax",?"nothing");
????????xmlHttp.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded;");?
????????var?queryString?=?createQueryString();
????????xmlHttp.send(queryString);
????}
????
????//?創(chuàng)建?querystring?,也就是模擬表單里面的name-value對(duì)。
????function?createQueryString()?{
????????var?result?=?"btnSubmit=";
????????result?+=?"&txtRandomNumber="?+?document.getElementById("txtRandomNumber").value;
????????parseDom(document.forms[0].outerHTML);
????????for?(var?i?=?0;?i?<?hiddenFields.length?/?2;?i++)
????????{
????????????var?hiddenField?=?document.getElementById(hiddenFields[i?*?2]);
????????????result?+=?"&"?+?encodeURIComponent(hiddenField.name)?+?"="?+?encodeURIComponent(hiddenField.value);
????????}
????????return?result;
????}
????
????//?這里存放隱藏字段的id?和?value，隱藏字段就是__VIEWSTATE之類的東西
????var?hiddenFields?=?null;
????//?updatePanel?內(nèi)部的html
????var?updatePanelContent?=?null;
????
????//?分析一段html，求出它里面?<input?type=hidden>?和?update?panel
????function?parseDom(text)?{
????????hiddenFields?=?[];
????????updatePanelContent?=?"";
????????var?root?=?document.createElement("span");
????????root.innerHTML?=?text;
????????parseNode(root);
????????for?(var?i?=?0;?i?<?hiddenFields.length?/?2;?i++)?{
????????????document.getElementById(hiddenFields[i?*?2]).value?=?hiddenFields[i?*?2?+?1];
????????}?
????????document.getElementById("UpdatePanel").innerHTML?=?updatePanelContent;
????}
????
????//?遞歸分析節(jié)點(diǎn)
????function?parseNode(node)?{
????????if?(node.nodeType?==?3){
????????????return;
????????}
????????if?(node.tagName.toLowerCase()?==?"input"?&&?node.type.toLowerCase()??==?"hidden")?{
????????????hiddenFields.push(node.id);
????????????hiddenFields.push(node.value);
????????????return;
????????}
????????if?(node.id?==?"UpdatePanel")?{
????????????updatePanelContent?=?node.innerHTML;
????????????return;
????????}
????????for?(var?i?=?0;?i?<?node.childNodes.length;?i++)?{
????????????parseNode(node.childNodes[i]);
????????}
????}
????
????</script>
</head>
<body>
????<form?id="form1"?runat="server">
?????<asp:Panel?ID="UpdatePanel"?runat="server"?>
????????????<asp:Button?ID="btnSubmit"?runat="server"?Text="生成隨機(jī)數(shù)"?OnClick="btnSubmit_Click"?OnClientClick="doRequest();return?false;"??/>
????????????<asp:TextBox?ID="txtRandomNumber"?runat="server"></asp:TextBox>
?????</asp:Panel>
????</form>
</body>
</html>
代碼在普通的panel中放了一個(gè)button,一個(gè)textbox，按button就能無刷新的產(chǎn)生隨機(jī)數(shù)。
1.要改變submit的行為，原來的表單不能提交了，而是交給xmlhttprequest提交。
2.服務(wù)器端要知道是xmlhttprequest做的請求還是普通的請求，這個(gè)通過設(shè)置一個(gè)自定義的http頭實(shí)現(xiàn) x-myajax.
3.要改變服務(wù)器端的呈現(xiàn)流程，原來呈現(xiàn)整個(gè)頁面，但異步請求的時(shí)候只能
呈現(xiàn)updatepanel和一些系統(tǒng)級(jí)別的東西（__VIEWSTATE之類）.我們通過Control的SetRenderMethodDelegate方法來實(shí)現(xiàn)。
4.要能解析response text, 根據(jù)解析的結(jié)果設(shè)置__VIEWSTATE?的值，設(shè)置updatepanel內(nèi)部的html。
這只是一個(gè)簡單的模擬，實(shí)際中updatepanel，scriptmanager的行為復(fù)雜得多，比如說trigger，focus等等。

轉(zhuǎn)載于:https://www.cnblogs.com/wzyexf/archive/2009/05/07/1451366.html

總結(jié)

以上是生活随笔為你收集整理的摘自网络--浅析UpdatePanel的partial render原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。