扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
现在，越来越多人开始尝试基于Ajax进行无刷新的Web开发，不过，在.Net环境下，应用Ajax并不是非常方便，这主要可能是由以下一些原因造成的：
•由于Ajax基于javascript的本质，使得开发者必须对javascript非常了解，起码，其javascript能力足以实现对callback返回内容对页面的更新，所以开发的门槛就有一定程度的上升
•当基于Ajax机制进行开发时，原有的基于postback方式下时，asp.net由后台逻辑代码（Model），aspx页面(View)、aspx.cs(Controller)构成的MVC构架其实失效了，当callback返回数据时，要么在client端用javascript解析返回内容以实现更新，要么则必须在server端构造好比较完整的html代码，再直接由javascript将该构造好的html设置给某个页面对象，很显然，这样一来，要实现一个最简单的callback功能，都要不少代码，并且是相对比较乱的代码，即使在即将到来的asp.net2.0该问题依然不会得到有效解决
2、本文目的
本文旨在充分利于现有的asp.net本身的特点和ajax的特性，提出一个用于在asp.net环境下进行基于ajax的web开发的MVC方案，以实现以下主要目的：
•Asp.Net环境下用于Ajax的清晰的MVC构架
•降低编程人员对过多javascript编码的依赖以降低编程门槛
•灵活的支持ajax模式下的常用开发方式
3、问题分析
如何实现以上几个主要目的呢？
１）要对xmlhttprequest对更良好的封装，以使调用方式更简单；
２）尽量在server端进行更新数据的构造，但是也要避免每次返回数据都手工构造，因此，就想到可以充分使用UserControl，由UserControl作为"View"，对应的由ascx.cs文件作为"Controller"，这样构成的MVC也是比较清晰的；
4、问题解决
基于以上思想，本人实现了以下一个组类库以简化该过程：
代码简析：
１）首先在client端，AjaxHelper.js封装了xmlhttprequest，并提供一个将现有的<form>序列化为形如param1=v1¶m2=v2&...形式用于post的参数；
Updater(ajaxTemplate, output, params, onComplete)函数，用于实现一次callback调用
ajaxTemplate（必选）：指定执行需要功能的UserControl路径
output（可选）：填充返回数据的指定标签的引用或ID值
params（可选）：形如param1=v1¶m2=v2&...的post参数
onComplete（可选）：可用于对返回数据进行特殊处理的回调函数，函数格式function(str)，str为返回的数据
SerializeForm(form)函数，用于序列化<form>
form：可以是对指定<form>的引用或ＩＤ值
２）在server端，Ajax.aspx文件封装了对由客户端ajaxTemplate指定的UserControl的调用，其余的具体逻辑功能则在特定的UserControl及其ascx.cs内实现；
３）这样，具体执行一次callback时，编程人员只需在页面引用AjaxHelper.js，并在指定的位置通过javascript:Updater(ajaxTemplate, output, params, onComplete)进行调用，如果需要对某一form进行提交，则可调用javascript:SerializeForm(form)序列化该form并传给params，当然也可以手动构造params，并指定将返回数据通过设置output应用的页面或通过onComplete自定义处理。
４）由于充分使用UserControl，意味着，可以充分利用asp.net原有的web服务器端控件和数据绑定机制，这样其实，已经很大程度上简化了返回数据的构造，在ascx.cs中，通过Request.Form[ParamName]就能访问到client端传入的params，再访问逻辑代码获取源数据。
5、范例
包含在源码中的范例实现了一个简单的无刷新获取博客园首页内容到一个textarea的功能，详见源码！
部分范例源码：
Default.aspx
<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="CN.Teddy.AjaxHelper.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" language="javascript" src="js/AjaxHelper.js"></script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="view2">loading </div>
<script type="text/javascript">
Updater('AjaxTemplate/GetPageSrc', 'view2', 'url=http://www.cnblogs.com');
</script>
</form>
</body>
</HTML>
AjaxHelper.js摘要：
var AjaxHelperUrl = new String("Ajax.aspx");
var Updater = function(ajaxTemplate, output, params, onComplete)
{
if (typeof output == 'string')
{
output = $(output);
}
new Ajax.Request( 'Ajax.aspx', { onComplete: function(transport) { if (output != null) { output.innerHTML = FormatContent(transport.responseText); } if (onComplete != null) { onComplete(FormatContent(transport.responseText)) } }, parameters: params + '&AjaxTemplate=' + ajaxTemplate });
}
var SerializeForm = function(form)
{
return Form.serialize(form);
}
var FormatContent = function(str)
{
var content = new String(str);
var prefix = new String("<!--AjaxContent-->");
content = content.substring(content.indexOf(prefix, 0) + prefix.length, content.length - 9);
return content;
}
UserControl GetPageSrc.ascx.cs摘要：
private void Page_Load(object sender, System.EventArgs e)
{
lbUrl.Text = Request.Form["url"];
System.Net.WebClient client = new System.Net.WebClient ();
client.Headers.Add("User-Agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)");
try
{
txtPageSource.Text = new System.IO.StreamReader(client.OpenRead(lbUrl.Text), System.Text.Encoding.UTF8).ReadToEnd();
}
catch(Exception ex)
{
throw ex;
}
濠电姷鏁告慨鐑藉极閸涘﹥鍙忛柣鎴濐潟閳ь剙鍊圭粋鎺斺偓锝庝簽閸旓箑顪冮妶鍡楀潑闁稿鎹囬弻娑㈡偄闁垮浠撮梺绯曟杹閸嬫挸顪冮妶鍡楀潑闁稿鎸剧槐鎾愁吋閸滃啳鍚Δ鐘靛仜閸燁偉鐏掗柣鐘叉穿鐏忔瑧绮ｉ悙鐑樷拺鐟滅増甯掓禍浼存煕閹惧娲撮柟顔藉劤鐓ゆい蹇撴噳閹锋椽姊婚崒姘卞闁告娲熷畷濂稿Ψ閵壯勭叄婵犵數濮撮敃銈団偓姘煎弮瀹曪綀绠涢弮鍌滅槇婵犵數濮撮崐缁樻櫠濞戙垺鐓曢悗锝冨妼婵′粙鏌曢崶褍顏€殿喕绮欐俊姝岊槹闁逞屽墯鐢繝寮婚悢鍏煎癄濠㈣泛锕ュ▓濠氭⒑閸濆嫮鐏遍柛鐘崇墵楠炲啫饪伴崼婵堝幐闂佺ǹ鏈粙鎾广亹鐎ｎ喗鐓熼幖娣€ゅḿ鎰箾閸欏顏堟偩濠靛牏鐭欓悹鎭掑妽濞堥箖姊洪崜鎻掍簼婵炲弶鐗犻幃鈥斥槈閵忥紕鍘遍柣蹇曞仜婢т粙鎯岀€ｎ偆绠鹃柛顐ゅ枑閸婃劖鎱ㄦ繝鍕笡闁瑰嘲鎳愮划鐢碘偓锝庝簼閻ｄ即姊绘担瑙勫仩闁告柨顑夊畷锟犲礃閼碱剚娈鹃梺闈涚箞閸婃洟宕橀埀顒€顪冮妶鍡楀闁稿骸宕惃顒勬⒒閸屾瑧鍔嶉悗绗涘懐鐭欓柟瀵稿Л閸嬫挸顫濋悡搴＄睄閻庤娲戦崡鍐茬暦閸楃倣鐔兼⒐閹邦喚娉块梻鍌欑窔濞佳囨偋閸℃稑绠犻幖娣灪閸欏繑銇勯幒鍡椾壕闂佸疇顫夐崹鍧楀春閵夆晛骞㈡俊鐐插⒔閸戣绻濋悽闈浶為柛銊︽そ閺佸鏌ч懡銈呬沪濞ｅ洤锕俊鍫曞川椤斿吋顏￠梻浣呵归鍛村磹閸︻厽宕叉繛鎴欏灩楠炪垺淇婇婵愬殭缁炬澘绉归弻锝嗘償閵忥絽顥濆銈忓閺佽顕ｇ拠宸悑闁割偒鍋呴鍥⒒娴ｅ憡鍟為柟鎼佺畺瀹曠増鎯旈…鎴炴櫔闂佹寧绻傞ˇ浠嬪极閸℃ぜ鈧帒顫濋濠傚闂佹椿鍘介〃鍡欐崲濞戙垹绠婚柡澶嬪灩閸斾即姊虹粙娆惧剱闁圭懓娲濠氭晲閸涱亝顫嶅┑鐐叉閸旀洜澹曢幎鑺モ拺闁告繂瀚﹢鎵磼鐎ｎ偄鐏撮柛鈺冨仱楠炲鏁冮埀顒€顔忓┑鍥ヤ簻闁哄洨鍋為崳娲煃鐠囪鍔熺紒杈ㄦ崌瀹曟帒鈻庨幋婵嗩瀴婵＄偑鍊戦崝宀勫箠濮椻偓楠炲棗鐣濋崟顐わ紲闂佺粯鍔欏ḿ褏绮婇敃鍌涚厵闁稿繗鍋愰弳姗€鏌涢弬璺ㄧ劯闁诡喚鍋ゅ畷褰掝敃閻樿京鐩庨梻浣告贡閸庛倝宕归悽鍓叉晜闁冲搫鎳忛崐鍨叏濮楀棗澧绘俊鎻掔秺閺屾洟宕惰椤忣厾鈧鍠曠划娆愪繆濮濆矈妲奸梺闈╃祷閸庡磭妲愰幘瀛樺缂佹稑顑呭▓顓炩攽閳藉棗浜濈紒璇茬墕椤曪絾绻濆顓炰簻缂佺偓濯芥ご鎼佸疾閿濆鍋℃繝濠傚暟鏁堥梺璇″枟閿曘垽骞婇悩娲绘晢闁稿本绮ｇ槐鏌ユ⒑閸濆嫷妲搁柣妤€瀚板畷婵囨償閿濆洣绗夐梺缁樺姉閸庛倝鎮″☉銏″€堕柣鎰硾琚氶梺鍝ュУ閿曘垽寮婚埄鍐╁闁荤喐婢橀～鎺楁倵鐟欏嫭绀堥柛鐘崇墵閵嗕礁顫滈埀顒勫箖閳哄懏鎯炴い鎰╁€濋幏濠氭⒒閸屾艾鈧嘲霉閸パ呮殾闁割煈鍋呴崣蹇涙煙閹澘袚闁抽攱姊婚埀顒€绠嶉崕閬嵥囬鐐插瀭闁稿瞼鍋為悡銏′繆椤栨粌鐨戠紒杈ㄥ哺閺屻劌鈹戦崱鈺傂︾紓浣插亾閻庯綆鍋佹禍婊堟煛瀹ュ啫濡块柍钘夘槹缁绘盯宕奸悢铏圭厜濠殿喖锕ㄥ▍锝呪槈閻㈢ǹ宸濇い鏂惧嫎閳ь剚鍔曢—鍐Χ鎼粹€茬凹濠电偠灏欓崰鏍х暦濞差亜鐒垫い鎺嶉檷娴滄粓鏌熼崫鍕棞濞存粓绠栧娲箰鎼淬垻鈹涙繝纰樷偓铏悙閸楅亶鏌熼悧鍫熺凡缂侇偄绉归弻娑㈩敃閿濆洨鐣煎銈嗘尰濡炶棄顫忛搹鍦＜婵☆垰鎼～宀勬倵濞堝灝娅橀柛鎾寸懆閻忓啴姊洪崨濠佺繁闁哥姵宀稿畷銏ゅ箹娴ｅ厜鎷洪梺鍛婃尰瑜板啯绂嶆禒瀣厱閻庯綆浜滈顓㈡煙椤旀枻鑰块柡浣稿暣瀹曟帒鈽夊顒€绠為梻浣筋嚙閸戠晫绱為崱娑樼；闁糕剝蓱濞呯姵銇勯幒鎴濃偓鑽ゅ婵傚憡鐓曢悘鐐插⒔閳藉绱掑锕€娲﹂悡娆撴煟閻斿憡绶叉い蹇ｅ弮閺岀喖鎮℃惔銏ｇ闂佺懓寮堕幐鍐茬暦閻斿吋顥堟繛鎴炵懄閻濓繝姊婚崒姘偓鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偞鐗犻、鏇㈠Χ閸屾矮澹曞┑顔矫畷顒勫储鐎电硶鍋撶憴鍕缂傚秴锕濠氬幢濡ゅ﹤鎮戦梺鍛婁緱閸ㄧ晫妲愰柆宥嗙厽閹艰揪绱曢悾顓㈡煕鎼淬劋鎲鹃挊婵喢归崗鍏肩稇缁炬崘娉曢埀顒€绠嶉崕閬嵥囨导瀛樺亗闁哄洢鍨洪悡娑㈡煕閵夛絽鍔氬┑锛勫帶椤儻顧侀柛銊ゅ嵆濠€渚€姊虹紒妯撳湱绮旈鈧、鏃堝醇閻旇櫣鏆㈤梻鍌氬€烽悞锔锯偓绗涘懏宕查柛灞绢嚤濞戞鏃堝川椤撶姴骞掗梻浣告惈濞层垽宕瑰ú顏呭亗闁告劦浜濋崰鎰節婵犲倻澧曠紒鈧崼鐔稿弿婵☆垱瀵х涵楣冩煢閸愵亜鏋涢柡灞炬礃缁绘稖顦查悗姘卞厴瀹曟垿濡搁埡鍌楁嫼缂傚倷鐒﹂敋濠殿喖娲﹂妵鍕即閵娿儱绫嶉梺绯曟杺閸ㄨ棄顕ｉ幘顔碱潊闁炽儲鏋奸崑鎾绘偨閸涘﹦鍙嗗┑鐘绘涧濡鍩€椤掑倹鍤€闁宠绉瑰畷鍫曞Ω閿濆嫮鐩庨梻濠庡亜濞诧妇绮欓幇鏉跨疅濡わ絽鍟悡娑㈡倶閻愰潧浜剧紒鈧€ｎ兘鍋撶憴鍕濞存粌鐖奸妴浣割潨閳ь剟骞冮姀锛勯檮濠㈣泛顦辨径锟�
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号