Cool UI template Technology Based on jTemplates and ascx collaborative work

A long time ago, shortly after ASP. NET ajax caught public attention, ScottGu, a member of the asp.net ajax team, published a very practical article:

Tip/Trick: Cool UI Templating Technique to use with ASP. net ajax for non-UpdatePanel scenarios,

Chinese: Tips and tips: Cool UI template technology that can be used with ASP. net ajax without UpdatePanel

After reading it, it was very useful and left me with a very deep image. Afterwards, I learned from ScottGu in many scenarios. If you have read this article carefully
In this way, how does one combine the tedious HTML string or dom fragments on the client and use the ascx user control in ASP. NET to conveniently and elegantly complete the process.

During the development of EnjooSite, because a large number of client code is involved, a large number of client page construction is indispensable. Therefore, I applied ScottGu's solution again,
However, according to the features of the EnjooSite project, the jTemplates JavaScript library is introduced for collaborative work.

Based on the characteristics of jTemplates and the advantages of ScottGu cool UI template technology, let's take a look at how I improved it:

Step 1: familiar with jTemplates

WidgetContainer. setTemplate (template, null );
WidgetContainer. processTemplate (data );
JTemplates works in an intuitive way:

In the first setTemplate (template, null), set the jQuery object widgetContainer to a templated processing object. The template structure is determined by the parameter template;

In the second sentence, processTemplate (data) is used to present and process templated objects. The actual data is determined by the parameter data.

I want to draw attention to the two important concepts of templates and data in jTemplates.

Step 2: Get template and data

Since jTemplates needs to work collaboratively with templates and data, how can we provide these two items conveniently and quickly?

Template. ascx


1 <div>
2 {# if $ T. staticHTMLs. length> 0}
3 {# foreach $ T. staticHTMLs as item}
4 <div id = "StaticHTML _ {$ T. item. id} _ Viewer"
Commandname = "enjoosite_statichtml_item"
Commandargument = "{$ T. item. id}" >{$ T. item. description} </div>
5 {#/}
6 {#/if}
7 <div id = "staticHTML _ {$ T. widgetId} _ Pager" class = "pager"
Commandargument = "{$ T. maxItems }_{ $ T. listCount }_{ $ T. pageCount }_{ $ T. widgetId}"> </div>

8 <div class = "enjoosite_widget_auto_action">
9 (function ($ ){
10
Ensure ({js: '/jquery-pager.1.1.js'}, function (e) {buildStaticHtmlPager ('<% =
String. Format ("staticHTML _ {0} _ Pager", WidgetId) %> ');});
11}) (jQuery)
12 </div>
13 </div>


Data. ascx


1 <script type = "text/C #" runat = "server">
2 public string GetStaticHTML ()
3 {
4 IPagedCollection <StaticHTML> pagedStaticHTMLs = StaticHTMLs. GetPaged (WidgetId, 1, ListCount );
5
6 int maxItems = pagedStaticHTMLs. MaxItems;
7 int pageCount = 10
8
9 StringWriter stringWriter = new StringWriter ();
10 JsonWriter jsonWriter = new JsonTextWriter (stringWriter );
11 jsonWriter. WriteStartObject ();
12 jsonWriter. WritePropertyName ("widgetId ");
13 jsonWriter. WriteValue (WidgetId );
14 jsonWriter. WritePropertyName ("maxItems ");
15 jsonWriter. WriteValue (pagedStaticHTMLs. MaxItems );
16 jsonWriter. WriteStartArray ();
17 foreach (StaticHTML item in pagedStaticHTMLs)
18 {
19 jsonWriter. WriteStartObject ();
20 jsonWriter. WritePropertyName ("id ");
21 jsonWriter. WriteValue (item. Id );
22 jsonWriter. WritePropertyName ("title ");
23 jsonWriter. WriteValue (item. Title );
24 jsonWriter. WriteEndObject ();
25}
26
27 jsonWriter. WriteEndArray ();
28 jsonWriter. WriteEndObject ();
29 jsonWriter. Flush ();
30 return stringWriter. GetStringBuilder (). ToString ();
31}
32 </script>
33 <% = GetStaticHTML () %>


Please carefully read c <div in template. ascx
Class = "enjoosite_widget_auto_action"> </div>
The HTML string is written in. It is the client action that needs to be executed instantly after the current template is asynchronously loaded.

(For how to return template. ascx and data. ascx to the client using the WebMethod method, please read the link at the top of my article)

Step 3: Load template and data on the client

1 var template = result. Template;
2 var data = eval ("(" + result. Data + ")");
3 widgetContainer. setTemplate (template, null, {filter_data: false });
4 widgetContainer. processTemplate (data );


Please pay attention to row 3, because we are using data. in ascx, A json structure such as [{}, {}] is returned. Therefore, we use eval to convert the data string to a JavaScript Object, then, use jTemplates to quickly present the client template.

As you can see, in the whole process, at least in the process, we basically do not need to carry out too much client encoding, especially the splicing of templates and data, we can all use advanced functions such as Visual notification and Structure Check In ascx.

I hope these inconspicuous ideas will inspire you. Most of the content injection methods of all functional modules in EnjooSite are used only to automatically
Processing: the module type is determined during the business processing process, and the corresponding template. ascx and data. ascx modules are automatically loaded for processing.