This quick step by step tutorial is made with Visual Studio 2010 beta2
and ASP.NET AJAX 4.0 Preview 6.
It is possible that some properties and/or methods will be changed in future versions, but so far this is the way to use client side templates in ASP.NET AJAX 4.0.
Downloads
First you should download appropriate software:
- Microsoft .NET Framework 4.0
- Microsoft Visual Studio 2010
- ASP.NET Ajax Library
Project
For your first project you should use web site or web project visual studio templates, create new project and add appropriate scripts to a project.
For this example I’ve created a new web site and added all the AJAX scripts we need to a folder named “MicrosoftAJAX” (look at the picture).
Also I have created a simple demo xml web service to be used from client side to read data for our template.
1: <%@ WebService Language="C#" Class="DemoService" %>
2:
3: using System;
4: using System.Web;
5: using System.Web.Services;
6: using System.Web.Services.Protocols;
7:
8: [WebService(Namespace = "http://icodefactory.com/",
9: Description="Demo web service used by client side templates")]
10: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
11: // To allow this Web Service to be called from script,
12: // using ASP.NET AJAX, uncomment the following line.
13: [System.Web.Script.Services.ScriptService]
14: public class DemoService : System.Web.Services.WebService {
15:
16: [WebMethod(Description="Returns Demo Contacts data")]
17: public Contact[] GetContacts() {
18: Contact[] contacts = new Contact[3] {
19: new Contact(){ Id=1, Name = "John", Lastname="Doe" },
20: new Contact(){ Id=2, Name = "Joan", Lastname="Smith" },
21: new Contact(){ Id=3, Name = "Brad", Lastname="Forbs" }
22: };
23: return contacts;
24: }
25:
26: }
Pay attention that you have to set the ScriptService attribute so your web service can be used from JavaScript.
Finally we have to add some simple html (yes, pure html) file and import appropriate scripts:
- MicrosoftAjax.js
- MicrosoftAjaxTemplates.js
for AJAX client side libraries and
for access to the xml web service.
1: <script src="MicrosoftAJAX/MicrosoftAjax.debug.js"
2: type="text/javascript"></script>
3: <script src="MicrosoftAJAX/MicrosoftAjaxTemplates.debug.js"
4: type="text/javascript"></script>
5:
6: <script src="DemoService.asmx/jsdebug"
7: type="text/javascript"></script>
We also need some styling on the page. Class ‘sys-template’ is used to hide empty table before data is bound from the service by using AJAX DataView client side control.
1: <style type="text/css">
2: /*Used to hide empty table*/
3: .sys-template
4: {
5: display: none;
6: }
7: /* Style of table that shows data*/
8: .table_style
9: {
10: background-color: Olive;
11: padding: 5px 5px 5px 5px;
12: }
13: </style>
Now, time for JavaScript that should load the data from the xml web service, fill the DataView object and bind the data to the html template.
<script type="text/javascript">
// ASP.NET Ajax client side control - DataView
var contactsView;
// Triggers on page load
function pageLoad() {
// Create Contacts DataView
contactsView =
$create(Sys.UI.DataView, {}, {}, {}, $get("contactsBody"));
// Load Contacts from web service
DemoService.GetContacts(ContactsLoaded);
}
function ContactsLoaded(contactsData) {
// Display data in Contacts DataView
contactsView.set_data(contactsData);
}
</script>
The pageLoad function creates the DataView client side object and calls the xml web service to populate the object with data.
On successful service call the data is bound to the html with a simple call to the set_data() function.
This is how your template should look:
1: <table class="table_style" border="0" cellpadding="4" cellspacing="4">
2: <thead>
3: <tr>
4: <th>
5: Name
6: </th>
7: <th>
8: Lastname
9: </th>
10: </tr>
11: </thead>
12: <!-- tbody tag id is used to identify tag in DOM that are going to be
13: used by the DataView. Class is set to 'sys-template' in order to
14: hide empty table -->
15: <tbody id="contactsBody" class="sys-template">
16: <tr>
17: <td>
18: {{ Name }}
19: </td>
20: <td>
21: {{ Lastname }}
22: </td>
23: </tr>
24: </tbody>
25: </table>
<tbody> tag is used to become a template for the data in the DataView object.
DataView will change HTML with appropriate tags and generate table rows for every data row from the xml web service method call.
{{ Name }} and {{ Lastname }} parts will be replaced with actual data.
At the end you have your data.
Hope this will help you start with the new templates. Web development is moving to client side and everyone should embrace the client side because of its many benefits, like responsiveness, bandwidth and UI patterns.
Demo Solution may be downloaded from our public download section.