现在,越来越多人开始尝试基于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、问题剖析
怎么完成以上几个首要意图呢?
(1)要对xmlhttprequest对更杰出的封装,以使调用方法更简略;
(2)尽量在server端进行更新数据的结构,可是也要防止每次回来数据都手艺结构,因而,就想到能够充沛运用UserControl,由UserControl作为"View",对应的由ascx.cs文件作为"Controller",这样构成的MVC也是比较明晰的;
4、问题处理
根据以上思维,自己完成了以下一个组类库以简化该进程:
代码简析:
(1)首先在client端,AjaxHelper.js封装了xmlhttprequest,并供给一个将现有的
序列化为形如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:能够是对指定的引证或ID值
(2)在server端,Ajax.aspx文件封装了对由客户端ajaxTemplate指定的UserControl的调用,其他的详细逻辑功用则在特定的UserControl及其ascx.cs内完成;
(3)这样,详细履行一次callback时,编程人员只需在页面引证AjaxHelper.js,并在指定的方位经过javascript:Updater(ajaxTemplate, output, params, onComplete)进行调用,假如需求对某一form进行提交,则可调用javascript:SerializeForm(form)序列化该form并传给params,当然也能够手动结构params,并指定将回来数据经过设置output运用的页面或经过onComplete自定义处理。
(4)因为充沛运用UserControl,意味着,能够充沛利用asp.net原有的web服务器端控件和数据绑定机制,这样其实,现已很大程度上简化了回来数据的结构,在ascx.cs中,经过Request.Form[ParamName]就能拜访到client端传入的params,再拜访逻辑代码获取源数据。
5、典范
包含在源码中的典范完成了一个简略的无改写获取博客园主页内容到一个textarea的功用,详见源码!
部分典范源码:
Default.aspx Inherits="CN.Teddy.AjaxHelper.WebForm1" %> |
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;
}
}
【修改引荐】
- ASP.NET运用程序设计的10大技巧
- 详解ASP.NET MVC的恳求生命周期
- ASP.NET大局反常处理浅析