此功能将让您在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>
好了,这个演示就写到这里,更多细节请查看用户手册。