Program | create | template | data
First, Introduction
This article will show you how to implement data binding and templates using Microsoft's new Web development Technology (code named Atlas). If you already understand what Atlas is, its main design purpose and its main components, then you will benefit the most from reading this article.
This article will show you:
· Binds a client ListView control to a DataSource control.
· Use a template to display data.
Premise
To complete the sample program in this article, you will need the following conditions:
· Microsoft Visual Studio 2005 and. NET Framework 2.0. For download information, visit the. NET Framework Developer Center Web site.
· To install the Atlas package on your computer. This MSI installer file includes a Visual Studio Content Installer (. vsi) to create a blank Atlas Web application in Visual Studio. In this article, we have omitted how to install asp.net Atlas content.
Ii. Creating the Atlas application
First, you want to create an Atlas Web application in Visual Studio. When you use the Visual Studio Engineering template to create a new, blank Atlas Web application, Visual Studio creates a normal Web site folder structure with some of the following other items:
· An executable file named Microsoft.Web.Atlas.dll that resides under the Bin folder to provide server-side functionality.
· A file web.config for setting up the Atlas application.
To create a new Atlas Web application in Visual Studio
1. Under the "File" menu, click "New" and click "Web Site".
2. In the New Web Site dialog box, select the asp.net Atlas Web site template item.
3. In the "Location" list, select "File System".
4. Specify a path and development language for the program, and then click OK.
third, provide application test data
In this section, you create two things that the data-binding program will use:
· A data source object-it simulates a database by providing some test data and a class SQL statement.
· A Web service-it connects to a data source object and provides that data to a UI created using the Atlas component.
First, you want to create a data source object.
To create a data source object
1. In Solution Explorer, right-click the site name and click "Add New Item".
2. In the ADD New Item dialog box, select Class and name the class as Samplerow (no file name extension).
3. Select the development language for the class and click the "Add" button.
4. When the system asks you if you want to put the class file in the App_Code folder, click Yes.
5. In the editor, remove any existing code from a class that already exists.
6. Paste the following code into this class to create a data source object.
Using System;
Using System.Collections;
Using System.ComponentModel;
public class samplerow{
private string _name;
private string _description;
private int _id;
[Dataobjectfield (True, True)]
public int Id
{
get {return _id;}
set {_id = value;}
}
[Dataobjectfield (False)]
[DefaultValue ("New Row")]
public string Name
{
get {return _name;}
set {_name = value;}
}
[Dataobjectfield (False)]
[DefaultValue ("")]
public string Description
{
get {return _description;}
set {_description = value;}
}
Public Samplerow ()
{
_id =-1;
}
public samplerow (int ID, string name, string description)
{
_id = ID;
_name = name;
_description = description;
}
}
7. Save and close the file.
The next step is to create a Web service that provides data from the data source object for the ASP.net Web page.
Create a Web service to provide data for a page
1. In Solution Explorer, right-click the site name and click "Add New Item".
2. In the ADD New Item dialog box, under the templates that are already installed by Visual Studio, select Web Service.
3. Specifies that the file name is dataservice.asmx and that the place code in separate file check box is not selected.
4. Choose the language you want to use.
5. Click "Add".
6. In the editor, remove any existing code from the existing class.
7. Paste the following code into this class to create a data source object.
<%@ WebService language= "C #" class= "Sampledataservice"%>
Using System;
Using System.Collections;
Using System.Collections.Generic;
Using System.ComponentModel;
Using System.IO;
Using System.Web;
Using System.Web.Caching;
Using System.Web.Services;
Using System.Web.Services.Protocols;
Using Microsoft.Web.Services;
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
public class Sampledataservice:dataservice {
static List <SampleRow> _data;
static int _nextid;
Static Object _datalock = new Object ();
private static List <SampleRow> Data {
get {
if (_data = = null) {
Lock (_datalock) {
if (_data = = null) {
_data = new List <SampleRow> ();
_data. ADD (New Samplerow (0, "A. Datum Corporation", "http://www.adatum.com"));
_data. ADD (New Samplerow (1, "Adventure works", "http://www.adventure-works.com"));
_data. ADD (New Samplerow (2, "Alpine Ski House", "http://www.alpineskihouse.com"));
_data. ADD (New Samplerow (3, "Baldwin Museum of Science?", "http://www.baldwinmuseumofscience.com"));
_data. ADD (New Samplerow (4, "Blue Yonder Airlines", "http://www.blueyonderairlines.com"));
_data. ADD (New Samplerow (5, "City Power & Light", "http://www.cpandl.com"));
_data. ADD (New Samplerow (6, "Coho Vineyard", "http://www.cohovineyard.com"));
_data. ADD (New Samplerow (7, "Contoso, Ltd", "http://www.contoso.com"));
_data. ADD (New Samplerow (8, "Graphic Design Institute",
"http://www.graphicdesigninstitute.com"));
_nextid = 9;
}
}
}
return _data;
}
}
[DataObjectMethod (Dataobjectmethodtype.delete)]
public void deleterow (int id) {
foreach (Samplerow row in _data) {
if (row. ID = = ID) {
Lock (_datalock) {
_data. Remove (row);
}
Break
}
}
}
[DataObjectMethod (Dataobjectmethodtype.select)]
Public samplerow[] Selectrows () {
return SampleDataService.Data.ToArray ();
}
[DataObjectMethod (Dataobjectmethodtype.insert)]
Public Samplerow InsertRow (string organization, string URL) {
Samplerow NewRow;
Lock (_datalock) {
NewRow = new Samplerow (_nextid++, organization, URL);
_data. ADD (NewRow);
}
return newrow;
}
[DataObjectMethod (Dataobjectmethodtype.update)]
public void Updaterow (Samplerow updaterow) {
foreach (Samplerow row in _data) {
if (row. Id = = updaterow.id) {
Row. Name =updaterow.name;
Row. Description = updaterow.description;
Break
}
}
}
}
8. Save and close the file.
iv. Creating a Web page for host controls
In this section, you will create a new ASP.net Web page to host data-bound controls and templates.
Create a Web page
1. Add a new asp.net page to your project and name it databinding.aspx.
Note that you have cleared the place code in separate file check box. Here, you must create a single ASP.net Web page.
2. Switch to "Source view".
3. In the @page directive, set the title property to "Atlas data-binding Walkthrough", as shown in the following example:
<%@ Page language= "C #" title= "Atlas data-binding Walkthrough"%>
4. Copy and paste the following items into the file under the @page directive:
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<body>
<form id= "main" runat= "server"
<atlas:scriptmanager runat= "Server" id= "ScriptManager"/>
<div id= "datacontents" > </div>
<div style= "Visibility:hidden;display:none"
<div id= "Mastertemplate"
<div id= "Masteritemtemplate"
<b> <span id= "Mastername" > </span> </b>
<BR/>
<asp:linkbutton id= "LinkButton1" runat= "Server"
<span id= "Masterdescription" > </span>
</asp:linkbutton> <BR/>
</div> <br/>
</div>
<div id= "masternodatatemplate" >no data </div>
</div>
</form>
<script type= "Text/xml-script"
<page xmlns:script= "http://schemas.microsoft.com/xml-script/2005"
<components>
<datasource id= "DataSource" serviceurl= "Dataservice.asmx" autoload= "true"/>
<listview id= "datacontents" itemtemplateparentelementid= "Mastertemplate"
Propertychanged= "OnChange" >
<bindings>
<binding datacontext= "DataSource" datapath= "Data" property= "data"
</bindings>
<layoutTemplate>
<template layoutelement= "Mastertemplate"/>
</layoutTemplate>
<itemTemplate>
<template layoutelement= "Masteritemtemplate"
<label id= "Mastername"
<bindings>
<binding datapath= "Name" property= "text"/>
</bindings>
</label>
<bindings>
<binding datapath= "Description" property= "text"/">"
</bindings>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutelement= "Masternodatatemplate"/>
</emptyTemplate>
</listView>
</components>
</page>
</script>
</body>
Note that within the <script> element, there are declarative elements-they specify the Atlas client control and the data-binding layout. The data is specified by the server-side service, and the UI is provided by the client control that is bound to them. Note that you can use this declarative syntax to specify what happens when an application event occurs, just as you would use JavaScript code to achieve it. Please check the <dataSource> element in the callout above. It has a property serviceurl to the Web service that retrieves the data, and a autoload to indicate that the data should be retrieved immediately when the object is created. As a result, when the application loads, the data is immediately retrieved from the data source and displayed through the templates in the page.
5. Save and close the page.
Test page
1. Run the databinding.aspx page.
2. Make sure that after the page is loaded, a group of companies and their respective URLs are displayed.
v. Summary
In this article, you learned how to "Atlas" client controls to access server-side data services. The data binding syntax used here is very similar to the instruction syntax used to bind ASP.net server controls to data. Specifically, you learned how to bind a client ListView control to a DataSource control, and how to use a declarative layouttemplate element and other Atlas controls and standard HTML annotations to specify how data is generated on the page.
