Building the User Interface for an ASP.NET AJAX Client-Centric Wiki Application - Managing the Article Categories
(Page 4 of 4 )
This part belongs to the background management. Therefore, we put all the related pages under an individual folder, named Manager. Because this part is programmed using the typical MS AJAX client-centric solution we will elaborate on it.
The UI and Client-side Coding
The following Figure 9 shows the client UI for the article category editing.
Figure 9-a typical UI design for the article category editing.
The topmost part of the page includes the MS AJAX server control ScriptManager which is a must have for any MS AJAX-based page. The long and narrow rectangle below this is the MS AJAX client-side advanced control named ListView, which is leveraged to exhibit all the article category records, which can nearly accomplish the functionality of the famous GridView server control supported by ASP.NET 2.0.
The large rectangle area at the lower part corresponds to the MS AJAX client-side advanced control named ItemView, which shows the detailed information of each article category record. You can also compare it with the DetailsView control supplied by ASP.NET 2.0. The six buttons below the ItemView control are responsible for handling the above two views.
Now let's look more closely into how the MS AJAX client-side control named ListView is bound to the client-side DataSource control, which is in turn bound to the server-side Web Service via the MS AJAX Web Service Bridge.
Let's start by looking at the crucial HTML code associated with the ListView control.
<div id="topListView">
</div>
<div style="visibility: hidden; display: none">
<div id="masterTemplate">
<table border="1" cellpadding="3">
<thead>
<tr>
<td><a href="#" id="sortId">CategoryID</a></td>
<td ><a href="#" id="sortName">CategoryName</a></td>
<td><a href="#" id="sortDescription">CategoryDes</a></td>
</tr>
</thead>
<tbody id="masterItemTemplateParent">
<tr id="masterItemTemplate">
<td><span id="txtCategoryId"></span></td>
<td style="width: 275px"><span id="txtCategoryName"> </span></td>
<td style="width: 462px"><span id="txtCategoryDes"> </span></td>
</tr>
</tbody>
</table>
</div>
<div id="NoDataTemplate"></div>
</div>
Here we define two important <div> elements. The first <div> element is topListView, which will be used to contain the rendered results. The second is masterTemplate, which defines the template for how the data will appear. In addition, the inner part <table> element is used to hold the concrete records. Both of these <div> elements will have MS AJAX client controls mapped to them.
Let's continue to look at the MS AJAX script code that maps to these elements and binds to the data source.
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-
script/2005">
<components>
<dataSource id="CateDataSource"
serviceURL="../MyDataService.asmx" />
<dataView id="view">
<bindings>
<binding dataContext="CateDataSource" dataPath="data"
property="data"/>
</bindings>
</dataView>
<listView id="topListView"
itemTemplateParentElementId="masterItemTemplateParent" >
<bindings>
<binding dataContext="view" dataPath="filteredData"
property="data"/>
</bindings>
<layoutTemplate>
<template layoutElement="masterTemplate"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="masterItemTemplate">
<label id="txtCategoryID">
<bindings>
<binding dataPath="CategoryID" property="text"/>
</bindings>
</label>
<label id="txtCategoryName">
<bindings>
<binding dataPath="CategoryName" property="text"/>
</bindings>
</label>
<label id="txtCategoryDes">
<bindings>
<binding dataPath="CategoryDes" property="text"/>
</bindings>
</label>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="NoDataTemplate" />
</emptyTemplate>
</listView>
<control id="sortId">
<behaviors>
<sortBehavior dataView="view" sortColumn="CategoryID"/>
</behaviors>
</control>
<control id="sortName">
<behaviors>
<sortBehavior dataView="view" sortColumn="CategoryName"/>
</behaviors>
</control>
<control id="sortDescription">
<behaviors>
<sortBehavior dataView="view" sortColumn="CategoryDes"/>
</behaviors>
</control>
....................................... (Omitted)
<application>
<load>
<invokeMethodAction target="CateDataSource" method="load" />
</load>
</application>
</components>
</page>
</script>
You can see at the bottom of the script that the action to invoke upon the application loading is the load method of the DataSource control CateDataSource. This will bind the data source to the above data service and call the load method, which returns all the available records.
Why do we define a DataView control here? To solve this riddle, please look at the following first:
<dataView id="view">
<bindings>
<binding dataContext="CateDataSource" dataPath="data"
property="data"/>
</bindings>
</dataView>
<listView id="topListView"
itemTemplateParentElementId="masterItemTemplateParent" >
<bindings>
<binding dataContext="view" dataPath="filteredData"
property="data"/>
</bindings>
......... (Omitted)
<control id="sortId">
<behaviors>
<sortBehavior dataView="view" sortColumn="CategoryID"/>
</behaviors>
</control>
<control id="sortName">
......... (Omitted)
The answer now becomes clear. Here we use the client-side DataView control together with the built-in behavior named SortBehavior to sort the content in the ListView control. After everything is Okay, click any column header, as you work with a common Windows desktop ListView control, and you will see the contents in the ListView control are sorted in ascending or descending order.
Next, if you remember the above HTML, there was this peculiar-looking tag:
<div id="topListView">
</div>
It seems pretty odd that there would be a <div> element on a page that contains nothing. Don't worry; all is explained when you look at the ListView control as defined in the script which wraps this underlying <div> element, as you can see here:
<listView id="topListView"
itemTemplateParentElementId="masterItemTemplateParent" >
The target element for the ListView control is specified as topListView, which means the underlying <div> element, which appears empty, will be treated by MS AJAX as a ListView control. This list will use an item template to define its contents. The item template is called masterItemTemplateParent. Additionally, the bindings for the ListView control are set up, and in this case, please note, the control is being bound to the DataView control rather than the DataSource control.
<bindings>
<binding dataContext="view" dataPath="filteredData"
property="data"/>
</bindings>
By setting the dataPath to filteredData, we are binding to the filteredData property that is being exposed by the DataView control. Note this property can return the dataset that has been filtered by DataView. It binds it to the data property of the ListView control.
When the data property is set on a control, as is the case with the ListView control here, template properties can then be bound to the local data property, and the columns on that property can be specified using the dataPath property. So the following item on the template will create a <label> element that is bound to the CategoryName column on the data property of the parent control, which in this case is bound to the CategoryName column on DataView:
<label id="txtCategoryName">
<bindings>
<binding dataPath="CategoryName" property="text"/>
</bindings>
</label>
As for the next ItemView control, I would not like dwell on much because the inner workings with it are nearly the same as those of the ListView control. Also, here, we don't waste space on the six buttons. You can study the source code, and if there is any question please contact me by making a comment on the article.
In the next article, we will say a few words about the background Web Service and database. Please check back next week for the third part of this four-part tutorial.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
