It's common for an web application to retrieve data from server and bind to control.
Control being alone without data binding is nothing more than styled modeling statue.
So interacting between DB and web control comes to challenge for developers whenever we design its working procedure.
Ajax is possible only with a strong JavaScript engine that runs within the client browser and provides the foundation for more advanced and asynchronous features. The Javascript library currently incorporated in ASP.NET 3.5 Service Pack 1 is a necessary, but insufficient, attempt to deliver such a library. A more powerfule ASP.NET AJAX platform is required and it is just being introduced as part of ASP.NET AJAX 4.0
The HTML Message pattern can be easily implemented with the tools available in ASP.NET 3.5. All that it requires on the client is the binding of returned markup to the page DOM. The code snippet below shows what's really required from a coding perspective:
Too often, the power of the AJAX paradigm is mistakenly represented with the possibility of asynchronously updating small portions of the user interface. It is one thing to get a scalar value asynchronously (say, the current balance of a bank account) and insert that into the existing page DOM; it is quite another thing to refresh asynchronously an array of data that changes frequently and requires a gridlike infrastructure to display.
The server side is simple with server controls, as below:
A template must be able to render XHTML-compliant markup. A template must be processed as quickly as possible by the underlying rendering engine and should let the engine render a large percentage of the markup before the user realizes there's a delayed response from the application. A template must support a very simple syntax for binding that is easy to read, while not being limited to simple cases only. You should be able to mix markup and code in a template. Ideally, the code that triggers the rendering of the template should be declarative and not particularly intrusive.
Let's review the characteristics of the HTML template model supported by ASP.NET AJAX 4.0.
The DataView control is essentially a component that takes some input data and the ASP.NET AJAX template and produces HTML markup to be displayed within the page. The DataView is also referenced as a behavior component. In general, a behavior is a script-based component that, once attached to a DOM element, changes the way in which the HTML element works within the client browser. You can work with a behavior in either of two ways. You can declaratively attach the behavior to its target DOM element, or you can create an instance of the behavior and configure it programmatically. In the latter case, the association between the behavior and the template is just part of the configuration
To attach behaviors to a DOM element, you use the sys:attach custom attribute. As you can see, the attribute is associated with a namespace URI that makes it XHTML compliant. You declare the sys prefix in the element:
The name of the attribute—dataview, in the preceding code snippet—is arbitrary and can be changed to anything else you like. Whatever name you pick, however, it must be maintained in the remainder of the code to reference the behavior.
So interacting between DB and web control comes to challenge for developers whenever we design its working procedure.
Ajax is possible only with a strong JavaScript engine that runs within the client browser and provides the foundation for more advanced and asynchronous features. The Javascript library currently incorporated in ASP.NET 3.5 Service Pack 1 is a necessary, but insufficient, attempt to deliver such a library. A more powerfule ASP.NET AJAX platform is required and it is just being introduced as part of ASP.NET AJAX 4.0
Requirements for Client-Side Data Binding
There are two fundamental patterns for implementing data binding functionalities. One is the HTML Message pattern, and the other is the Browser-side Template pattern. The former entails making a remote service call to a component that returns prearranged HTML markup ready for display. The latter is all about setting up machinery to download raw data and decide on the client how to render it out.The HTML Message pattern can be easily implemented with the tools available in ASP.NET 3.5. All that it requires on the client is the binding of returned markup to the page DOM. The code snippet below shows what's really required from a coding perspective:
grid.innerHTML = markup;
In the example, grid indicates the HTML element to contain the markup—typically this is a DIV tag. The variable named markup, on the other hand, indicates any chunk of HTML obtained as a response from a service method call
Too often, the power of the AJAX paradigm is mistakenly represented with the possibility of asynchronously updating small portions of the user interface. It is one thing to get a scalar value asynchronously (say, the current balance of a bank account) and insert that into the existing page DOM; it is quite another thing to refresh asynchronously an array of data that changes frequently and requires a gridlike infrastructure to display.
The server side is simple with server controls, as below:
Collection arrays = GetSampleObjects(...);
DataGrid1.DataSource = arrays;
DataGrid1.DataBind();
What would be the equivalent of such code for the client side? The first part can be easily mapped to the features of ASP.NET 3.5. All you do is instantiate and use a client proxy for a remote service that is capable of getting you up-to-date values, like so:
DataGrid1.DataSource = arrays;
DataGrid1.DataBind();
var service = new Samples.Services.SampleService();
var arrays = service.GetSampleObjects(...);
The arrays variable is a JavaScript array of objects that represents the data you received. How would you fit this chunk of raw data into an existing HTML layout? The BST pattern is here to help. It requires that you define the following elements: your own syntax for HTML templates and related data placeholders; your own syntax for binding actual data to placeholders; an HTML factory that takes templates and data and produces updated markup; and glue code to tie it up all together while offering a manageable programming interface.
var arrays = service.GetSampleObjects(...);
A template must be able to render XHTML-compliant markup. A template must be processed as quickly as possible by the underlying rendering engine and should let the engine render a large percentage of the markup before the user realizes there's a delayed response from the application. A template must support a very simple syntax for binding that is easy to read, while not being limited to simple cases only. You should be able to mix markup and code in a template. Ideally, the code that triggers the rendering of the template should be declarative and not particularly intrusive.
Let's review the characteristics of the HTML template model supported by ASP.NET AJAX 4.0.
Syntax for Data Bindings
In ASP.NET AJAX 4.0, an HTML template is a DIV tag, or any other container tag, decorated with the sys-template class attribute, as shown below:
<div>
To display data, a template must be instantiated, bound to data and rendered within a container. The Sys.UI.DataView client control can be used to automate and simplify all these tasks.
<ul id="MyItem" class="sys-template">
<li>
<asp:Label runat="server" Text="{{CompanyName}}" />
</li>
</ul>
</div>The DataView control is essentially a component that takes some input data and the ASP.NET AJAX template and produces HTML markup to be displayed within the page. The DataView is also referenced as a behavior component. In general, a behavior is a script-based component that, once attached to a DOM element, changes the way in which the HTML element works within the client browser. You can work with a behavior in either of two ways. You can declaratively attach the behavior to its target DOM element, or you can create an instance of the behavior and configure it programmatically. In the latter case, the association between the behavior and the template is just part of the configuration
To attach behaviors to a DOM element, you use the sys:attach custom attribute. As you can see, the attribute is associated with a namespace URI that makes it XHTML compliant. You declare the sys prefix in the element:
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="customerList" >
The sys prefix maps to the javascript:Sys namespace URI defined in the Microsoft AJAX library.The name of the attribute—dataview, in the preceding code snippet—is arbitrary and can be changed to anything else you like. Whatever name you pick, however, it must be maintained in the remainder of the code to reference the behavior.
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="customerList" >
<script type="text/javascript">
<div id="customList" >
<script type="text/javascript">
// Define a global instance of the DataView
var theDataView = null;
// This function can be called from anywhere in the page to
// fill the template with passed data and update the page.
function renderTemplate(dataSource) {
// Ensure we have just one copy of the DataView.
// The DataView's constructor gets a DOM reference to the template.
if (theDataView === null)
theDataView = new Sys.UI.DataView($get("MyTemplate"));
// Bind data to the template associated with the DataView
theDataView.set_data(dataSource);
// Force the template to render
theDataView.refresh();
}
function bind() {
theDataView = $find("DataView1");
theDataView.set_data(theCustomers);
}
</script"><div id="customList" >
<ul id="MyItem" class="sys-template" sys:attach="dataview" dataview:data="{{ theCustomers }}">
<li>
<asp:Label runat="server" Text="{{CompanyName}}" />
</li>
</ul>
<input type="button" value="Perform binding" onclick="bind()" />
</div>
Comments
Post a Comment