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

一 、难题背景
于今,越来越三个人开头尝试基于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设置给有些页面对象,很引人注目,这样一来,要完毕2个最简便易行的callback功能,都要多多代码,并且是周旋相比乱的代码,尽管在将要来到的asp.net2.0该难点如故不会获取管用化解

② 、本文目标
本文目的在于丰盛利于现有的asp.net本人的脾气和ajax的天性,提出3个用于在asp.net环境下开展基于ajax的web开发的MVC方案,以促成以下重点目标:

·Asp.Net环境下用于Ajax的原原本本的MVC构架

·下跌编制程序人士对过多javascript编码的依赖性以下跌编程门槛

·灵活的帮衬ajax方式下的常用开发情势

三 、难题分析

如何兑现以上多少个相当重要目标吗?

 1)要对xmlhttprequest对更杰出的包裹,以使调用形式更简约;

 2)尽量在server端进行革新数据的构造,不过也要防止每便回来数据都手工构造,因而,就想开能够充足利用UserControl,由UserControl作为”View”,对应的由ascx.cs文件作为”Controller”,这样组合的MVC也是比较明晰的;
 
④ 、难点解决
基于上述思想,本身完结了以下三个组类库以简化该进程:

源码及范例下载

代码简析:

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!

//文章停止

相关文章