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

最新推荐文章于 2021-06-02 11:31:02 发布

hejishan

最新推荐文章于 2021-06-02 11:31:02 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

文章标签： ajax mvc .net javascript xmlhttprequest asp.net

本文链接：https://blog.youkuaiyun.com/hejishan/article/details/2271625

探讨在.NET环境中利用Ajax进行无刷新Web开发时遇到的问题，并提出一套清晰的MVC架构解决方案，以降低开发门槛并提高灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.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、问题分析

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

　１）要对xmlhttprequest对更良好的封装，以使调用方式更简单；

　２）尽量在server端进行更新数据的构造，但是也要避免每次返回数据都手工构造，因此，就想到可以充分使用UserControl，由UserControl作为＂View＂，对应的由ascx.cs文件作为＂Controller＂，这样构成的MVC也是比较清晰的；
　
4、问题解决

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

源码及范例下载

代码简析：

１）首先在client端，AjaxHelper.js封装了xmlhttprequest，并提供一个将现有的

的引用或ＩＤ值

２）在server端，Ajax.aspx文件封装了对由客户端ajaxTemplate指定的UserControl的调用，其余的具体逻辑功能则在特定的UserControl及其ascx.cs内实现；

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

４）由于充分使用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＂％>

        WebForm1








            loading

                Updater(＇AjaxTemplate/GetPageSrc＇, ＇view2＇, ＇url=http://www.cnblogs.com＇);





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(＂＂);

    content = content.substring(content.indexOf(prefix, 0) + prefix.length, content.length - 9);

    return content;

}
UserControl GetPageSrc.ascx.cs摘要：

        private void Page_Load(object sender, System.EventArgs e)
        {
            lbUrl.Text = Request.Form[＂url＂];

            System.Net.WebClient client = new System.Net.WebClient ();
            client.Headers.Add(＂User-Agent＂, ＂Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)＂);
            try
            {
                txtPageSource.Text = new System.IO.StreamReader(client.OpenRead(lbUrl.Text), System.Text.Encoding.UTF8).ReadToEnd();
            }
            catch(Exception ex)
            {
                throw ex;
            }
        }

Enjoy!

//文章结束