In the context of using the Jtemplate plugin, we shared the flexibility of the Jtemplate plug-in, which certainly gave us a lot of convenience to provide better UX (User experience) in an era when the JSON performance was particularly popular and widely supported. Similar features are available in ASP.net Ajax (currently PREIVEW3) 4.0, and today we'll look at how to use asp.net Ajax 4.0 Template.
Introducing Ajax class libraries and related namespaces
To use ASP.net AJAX 4.0 you must first obtain a 4.0 JS class library. You can get it on the CodePlex: Http://www.codeplex.com/aspnet/Wiki/View.aspx?title=AJAX&referringTitle=Home. AJAX4.0 provides client support, data templates, data sources and Data View controls for the Ado.net data service, as well as data binding and other features. There are two JS files in the Downloaded class library: Microsoftajaxtemplates.js and Microsoftajaxadonet.js. It is referenced first to the paging file, and the related namespaces need to be imported in order to use the DataView and template features:
<body
xmlns:sys="javascript:Sys"
xmlns:dv="javascript:Sys.UI.DataView"
sys:activate="*">
<form id="form1" runat="server">
<asp:ScriptManager ID="manager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Library/MicrosoftAjaxAdoNet.js" />
<asp:ScriptReference Path="~/Library/MicrosoftAjaxTemplates.js" />
</Scripts>
</asp:ScriptManager>
</body>
Here I have introduced the Sys namespace and the Sys.UI.DataView namespace. Because this is the namespace in which the related controls reside in the JS class library. Sys:activate indicates that the element that owns the SYS:ATACTH tag will be activated in the current document, so that it will take effect when the template is attached to the DataView. * Indicates that all elements are activated.
Define a simple template and build
OK, next we'll define a simple template and bind the data source by consuming the ado.net. Note that a well-defined template must have a sys:attach= "DV" attribute, indicating that the template is valid for DataView space and that the Ajax class library is associated during initialization. If Sys:attach is not declared, a null reference error is generated when the Set_data () method is executed.
<div>
<ul id="customerListView" class="sys-template" sys:attach="dv">
<li>{{ CompanyName }}</li>
</ul>
</div>