Creating an Album List with Ajax and C#

Written By: Jay

- 20 Jun 2006 -

Description: Over the past few months I have been toying with Ajax and .NET via the AJAX.NET Pro Library. I recently had a specific task to complete and it seemed to be a perfect candidate for Ajax. The task was very simple, get a list of Albums by an Artist. This functionality is of course part of a much larger on-line music app I was constructing but I needed to start with something small. The UI was very simple a TextBox to enter an Artists' Name and a Table to display the Albums.

  1. Objects and Data
  2. Diving In
  3. Ajax and the UI
  4. The Next Level
  5. Conclusion and Pitfalls

Part 4: The Next level

The last part of this is to wire-up the function that gets the Albums based on the item selected from our virtial results Select Box.As you can see on the last line we are referencing the GetAlbumByArtist() JavaScript function which we will create in a moment.

Javascript:

function MatchSelected(matches) {
var artist = document.getElementById("txtArtists");
var artistID = document.getElementById("txtArtistID");
artist.value = matches.options[matches.selectedIndex].text;
artistID.value = matches.options[matches.selectedIndex].value;
 
GetAlbumByArtist(artistID.value);
}

This is similar to the GetArtist function:

Javascript:

function GetAlbumByArtist(searchCriteria){
if (searchCriteria)
{
WebForm1.GetAlbumByArtist(searchCriteria, GetAlbumByArtist_CallBack);
}
}

In the call back function instead of placing our results in a Select Box we will be creating an HTML Table and placing the table in a DIV.

First I'd like to point out this line of code: "var dt = res.value.getTable('Album');" This is where we will be getting our DataSet from the GetAlbumByArtist() in the code behind. This function binds our Albums data to an HTML Table.

I would like to point out that I am not a JavaScript hacker. Everything I know about JavaScript I learned from reading other peoples code. So if you know a better way please use it.

Javascript:

//callback we told Ajax.Net to pass the response to
function GetAlbumByArtist_CallBack(res){
 
var dt = res.value.getTable('Album');
var htmlOutput = document.getElementById("htmlOutput");
if(dt != null)
{
var html = [];
 
for(var i=0; i
 
{
html[html.length] = '' + dt.Rows[i].albumID + '' + dt.Rows[i].albumName 
+ '';
}
 
document.getElementById("htmlOutput").innerHTML = '




#
Album




';
}
}

This is another method I used to bind the data to an HTML Unordered List:

Javascript:

//callback we told Ajax.Net to pass the response to
function GetAlbumByArtist_CallBack(res){
var dt = res.value.getTable('Album');
var htmlOutput = document.getElementById("htmlOutput");
if(dt != null)
{
var html = [];
 
for(var i=0; i
 
{
html[html.length] = '

  • ' + dt.Rows[i].albumID + ' - ' + dt.Rows[i].albumName + '
    • 
'    ;
}
 
document.getElementById("htmlOutput").innerHTML = '

      ' +html.join('')+'
    
'    ;
}
}

    Now when select an artist form the search results the ArtistID will be place in the hidden textbox. The value in the hidden textbox will then be used to search for Albums by that artist. The results will then be displayed in the Table.

    << Previous

    Next >>