返回到目錄：曬曬我的Ajax服務(wù)端框架

此功能將讓您在Javascript直接請(qǐng)求一個(gè)ascx用戶控件，并獲取它的輸出HTML。示例代碼如下：

Javascript調(diào)用代碼

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

上面的調(diào)用究竟完成了什么功能呢：請(qǐng)求一個(gè)用戶控件 Controls/QueryOrders.ascx ,并傳遞二個(gè)參數(shù)，
在服務(wù)端處理后，將把那個(gè)用戶控件的HTML代碼返回給JS, 最后是修改 divResultList 元素的html代碼。

為什么要這樣做呢，好像這個(gè)問題Jeffrey Zhao和dudu都曾“回答”過。因?yàn)橛袝r(shí)在JS中拼接HTML實(shí)在是不方便。
可能有些人會(huì)建議使用jquery.tmpl來替代，但有時(shí)還是覺得在服務(wù)端“拼HTML”會(huì)更方便，那么這個(gè)功能就可以派上用場(chǎng)了。

說明：這個(gè)功能的實(shí)現(xiàn)參考了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>

或者不使用以上配置，但需要一個(gè) ashx 處理器

public class uc : IHttpHandler {

    // 說明：
    // 在本網(wǎng)站的示例中，有些JS調(diào)用的URL諸如：url: "/Controls/CustomerInfo.ascx?id=1"
    // 由于 ".ascx"這種擴(kuò)展名一般是被Asp.net禁止訪問的。
    // 所以如果您沒有機(jī)會(huì)修改IIS級(jí)別的設(shè)置或者Web.config，則不能使用上面的格式，
    // 
    // 而只能使用這種格式的URL了：url: "handler/uc.ashx?ctl=CustomerInfo&id=1"
    // URL參數(shù)中的 ctl 的含義是：指定要請(qǐng)求哪個(gè)用戶控件的名稱， id是一個(gè)其它的參數(shù)，暫不討論。
    // 
    // 這也是當(dāng)前文件"uc.ashx"存在的意義了。
    // 在這個(gè)文件中，只需要簡單的“轉(zhuǎn)發(fā)”一下調(diào)用就可以了。
    // 
    // 如果您覺得 ctl 這個(gè)參數(shù)的名稱不恰當(dāng)，也可以用這種方法來“重定義”，
    // 最后可以調(diào)用  ProcessRequest(HttpContext context, string controlVirtualPath, bool preserveForm) 
    // 一般來說，第三個(gè)參數(shù)強(qiáng)烈建議設(shè)為 true. 
    // 

    
    public void ProcessRequest (HttpContext context) {
        // 轉(zhuǎn)發(fā)調(diào)用，第二個(gè)參數(shù)是說：要請(qǐng)求的用戶控件在哪個(gè)目錄中可以找到。null 會(huì)自動(dòng)改成 "~/Controls/"
        // 所以，如果您的用戶控件不是在"~/Controls/"中，請(qǐng)指定正確的目錄名。
        FishWebLib.Ajax.UcExecutor.ProcessRequest(context, null);
    }

}

Javascript調(diào)用代碼

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

更建議的做法

可參考【直接調(diào)用C#方法】的處理方式，先將請(qǐng)求發(fā)給一個(gè)C#方法，在那個(gè)C#方法中，獲取數(shù)據(jù)，然后再執(zhí)行所需的用戶控件。這也是MVC的推薦做法。可參考以下代碼：

/// <summary>
/// Ajax服務(wù)類，提供“訂單記錄”相關(guān)操作
/// </summary>
public static class AjaxOrder
{
    /// <summary>
    /// 搜索訂單，并以HTML代碼的形式返回給客戶端
    /// </summary>
    /// <returns></returns>
    public static string Search()
    {
        // 從查詢字符串中讀取客戶端發(fā)過的日期范圍。
        QueryDateRange range = QueryDateRange.GetDateRangeFromQueryString("StartDate", "EndDate");

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

        // 搜索數(shù)據(jù)庫
        data.List = BllFactory.GetOrderBLL().Search(range, data);

        // 執(zhí)行用戶控件，并傳遞所需的呈現(xiàn)數(shù)據(jù)。
        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;">訂單編號(hào)</th>
        <th style="width:160px;">時(shí)間</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>

好了，這個(gè)演示就寫到這里，更多細(xì)節(jié)請(qǐng)查看用戶手冊(cè)。

返回到目錄：曬曬我的Ajax服務(wù)端框架

點(diǎn)擊此處進(jìn)入示例展示及下載頁面