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.