浅析UpdatePanel的partial render原理

最新推荐文章于 2024-07-23 11:32:13 发布

weixin_30613727

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量55

点赞数

文章标签： xhtml ui c#

原文链接：http://www.cnblogs.com/lordych/archive/2007/08/19/861371.html

版权

      在我接触ajax.net前，update panel的大名已经是如雷贯耳了。update panel到底如何实现partial render的呢，半年来一直塞在我的思绪中。
      一个星期前，终于开始了我的ajax.net之旅,美妙绝伦的js 扩展令人陶醉。但不幸的是在我以updatepanel machinism,inside updatepanel ajax等等等为关键字 google，baidu后依然没有任何斩获，大多数搜到的条目都是告诉你如何往updatepanel里面拖控件的。我也知道博客园众多高人，其中老赵同志最为显目，我翻了他的很多文章，都没能打开我的心结。（可能他写过相关文章，我没找到。）
     没办法，只好用reflector打开程序集，我努力的寻找，寻找那个方法，那个能改变呈现流程的方法。终于我找到了你  ----------- 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;

// 识别异步回调

if(headers["x-myajax"] != null)

{

this.SetRenderMethodDelegate(this.MyAjaxPageRender);

this.form1.SetRenderMethodDelegate(this.MyAjaxFormRender);

}

// 改变页面的呈现流程

private void MyAjaxPageRender(HtmlTextWriter writer, Control page)

{

this.form1.RenderControl(writer);

}

// 改变form的呈现流程

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">

<title>浅析update panel 之 partial render 原理</title>

var xmlHttp;

// 创建xmlhttprequest对象

function createXMLHttpRequest()

{

if (window.ActiveXObject)

{

return new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest)

{

return new XMLHttpRequest();

}

else

{

return null;

}

// 状态改变handle

function handleStateChange()

{

if (xmlHttp.readyState == 4)

{

if (xmlHttp.status == 200)

{

processCallback();

}

// 处理异步回调

function processCallback()

{

parseDom(xmlHttp.responseText);

}

// 发出异步请求

function doRequest()

{

xmlHttp = createXMLHttpRequest();

var url = window.location.href;

xmlHttp.open("POST", url, true);

xmlHttp.onreadystatechange = handleStateChange;

// 标记异步回调

xmlHttp.setRequestHeader("x-myajax", "nothing");

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");

var queryString = createQueryString();

xmlHttp.send(queryString);

}

// 创建 querystring ,也就是模拟表单里面的name-value对。

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 内部的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;

}

// 递归分析节点

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>

<asp:Panel ID="UpdatePanel" runat="server" >

<asp:Button ID="btnSubmit" runat="server" Text="生成随机数" OnClick="btnSubmit_Click" OnClientClick="doRequest();return false;" />

<asp:TextBox ID="txtRandomNumber" runat="server"></asp:TextBox>

</asp:Panel>

</form>

</body>

</html>

代码在普通的panel中放了一个button,一个textbox，按button就能无刷新的产生随机数。
1.要改变submit的行为，原来的表单不能提交了，而是交给xmlhttprequest提交。
2.服务器端要知道是xmlhttprequest做的请求还是普通的请求，这个通过设置一个自定义的http头实现 x-myajax.
3.要改变服务器端的呈现流程，原来呈现整个页面，但异步请求的时候只能
呈现updatepanel和一些系统级别的东西（__VIEWSTATE之类）.我们通过Control的SetRenderMethodDelegate方法来实现。
4.要能解析response text, 根据解析的结果设置__VIEWSTATE 的值，设置updatepanel内部的html。
这只是一个简单的模拟，实际中updatepanel，scriptmanager的行为复杂得多，比如说trigger，focus等等。

转载于:https://www.cnblogs.com/lordych/archive/2007/08/19/861371.html

weixin_30613727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅析UpdatePanel的partial render原理

在我接触ajax.net前，update panel的大名已经是如雷贯耳了。update panel到底如何实现partial render的呢，半年来一直塞在我的思绪中。一个星期前，终于开始了我的ajax.net之旅,美妙绝伦的js 扩展令人陶醉。但不幸的是在我以updatepanel machinism,inside updatepanel ajax等等等为关键字 go...
复制链接

扫一扫