Introduction to template programming in ASP. NET Ajax 4.0

Source: Internet
Author: User
Tags javascript array

Use of ASP. NET Ajax 4.0 templates

1. Introduction:

When Microsoft released its ASP. NET 3.0, it also released its Ajax platform, ASP. NET Ajax. But to be honest, compared with other Ajax platforms, it had no outstanding features. However, when I evaluated ASP. NET Ajax 4.0, I was shocked by its features. New features fully focus on browser technologies, such as XHTML and JavaScript. I really admire the ASP. NET Ajax team. Try to see the new features of ajax4.0:

Template Based Client Side Programming
Dataview and datacontext
Live Data Binding

2. template Programming

The template form provides a pattern that allows you to design Web UI styles and can add location tags to runtime data. In the following example, I designed a web page to display the product data of the adventureworks database through ADO. NET data service. The entire mode is as follows:

Service Code:

CopyCode The Code is as follows: public class awproductdataservice: dataservice
{
Public static void initializeservice (idataserviceconfiguration config)
{
Config. setentitysetaccessrule ("*", entitysetrights. All );
}
}

The ASPX page of the ASP. NET template is as follows:Copy codeThe Code is as follows: <% @ page Language = "C #" autoeventwireup = "true"
Codebehind = "clienttemplateanddataviewdemo. aspx. cs"
Inherits = "coreenhancements. Ajax. clienttemplateanddataviewdemo" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> Microsoft tech. Ed-client-side templating demo </title>
<Style type = "text/CSS"> <! --
. Sys-template {display: None}

--> </Style> <style type = "text/CSS" bogus = "1">. sys-template {display: None}
</Style>
<SCRIPT type = "text/JavaScript" src = "../scripts/microsoftajax. Debug. js" src = "scripts/microsoftajax. Debug. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "../scripts/microsoftajaxtemplates. Debug. js" src = "scripts/microsoftajaxtemplates. Debug. js"> <! --

// --> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "../scripts/microsoftajaxadonet. Debug. js" src = "scripts/microsoftajaxadonet. Debug. js"> <! --

// --> </SCRIPT>
<SCRIPT type = "text/JavaScript"> <! --
VaR datacontext = new SYS. Data. adonetdatacontext ();
Datacontext. set_serviceuri ("awproductdataservice. SVC ");
Datacontext. initialize ();

// -->

SYS: activate = "*">





















dataview: dataprovider = "{datacontext }}" dataview: fetchoperation = "Products">
name list price size weight
{binding name} {binding listprice} {binding size} {binding weight}




I use a traditional HTML table to display data. You can see that the new attributes are in the <tbody> node, and the node that stores data <TD>. ASP. NET Ajax 4.0 has a good template driver to parse these new attributes. These new attributes are none in X (HT) ml or JavaScript. One of the highlights here is that all these are parsed by XHTML, so they are not the custom attributes of common HTML elements. The <tbody> class attribute is set to sys-template, which is a convention used to hide the initialization template obtained from the user. The. sys-template {display: None} field or attribute can be expressed by the {} symbol for display in the data display area.

3. datacontext:

The template needs data to fill its data display area as the context. Context data can be bound to any Javascript array or an object that can be used as a template. The most powerful aspect of Context data is its ability to interact with JSON/atom through Web Services. ASP. NET Ajax provides two data contexts in microsfotajaxadonet. JS:

SYS. Data. datacontext
SYS. Data. adonetdatacontext
Context data can automatically track all data changes through the new SYS. Observer object. Adonetdatacontext supports many additional features of the ADO. NET data service, such as authentication management, collaboration between links and entities. The following example describes how to use adonetdatacontext to interact with the ADO. NET data service of adventureworks.Copy codeThe Code is as follows: var datacontext = new SYS. Data. adonetdatacontext (); datacontext. set_serviceuri ("awproductdataservice. SVC"); datacontext. initialize ();

The set_serviceuri () method can be used to interact with the WCF Ajax or ADO. NET data service. The initialize () method is used to provide initialization.

4. Data View

Here is a basic component used to display data for the template, which is defined in system. UI. dataview. It is similar to a data source component that supports binding any JavaScript Object or data or ASP. NET Ajax components on the server side. It has a connection property for Data Binding:

Data-to bind a JavaScript array or object
Dataprovider-to bind to a WCF Service
If you need to run thisProgramYou need to add the Ajax libraries of the following clients.

Microsoftajax. js
Microsoftajaxtemplates
Microsoftajaxadonet
The following figure shows a general conceptual model using template programming:

The data is shown as follows:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.