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

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

图片 1图片 2<%图片 3@ Page language=”c#” Codebehind=”Default.aspx.cs” AutoEventWireup=”false” Inherits=”CN.Teddy.AjaxHelper.WebForm1″ %>
图片 4<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
图片 5<HTML>
图片 6    <HEAD>
图片 7        <title>WebForm1</title>
图片 8        <meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET 7.1″>
图片 9        <meta name=”CODE_LANGUAGE” Content=”C#”>
图片 10        <meta name=”vs_defaultClientScript” content=”JavaScript”>
图片 11        <meta name=”vs_targetSchema” content=”http://schemas.microsoft.com/intellisense/ie5"&gt;
图片 12        <script type=”text/javascript” language=”javascript” src=”js/AjaxHelper.js”></script>
图片 13    </HEAD>
图片 14    <body>
图片 15        <form id=”Form1″ method=”post” runat=”server”>
图片 16            <div id=”view2″>loading图片 17</div>
图片 18图片 19            <script type=”text/javascript”>图片 20
图片 21                Updater(‘AjaxTemplate/GetPageSrc’, ‘view2’, ‘url=http://www.cnblogs.com’);
图片 22            </script>
图片 23
图片 24        </form>
图片 25    </body>
图片 26</HTML>
图片 27

AjaxHelper.js摘要:

图片 28var AjaxHelperUrl = new String(“Ajax.aspx”);
图片 29
图片 30
图片 31
图片 32var Updater = function(ajaxTemplate, output, params, onComplete)
图片 33
图片 34{
图片 35
图片 36    if (typeof output == ‘string’)
图片 37
图片 38    {
图片 39
图片 40        output = $(output);
图片 41
图片 42    }
图片 43
图片 44    
图片 45
图片 46    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 });
图片 47
图片 48}
图片 49
图片 50
图片 51
图片 52var SerializeForm = function(form)
图片 53
图片 54{
图片 55
图片 56    return Form.serialize(form);
图片 57
图片 58}
图片 59
图片 60
图片 61
图片 62var FormatContent = function(str)
图片 63
图片 64{
图片 65
图片 66    var content = new String(str);
图片 67
图片 68    var prefix = new String(“<!–AjaxContent–>”);
图片 69
图片 70    content = content.substring(content.indexOf(prefix, 0) + prefix.length, content.length – 9);
图片 71
图片 72    return content;
图片 73
图片 74}

UserControl GetPageSrc.ascx.cs摘要:

图片 75        private void Page_Load(object sender, System.EventArgs e)
图片 76图片 77        图片 78{
图片 79            lbUrl.Text = Request.Form[“url”];
图片 80
图片 81            System.Net.WebClient client = new System.Net.WebClient ();
图片 82            client.Headers.Add(“User-Agent”, “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)”);
图片 83            try
图片 84图片 85            图片 86{
图片 87                txtPageSource.Text = new System.IO.StreamReader(client.OpenRead(lbUrl.Text), System.Text.Encoding.UTF8).ReadToEnd();
图片 88            }
图片 89            catch(Exception ex)
图片 90图片 91            图片 92{
图片 93                throw ex;
图片 94            }
图片 95        }
图片 96

Enjoy!

//文章结束

相关文章