我的Ajax服务端框架 - (4) JS直接请求ascx用户控件

注意：本文所介绍的框架已有新版本，点击后面链接即可阅读。 【写自己的ASP.NET MVC框架】

返回到目录：晒晒我的Ajax服务端框架

此功能将让您在Javascript直接请求一个ascx用户控件，并获取它的输出HTML。示例代码如下：

Javascript调用代码

var url = '/Controls/OrderList.ascx?' + $.param({ StartDate: '2010-12-01', EndDate: '2011-01-03' });
$("#divResultList").load(url); 

上面的调用究竟完成了什么功能呢：请求一个用户控件 Controls/QueryOrders.ascx ,并传递二个参数，
在服务端处理后，将把那个用户控件的HTML代码返回给JS, 最后是修改 divResultList 元素的html代码。

为什么要这样做呢，好像这个问题Jeffrey Zhao和dudu都曾“回答”过。因为有时在JS中拼接HTML实在是不方便。
可能有些人会建议使用jquery.tmpl来替代，但有时还是觉得在服务端“拼HTML”会更方便，那么这个功能就可以派上用场了。

说明：这个功能的实现参考了Jeffrey Zhao的文章使用User Control做HTML生成 在此表示感谢。

由于".ascx" 文件是不能直接访问的，所以还需要以下配置：

<httpHandlers>
    <remove verb="*" path="*.ascx"/>
    <add verb="*" path="*.ascx" validate="false" type="FishWebLib.Ajax.UserControlHandler, FishWebLib, 
			Version=3.0.0.0, Culture=neutral, PublicKeyToken=04db02423b9ebbb2"/>
</httpHandlers>

或者不使用以上配置，但需要一个 ashx 处理器

public class uc : IHttpHandler {

    // 说明：
    // 在本网站的示例中，有些JS调用的URL诸如：url: "/Controls/CustomerInfo.ascx?id=1"
    // 由于 ".ascx"这种扩展名一般是被Asp.net禁止访问的。
    // 所以如果您没有机会修改IIS级别的设置或者Web.config，则不能使用上面的格式，
    // 
    // 而只能使用这种格式的URL了：url: "handler/uc.ashx?ctl=CustomerInfo&id=1"
    // URL参数中的 ctl 的含义是：指定要请求哪个用户控件的名称， id是一个其它的参数，暂不讨论。
    // 
    // 这也是当前文件"uc.ashx"存在的意义了。
    // 在这个文件中，只需要简单的“转发”一下调用就可以了。
    // 
    // 如果您觉得 ctl 这个参数的名称不恰当，也可以用这种方法来“重定义”，
    // 最后可以调用  ProcessRequest(HttpContext context, string controlVirtualPath, bool preserveForm) 
    // 一般来说，第三个参数强烈建议设为 true. 
    // 

    
    public void ProcessRequest (HttpContext context) {
        // 转发调用，第二个参数是说：要请求的用户控件在哪个目录中可以找到。null 会自动改成 "~/Controls/"
        // 所以，如果您的用户控件不是在"~/Controls/"中，请指定正确的目录名。
        FishWebLib.Ajax.UcExecutor.ProcessRequest(context, null);
    }

}

Javascript调用代码

var url = 'uc.ashx?ctl=OrderList&' + $.param({ StartDate: '2010-12-01', EndDate: '2011-01-03' });
$("#divResultList").load(url); 

更建议的做法

可参考【直接调用C#方法】的处理方式，先将请求发给一个C#方法，在那个C#方法中，获取数据，然后再执行所需的用户控件。这也是MVC的推荐做法。可参考以下代码：

/// <summary>
/// Ajax服务类，提供“订单记录”相关操作
/// </summary>
public static class AjaxOrder
{
    /// <summary>
    /// 搜索订单，并以HTML代码的形式返回给客户端
    /// </summary>
    /// <returns></returns>
    public static string Search()
    {
        // 从查询字符串中读取客户端发过的日期范围。
        QueryDateRange range = QueryDateRange.GetDateRangeFromQueryString("StartDate", "EndDate");

        OrderListViewData data = new OrderListViewData();
        data.PageIndex = data.GetCurrentPageIndex();
        data.PageSize = AppHelper.DefaultPageSize;

        // 搜索数据库
        data.List = BllFactory.GetOrderBLL().Search(range, data);

        // 执行用户控件，并传递所需的呈现数据。
        return FishWebLib.Ajax.UcExecutor.Execute("~/Controls/OrderList.ascx", data);
    }
    
}

用户控件OrderList

<%@ Control Language="C#" Inherits="FishWebLib.Mvc.MyUserControlView<OrderListViewData>" %>

<table class="GridView" cellspacing="0" cellpadding="4" border="0" style="border-collapse:collapse; width: 99%">
    <tr align="left">
        <th style="width:100px;">订单编号</th>
        <th style="width:160px;">时间</th>
        <th style="width:300px;">客户</th>
        <th style="width:100px;">订单金额</th>
        <th style="width:60px;">已处理</th>
    </tr>

<% foreach( var item in Model.List ) { %>
<tr>
    <td>
        <a href="#" OrderNo="<%= item.OrderID %>" class="easyui-linkbutton" plain="true" 
			iconCls="icon-open"><%= item.OrderNo %></a>
    </td>
    <td><%= string.Format("{0:yyyy-MM-dd HH:mm:ss}", item.OrderDate) %></td>
    <td>
        <a href="#" Customer='<%= item.ValidCustomerId %>' class="easyui-linkbutton" plain="true" 
			iconCls="icon-open"><%= item.CustomerName.HtmlEncode() %></a>
    </td>
    <td><%= item.SumMoney.ToText() %></td>
    <td>
        <%= item.Finished.ToCheckBox(null, "chk_Finished", true) %>
    </td>
</tr>

<% } %>

<%= Model.PaginationBar(5) %>
</table>

好了，这个演示就写到这里，更多细节请查看用户手册。

返回到目录：晒晒我的Ajax服务端框架

点击此处进入示例展示及下载页面