javascript

位置:IT落伍者 >> javascript >> 浏览文章

.Net环境下基于Ajax的MVC方案[1]


发布日期:2018年08月29日
 
.Net环境下基于Ajax的MVC方案[1]

问题背景

现在越来越多人开始尝试基于Ajax进行无刷新的Web开发不过Net环境下应用Ajax并不是非常方便这主要可能是由以下一些原因造成的

·由于Ajax基于javascript的本质使得开发者必须对javascript非常了解起码其javascript能力足以实现对callback返回内容对页面的更新所以开发的门槛就有一定程度的上升

·当基于Ajax机制进行开发时原有的基于postback方式下时aspnet由后台逻辑代码(Model)aspx页面(View)aspxcs(Controller)构成的MVC构架其实失效了当callback返回数据时要么在client端用javascript解析返回内容以实现更新要么则必须在server端构造好比较完整的html代码再直接由javascript将该构造好的html设置给某个页面对象很显然这样一来要实现一个最简单的callback功能都要不少代码并且是相对比较乱的代码即使在即将到来的aspnet该问题依然不会得到有效解决

本文目的

本文旨在充分利于现有的aspnet本身的特点和ajax的特性提出一个用于在aspnet环境下进行基于ajax的web开发的MVC方案以实现以下主要目的

·AspNet环境下用于Ajax的清晰的MVC构架

·降低编程人员对过多javascript编码的依赖以降低编程门槛

·灵活的支持ajax模式下的常用开发方式

问题分析

如何实现以上几个主要目的呢?

1)要对xmlhttprequest对更良好的封装以使调用方式更简单

2)尽量在server端进行更新数据的构造但是也要避免每次返回数据都手工构造因此就想到可以充分使用UserControl由UserControl作为View对应的由ascxcs文件作为Controller这样构成的MVC也是比较清晰的

问题解决

基于以上思想本人实现了以下一个组类库以简化该过程

源码及范例下载

代码简析

1)首先在client端AjaxHelperjs封装了xmlhttprequest并提供一个将现有的<form>序列化为形如param=v&param=v&形式用于post的参数

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

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

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

params(可选)形如param=v&param=v&的post参数

onComplete(可选)可用于对返回数据进行特殊处理的回调函数函数格式function(str)str为返回的数据

SerializeForm(form)函数用于序列化<form>

form可以是对指定<form>的引用或ID值

2)在server端Ajaxaspx文件封装了对由客户端ajaxTemplate指定的UserControl的调用其余的具体逻辑功能则在特定的UserControl及其ascxcs内实现

3)这样具体执行一次callback时编程人员只需在页面引用AjaxHelperjs并在指定的位置通过javascript:Updater(ajaxTemplate output params onComplete)进行调用如果需要对某一form进行提交则可调用javascript:SerializeForm(form)序列化该form并传给params当然也可以手动构造params并指定将返回数据通过设置output应用的页面或通过onComplete自定义处理

4)由于充分使用UserControl意味着可以充分利用aspnet原有的web服务器端控件和数据绑定机制这样其实已经很大程度上简化了返回数据的构造在ascxcs中通过RequestForm[ParamName]就能访问到client端传入的params再访问逻辑代码获取源数据

范例

包含在源码中的范例实现了一个简单的无刷新获取博客园首页内容到一个textarea的功能详见源码!

[] []

               

上一篇:.Net环境下基于Ajax的MVC方案[2]

下一篇:创建通过 WDO访问数据的 JSF 应用程序(1)