我的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服務端架構

點擊此處進入樣本展示及下載頁面