Before delving into the topic, let us first take a glimpse
at the following sketch in Figure 4, which illustrates my comprehension concerning
the two ASP.NET AJAX client-side controls, ListView and
DataSource, and MS AJAX official suggestion in implementing
the client-side data binding architecture.
Figure 4: The typical client-side data binding
paradigm introduced in ASP.NET AJAX
From the above figure we can conclude that in real scenarios
(just as with this sample) when adding a new RSS channel we do not need to
persist the info into the server-side SQL Server database immediately but to
temporarily store it into the client-side DataSource control associated with
the client-side ListView control. Therefore, just as you may have guessed, the
DataSource control support batch update which enables the temporary store for
the client-side modification and submission to the server side in batch update
mode. Here the two methods "Save" and "Load" in the above
sketch play the important role in achieving the above logic.
Thus, in this part we only need to temporarily save the
newly-entered RSS channel info in the client side. Here I met my first obstacle
in dealing with the ListView control. Let us first see the related source code
as shown in Listing 2.
Listing 2
<script language="javascript" type="text/javascript">
var g_RSSNameList;
function pageLoad(sender, args) {
g_RSSNameList=$find('RSSNameList'); ……(omitted)
}
function Add_onclick() {
g_RSSNameList.addItem();
var index=datatable.get_length()-1;
datatable.getItem(index).setProperty('Rss_ID', index);
datatable.getItem(index).setProperty('Rss_Name',
$find('txtRssName').get_text());
datatable.getItem(index).setProperty('Rss_URL',
$find('txtRssUrl').get_text());
}When the user clicks the client-side HTML Input button "Add
the RSS Info," the above JavaScript function Add_onclick (the click event
handler) is invoked. Here, g_RSSNameList is a global JavaScript variable to
refer to the ListView control "RSSNameList" (which is used to hold and
display the RSS channel info). First, we call method addItem
of ListView, which is able to add an empty record at the end of the DataTable
control associated with the DataSource control and, at the same time, make the
data set dirty (this is rather important for the "Save" operation). Next,
we get the record number of the empty record we have just inserted. Then we
call method getItem (same as method getRow)
to fetch the empty record and invoke method setProperty
to populate the corresponding table field. One important thing to remember is
that we must use the client-side global method $find instead
of using $get; or else you are sure to meet some
trouble. Please refer to the online materials for the differences between the
two methods. At last we have succeeded in inserting (i.e. appending) a record
into the client-side data source.
Here, an episode should be mentioned. In composing the "buttonarea"
div element, we should try our best to use the "pure" client-side HTML
elements to achieve a better "AJAX" effect. Here I utilize the
client-side Validator component, the simplest requiredFieldValidator to prevent the user from leaving the
related text box controls empty. The following is the related xml-script code.
Listing 3
<textBox id="txtRssName">
<validators>
<requiredFieldValidator errorMessage="You must name the RSS!" />
</validators>
</textBox>
<validationErrorLabel id="validator1" associatedControl="txtRssName" />
<textBox id="txtRssUrl">
<validators>
<requiredFieldValidator errorMessage="Please name the RSS URL!" />
</validators>
</textBox>
<validationErrorLabel id="validator2" associatedControl="txtRssUrl" />
Here, in the second textbox validating, you can use the
better regular expression validator regExValidator to
attain a more applicable effect (because I am not quite sure of the most universal
regular expression for invalidating a URL, sorry for not having given the
proper answer). When you leave the textbox controls empty (such as just
entering some blank characters), there will appear a red star to prompt you to
enter something. In debugging the sample, when I leave the controls empty without
inputting any characters, there appears no response! Does it sound peculiar or
is there some bug with this Validator control?
Author's Notes: In this demo
application, I have not achieved the "delete" and "modify" functions.
If you are a brave man, then I highly suggest you to add these additional
functions. And if this indeed comes true, you will have mastered the ASP.NET
AJAX client-side programming.
Next, let us discuss how to display the RSS channels that we
have just persisted in the server-side SQL Server database.
