My Ajax Server framework-(4) JS directly requests the ascx User Control

Note: the framework described in this article has a new version,Click the link below to read.
[Write your own ASP. net mvc Framework]

Return to the directory: bask in my Ajax Server framework

This function allows you to directly request an ascx user control in Javascript and obtain its output HTML. The sample code is as follows:

Javascript call code

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

What is the function of the above call? request a user control Controls/QueryOrders. ascx and pass two parameters,
After processing on the server side, the HTML code of the user control is returned to JS, And the html code of the divResultList element is modified.

Why? It seems that both Jeffrey Zhao and dudu have "answered" this question. It is inconvenient to splice HTML in JS.
Some people may suggest using jquery. tmpl instead, but sometimes they still feel that it is more convenient to "spell HTML" on the server side, so this function can be used.

Note: For implementation of this function, please refer to Jeffrey Zhao's article using User Control for HTML generation.

Because the ". ascx" file cannot be accessed directly, you also need the following Configuration:

Or do not use the above configuration, but need an ashx Processor
Public class uc: IHttpHandler {// Note: // in this website example, some JS call URLs such as: URL: "/Controls/CustomerInfo. ascx? Id = 1 "// because the extension". ascx "is generally forbidden by Asp.net. // If you have no chance to modify IIS-level settings or Web. the preceding format cannot be used, but only the URL in this format can be used: url: "handler/uc. ashx? Ctl = CustomerInfo & id = 1 "// The ctl parameter indicates the name of the user control to be requested. id is another parameter. //// This is also the significance of the current file "uc. ashx. // In this file, you only need to simply "Forward" the call. //// If you think the name of the ctl parameter is inappropriate, you can also use this method to "redefine". // you can call ProcessRequest (HttpContext context, string controlVirtualPath, bool preserveForm) // in general, the third parameter is strongly recommended to be set to true. // public void ProcessRequest (HttpContext context) {// forward call. The second parameter indicates the directory in which the user control to be requested can be found. Null is automatically changed "~ /Controls/"// Therefore, if your user control is not in "~ /Controls/", please specify the correct directory name. FishWebLib. Ajax. UcExecutor. ProcessRequest (context, null );}}
Javascript call code
var url = 'uc.ashx?ctl=OrderList&' + $.param({ StartDate: '2010-12-01', EndDate: '2011-01-03' });$("#divResultList").load(url); 
Recommended Practices
You can refer to the processing method of directly calling the C # method. First, send the request to a C # method, obtain data in the C # method, and then execute the required user control. This is also the recommended MVC practice. Refer to the following code:
/// <Summary> // Ajax service class, provide "order record" related operations // </summary> public static class AjaxOrder {// <summary> // search for orders, return the code in HTML format to the client // </summary> /// <returns> </returns> public static string Search () {// read the date range sent by the client from the query string. QueryDateRange range = QueryDateRange. getDateRangeFromQueryString ("StartDate", "EndDate"); OrderListViewData data = new OrderListViewData (); data. pageIndex = data. getCurrentPageIndex (); data. pageSize = AppHelper. defaultPageSize; // search for database data. list = BllFactory. getOrderBLL (). search (range, data); // execute the user control and pass the required rendering data. Return FishWebLib. Ajax. UcExecutor. Execute ("~ /Controls/OrderList. ascx ", data );}}
User Control 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; "> Order No. </th> <th style =" width: 160px; "> time </th> <th style =" width: 300px; "> customer </th> <th style =" width: 100px; "> order amount </th> <th style =" width: 60px; "> processed </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> <% = string. format ("{0: yyyy-MM-dd HH: mm: ss}", item. orderDate) %> </td> <a href = "#" Customer = '<% = item. validCustomerId %> 'class = "easyui-linkbutton" plain = "true" iconCls = "icon-open"> <% = item. customerName. htmlEncode () %> </a> </td> <% = item. sumMoney. toText () %> </td> <% = item. finished. toCheckBox (null, "chk_Finished", true) %> </td> </tr> <% }%> <% = Model. paginationBar (5) %> </table>
Now, this demo is written here. For more details, see the user manual.
Return to the directory: bask in my Ajax Server framework
Click here to go to the demo and download page