代码改变世界

（转）那些 WebForm 可以从 MVC 借鉴的东西 —— Ajax

2012-05-03 19:02  音乐让我说  阅读(452)  评论(0)  编辑  收藏  举报

转载自：http://www.dozer.cc/2011/12/webform-take-example-by-mvc-ajax/

MVC 的优雅

用过 MVC 中局部更新的同学肯定会觉得其中的写法真的是非常的优雅：

public ActionResult Index()
{
    var data = UserService.GetUserList();
    if (Request.IsAjaxRequest())
    {
        return PartialView("UserList", data);
    }
    else
    {
        return View(data);
    }
}

如果在页面上加上一个刷新按钮后，第一次显示就能读取到这个 PartialView 的内容，点即刷新后就可以刷新页面。

这里的读取逻辑本应该是一样的，应该是写在同一个地方的，MVC 做到了这一点。

 

 

WebForm 中就不行了吗？

不是说 WebForm 中就不能实现类似的功能了，其实同样的功能完全可以通过 Ajax 或 UpdatePannel 来实现，并且也可以公用逻辑代码。

但是不这么做当然是因为它们有一定的缺陷。

 

Ajax+json：

这个写过的人肯定都明白它有多痛苦，特别是但更新的内容是一个复杂表格的时候… 我觉得没人会这么做吧？

Ajax+后台拼接 Html：

这种写法也大有人在，但是这实在是太不雅了！直接 PASS！

UpdatePannel：

UpdatePannel 对懒人和新手来说真是一个好东西啊。不用懂任何原理就可以实现 Ajax 无刷新更新数据。

但是它有一个很大的缺点，每次请求都会传送 ViewState，特别是当一个页面的 ViewState 很多的时候：

是不是很恐怖… 这还叫 Ajax 吗？还不如直接刷新页面呢！

另外，有很多人写 WebForm 完全不用控件，当然也包括 UpdatePannel。

MVC风格：

MVC 中的 Ajax 写法可以说是吸取了以上几种方法的有点，摒弃了它们的缺点。

首先它是纯粹的 Ajax 请求，不包含任何多余的数据（没有 ViewState）。

另外它把生成 Html 的工作交给了 UserControl（MVC 中称为 PartialView）。

最后，它也实现了代码的重用。

如何实现 MVC 中的 Ajax 用法

想在 WebForm 中使用类似 MVC 中的 Ajax 写法，难点主要就是两个：后端输出 UserControl + 前端代码

 

后端输出 UserControl 是为了把重复的代码写在 UserControl 中，并且可以被直接访问到。所以这里的难题是，如何让 UserControl 能够被直接访问。

默认 UserControl 是禁止访问的，因为它本身并不是继承与 IHttpHandler 所以无法直接输出，这里不懂的可以去搜索一下 IHttpHandler。

 

后台能输出 UserControl 后其实已经非常简单了，前端部分自己写 js 就可以实现了，点击后 Ajax 请求 UserControl 的地址，得到数据后填充即可。

但是体验过 MVC 中 Ajax 的人都知道，这部分在 MVC 中也是不用写任何代码的，特别是 MVC 中的 Unobtrusive JavaScript，让代码更优美了。

所以，这里的难点并不是前端代码，而是如何使用  Unobtrusive JavaScript。

 

 

后端输出 UserControl：方法一

怎么输出 UserControl？如果你不理解 Asp.net 核心的一些对象，也完全可以实现。

其实最简单的就是，把 .ascx 的页面用 .aspx 的页面包装一下，就可以啦！

 

我们先新建一个 .ascx 页面：

 

并在里面写上一些代码，这里是用来随便输出一些时间的，页面上需要点“刷新”来更新这些数据。

 

接下来我们新建一个 .aspx 页面：

 

这个页面完全是一个空页面，仅仅是为了把 UserControl 输出。

 

突然发现，输出 UserControl 就这样实现了！

这时候，前端请求它的时候只要请求这个 TimeList_.aspx 即可，相当于是它的外壳。

 

 

后端输出 UserControl：方法二

上面的那个方法虽然好用，但是总感觉的怪怪的，也略显麻烦。

其实上述的过程就是一个把 UserControl类 用 Page类 包裹的过程，这个过程完全可以用代码来实现。

 

首先我们先要自己实现一个 HttpHandler 来输出 UserContol：

namespace WebApplication1
{
    public class AjaxHandler : IHttpHandler
    {
        //private const string FLAG = ".ajax";//去掉这里的注释即可实现自定义后缀
        public void ProcessRequest(HttpContext context)
        {
            var page = new Page();
            var writer = new StringWriter();
            var url = context.Request.AppRelativeCurrentExecutionFilePath;

            //判断后缀是否为指定的后缀，是的话就替换成 .ascx
            //if (url.IndexOf('?') < 0 || url.IndexOf('?') > url.IndexOf(FLAG)) { url = url.Replace(FLAG, ".ascx"); }//去掉这里的注释即可实现自定义后缀

            //加载控件，并输出页面
            var control = page.LoadControl(url);
            page.Controls.Add(control);
            context.Server.Execute(page, writer, false);
            context.Response.Write(writer.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}

接下来修改 Web.Config 文件，在这里添加一条记录，让所有的 .ascx 页面都由这个 AjaxHandler 来处理：

<system.web>
  <httpHandlers>
    <add verb="*" path="*.ascx" type="WebApplication1.AjaxHandler,WebApplication1"/>
  </httpHandlers>
</system.web>

这里，type 中传入的两个参数分别是这个 HttpHandler 的完整名称，包括前面的命名空间；都好后面是这个 HttpHandler 所在的 dll 文件名。

 

让我们来直接访问一下：

成功！还有一个问题，怎么使用自定义扩展名？

只要把 HttpHandler 中的两行注释去掉，并且在 Web.Config 文件中的 path=”*.ascx” 改成 path=”.[自定义]” 就行了。

 

 

如何在 WebForm 中使用 MVC 的 Unobtrusive JavaScript

看过 Unobtrusive JavaScript 的人都知道，这种方式可以让 js 代码和 html 完全分离。也就是说，只要 WebForm 输出了同样格式的 html，并引用了相关的 js，就可以实现这个功能了！让我们一步步实现它。

 

我们先来用一个MVC 项目输出一个“刷新”按钮。

得到了如下代码：

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#testDiv" href="/Home/ajax">刷新</a>

这里的 html 代码和是否使用 MVC 没有关系，那我们就尝试着直接在 WebForm 里直接打入以上代码吧。

另外，我们也要引入2个js，jquery.js 和 jquery.unobtrusive-ajax.js

前者去下载最新版即可，后者可以新建一个 MVC3 的项目后在项目中找到。

 

最终代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<%@ Register Src="TimeList.ascx" TagName="TimeList" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="timeList">
        <uc1:TimeList ID="TimeList1" runat="server" />
    </div>
    <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#timeList"
        href="/timelist.ascx">刷新</a>
    </form>
</body>
</html>

前面，我在链接中的 attribute 是直接复制 MVC3 项目生成的 html 代码，那在 WebForm 里怎么生成这个代码呢？

其实只要把 MVC3 中的一个 class 和 enum 赋值过来即可。它们分别是：AjaxOptions 和 InsertionMode

利用 AjaxOptions 这个类的 ToUnobtrusiveHtmlAttributes 方法就可以生成一组符合标准的 attribute，然后再用代码把这些 attribute 附加到 a 标签上即可。

这里要注意的是，从 MVC3 源码中赋值过来的 AjaxOptions 在 .Net3.5 下会有点问题，自己编译一下修改下即可。

主要就是有几个方法在 .Net3.5 中不存在，所以只能自己实现了，但效果是一样的，它并没有依赖很多东西。

 

下面是一段参考代码：

.aspx.cs页面：

protected string GetAttributes(AjaxOptions ajaxOptions)
{
    var sb = new StringBuilder(" ");
    foreach (var attribute in ajaxOptions.ToUnobtrusiveHtmlAttributes())
    {
        sb.Append(string.Format("{0}="{1}" ", attribute.Key, attribute.Value));
    }
    return sb.ToString();
}

.aspx 页面：

<a <%=GetAttributes(new WebApplication1.AjaxOptions{ UpdateTargetId = "timeList"}) %> href="/timelist.ascx">刷新</a>

看上去还没那么优雅，但是已经能实现这个功能了！

谢谢浏览！