Client-side Data Binding in ASP.NET AJAX 4.0
The 4.0 release of ASP.NET AJAX will include a significant number of new features targeted at client-side programming. Earlier releases of ASP.NET AJAX included client-side programming features like web service proxies, global helper functions (like $get and $create), client library additions (like Sys.StringBuilder), and a complete set of extensions to add classes, namespaces, interfaces, and inheritance to the JavaScript language. Most of these features, however, were targeted at supporting the developer in building client-side features by hand, and did not help much with generating client-side HTML or manipulating the DOM. Version 4.0 introduces two major features for simplifying client-side development: client-side data binding and declarative component creation. As we’ll see, the addition of these two features greatly expands the options you have when writing client pages. Additionally, declarative instantiation and templating define a client-side model that is very familiar and therefore easy to use.
As you may be aware, the first release of ASP.NET AJAX had a supplemental futures release that contained an implementation of declarative instantiation and client binding, so we always knew this was coming. However, the earlier implementation was based on XML and required that the user insert a script element marked with the type=’text/xml-script’ attribute below the HTML for the page. While initially very promising, this technique had several drawbacks including its verbosity, its dependence on a client XML parser, and performance issues. Finally in version 4.0, we have a completely new implementation that doesn’t suffer from any of these limitations, and looks to be really useful and easy to use.
This article is based on the preview 4 release of ASP.NET Ajax available for download at http://www.codeplex.com/aspnet/, and thus the details of some features explained here are subject to change before the final release.
DataView and client templates
We will start with a simple example that demonstrates how to associate an array of items in JavaScript with a client template. The core mechanism for client data binding and templating is a client-side class named Sys.UI.DataView. This class inherits from the Sys.UI.Control class which defines a mechanism for associating with an HTML element in the DOM, and it also defines several properties and methods including the data property which can be initialized with an array of data to bind to a template. The page below uses the DataView class to associate a list of courses and their codes to an HTML table template (note we are manually including the script files for ASP.NET Ajax 4.0 – these will be included through the standard ScriptManager control in the final release).
See full detail: http://www.pluralsight.com/main/whitepapers/ClientDataBindingAjax4.aspx
As you may be aware, the first release of ASP.NET AJAX had a supplemental futures release that contained an implementation of declarative instantiation and client binding, so we always knew this was coming. However, the earlier implementation was based on XML and required that the user insert a script element marked with the type=’text/xml-script’ attribute below the HTML for the page. While initially very promising, this technique had several drawbacks including its verbosity, its dependence on a client XML parser, and performance issues. Finally in version 4.0, we have a completely new implementation that doesn’t suffer from any of these limitations, and looks to be really useful and easy to use.
This article is based on the preview 4 release of ASP.NET Ajax available for download at http://www.codeplex.com/aspnet/, and thus the details of some features explained here are subject to change before the final release.
DataView and client templates
We will start with a simple example that demonstrates how to associate an array of items in JavaScript with a client template. The core mechanism for client data binding and templating is a client-side class named Sys.UI.DataView. This class inherits from the Sys.UI.Control class which defines a mechanism for associating with an HTML element in the DOM, and it also defines several properties and methods including the data property which can be initialized with an array of data to bind to a template. The page below uses the DataView class to associate a list of courses and their codes to an HTML table template (note we are manually including the script files for ASP.NET Ajax 4.0 – these will be included through the standard ScriptManager control in the final release).
See full detail: http://www.pluralsight.com/main/whitepapers/ClientDataBindingAjax4.aspx
Comments