ascx + wrapper page + jQuery的Ajax解决方案

Guide

本篇说明 ashx + jQuery, a lightly ajax solution of asp.net 提到的 ajax 解决方案之五。
首先，请理解什么是 wrapper page。
wrapper page 是我定义的一种专门用来包装用户控件 ascx 的 webform，wrapper page 的 Render 方法被重写(override)，仅 render 它的 UserControl 成员。这样，我们就可以通过 ascx 输出干净的 html 片断。是的，我们的目标就是输出干净的 html 片断！

---

实现方法

目标明确了，思路有了，现在让我们来实现吧～
很简单：写一个 Wrapper Page Base，作为所有 wrapper page 的基类，以后的 wrapper page 都从它继承。这个类（WrapperPageBasel类)继承自System.Web.UI.Page类，他只要做两件事情：

• 拥有一个 UserControl 成员
• 重写父类(Page)的 Render 方法

那么我们在重写的 Render 方法里执行 UserControl 的 Render 方法即可。请看代码¹⁾：

/// <summary>
/// Ajax包装页面基类
/// </summary>
public class WrapperPageBase : System.Web.UI.Page
{
    public UserControl control { get; set; }
 
    protected override void Render(HtmlTextWriter writer)
    {
        if (control == null)
            control = (UserControl)this.LoadControl("~/Controls/dummy.ascx"); // 一个dummy，null时输出server error..之类的信息
 
        control.RenderControl(writer);
    }
}

Wrapper Page继承自WrapperPageBase类：

public partial class Ajax_Test : WrapperPageBase
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.control = (UserControl)this.LoadControl("~/Controls/any.ascx"); // 有用的用户控件           
    }
}

在页面中，使用jQuery异步调用。参看ashx + jQuery, a lightly ajax solution of asp.net 的实例。
你的页面只需要一句话：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Ajax_Test" %>

其余都可以删除。——当然，你也可以不删除，你会发现哪些代码不会出现在页面上。你还可以在同一个 Wrapper Page 里来切换 UserControl，只要判断下query string，像这样：

protected void Page_Load(object sender, EventArgs e)
{
    var str = Request["Want"];
    if(str == "IWantA")
      this.control = (UserControl)this.LoadControl("~/Controls/A.ascx"); // 用户控件A           
    else if(str == "IWantB")
      this.control = (UserControl)this.LoadControl("~/Controls/B.ascx"); // 用户控件A
    else 
      this.control = (UserControl)this.LoadControl("~/Controls/WhatDoYouWant.ascx"); // 用户控件WhatDoYouWant
}

至此，这个解决方案就完成了。

---

为什么要这么做？

事实上，我们不用 WrapperPageBase，不用重写 Render 方法，简单地把 webform 里的 html 代码全部删掉，再换上我们现在放在 ascx 里的代码，这样也可以达到输出 html 片断的效果。但是为什么要这么麻烦？？？？
理由如下：

1. 你不用删除 webform 里的那些代码
2. 你可以不用修改，使用现成的 ascx
3. 机制是透明的，你只需要 LoadControl
4. 最后，你完全可以在同一个 webfrom 里根据不同的 query string 来输出不同的 html 片断 —— 哪怕这些片断毫不相干！神奇吧！

¹⁾ 代码里指定了一个 dummy，当 dummy.ascx 的内容为空，或者不指定 dummy 时，HtmlTextWriter 会显示一个没有内容但是完整的 html 页面，它不是我们要的 html 片断