、问题背景
现在,越来越多人开始尝试基于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,并提供一个将现有的<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>的引用或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
<%@Pagelanguage="c#"Codebehind="Default.aspx.cs"AutoEventWireup="false"Inherits="CN.Teddy.AjaxHelper.WebForm1"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">
<metaname="CODE_LANGUAGE"Content="C#">
<metaname="vs_defaultClientScript"content="JavaScript">
<metaname="vs_targetSchema"content="http://schemas.microsoft.com/intellisense/ie5">
<scripttype="text/javascript"language="javascript"src="js/AjaxHelper.js"></script>
</HEAD>
<body>
<formid="Form1"method="post"runat="server">
<divid="view2">loading</div>
<scripttype="text/javascript">
Updater('AjaxTemplate/GetPageSrc','view2','url=http://www.cnblogs.com');
</script>
</form>
</body>
</HTML>
AjaxHelper.js摘要:
varAjaxHelperUrl=newString("Ajax.aspx");
varUpdater=function(ajaxTemplate,output,params,onComplete)
{
if(typeofoutput=='string')
{
output=$(output);
}
newAjax.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});
}
varSerializeForm=function(form)
{
returnForm.serialize(form);
}
varFormatContent=function(str)
{
varcontent=newString(str);
varprefix=newString("<!--AjaxContent-->");
content=content.substring(content.indexOf(prefix,0)+prefix.length,content.length-9);
returncontent;
}
UserControl GetPageSrc.ascx.cs摘要:
privatevoidPage_Load(objectsender,System.EventArgse)
{
lbUrl.Text=Request.Form["url"];
System.Net.WebClientclient=newSystem.Net.WebClient();
client.Headers.Add("User-Agent","Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;.NETCLR1.1.4322)");
try
{
txtPageSource.Text=newSystem.IO.StreamReader(client.OpenRead(lbUrl.Text),System.Text.Encoding.UTF8).ReadToEnd();
}
catch(Exceptionex)
{
throwex;
}
}
分享到:
相关推荐
.Net环境下基于Ajax的MVC方案,文中给出了演示代码,可以学习参考.
项目是基于ASP.NET的Web应用程序开发,旨在构建一个高性能、可扩展和可靠的在线平台。我们将使用ASP.NET MVC框架和C#编程语言来实现这个项目。 ASP.NET MVC是一种成熟的开发框架,它采用模型-视图-控制器的设计模式...
第2篇【核心技术】主要讲解ADO.NET、数据控件应用、调试与错误处理、水晶报表、ASP.NET Ajax、ASP.NET MVC 架构、ASP.NET安全揭秘和基于XML的新型Web开发模式等;第3篇【应用开发】主要讲解银行在线支付系统、在线...
**ASP.NET基于.NET的城市公交查询系统设计与实现(源代码+论文)** 本资源提供了一个全面而深入的ASP.NET城市公交查询系统的设计与实现方案。该系统以.NET框架为基础,结合了数据库技术、Web服务技术和智能算法,为...
asp.net 2.0下嵌套masterpage页的可视化编辑 C# 2.0与泛型 动态调用对象的属性和方法——性能和灵活性兼备的方法 泛型技巧系列:用泛型打造可复用的抽象工厂 泛型技巧系列:如何提供类型参数之间的转换 .NET 2.0 ...
再比如ASP.Net内置的AJAX解决方案UpdatePanel只在部分要求不高的内网项目中才被使用,因此我们在讲解UpdatePanel的使用和原理之外,把更多的时间放在讲解企业中用的最多的JQuery AJAX解决方案上。 6、B/S系统项目(7...
5. 本示例代码基于Asp.Net MVC3,使用Razor架构; 6. 使用了MSDN官方的MVC分页方案,但是略作了一些调整,业务逻辑层的调整; 7. 使用了JQUERY的UI库做了日期查询; 8. 更新页面使用MVC中的Ajax异步刷新; 9. 如果要...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
第17章:介绍了ASP.NET MVC框架的基本知识,ASP.NET MVC框架是下一代ASP.NET应用程序框架,了解ASP.NET MVC基本知识能够为下一代ASP.NET应用程序开发做好准备。 第18、19章:介绍了WCF和WPF应用程序的开发,WCF和WPF...
此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 ...
此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 ...
本资源提供了一个基于ASP.NET的信息安全研究所设备管理系统的完整解决方案,包括源代码和详细设计论文。该系统旨在满足信息安全研究所在设备采购、分配、维护和管理方面的需求,通过信息化手段提高设备管理的效率和...
9.1.3 基于Ajax的解决方案 9.2 客户端架构 9.2.1 设计表单 9.2.2 设计客户端/服务器端交互 9.3 服务器端的VB.NET实现. 9.3.1 定义XML响应格式_ 9.3.2 编写服务器端代码 9.4 显示结果 9.4.1 遍历XML文档 9.4.2 应用...