分享
 
 
 

Net环境下基于Ajax的MVC方案

王朝vc·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

1、问题背景

现在,越来越多人开始尝试基于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&param2=v2&...形式用于post的参数;

Updater(ajaxTemplate, output, params, onComplete)函数,用于实现一次callback调用

ajaxTemplate(必选):指定执行需要功能的UserControl路径

output(可选):填充返回数据的指定标签的引用或ID值

params(可选):形如param1=v1&param2=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

<%@ 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摘要:

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有