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 2: Diving In

*QUIRK: When using Server.MapPath the path "/ajax" gets pre-pended to the file path.*

For these examples we are using local XML Files.

Project Setup:
   For this article I am using 2 projects.
   AJAXWebUI - WebApp
   Core - Core Business/Data Logic

WebApp Setup:
   Create a reference to AJAX.dll
   Add an HTTPHandler to the web.config



"POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, 
Ajax" />
</httpHandlers>

Create the two XML files in a sub folder named "ajax": ArtistData.xml and AlbumsData.xml. See attached code for sample data.

In the main web form add a table with a 4 controls:

  1. txtArtists = TextBox to type the ArtistName in.
  2. matches = A SelectBox with an onclick event which will be used to send the ArtistID to the AlbumSearch method we will be creating.
  3. txtArtistID = Hidden to hold the selected ArtistID
  4. htmlOutput = An empty DIV when we will be creating a table of Albums

 onclick="MatchSelected(this);" style="visibility: hidden" id="matches" /> type="hidden" id="txtArtistID" />
 id="htmlOutput" />

In the Page_Load we are going to add a reference to the AJAX Object and add a JavaScript event to the txtArtists box.

private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
this.txtArtists.Attributes.Add("onKeyUp", "GetArtist(this.value);");
}

We have a few more methods and reference to add but they won't make sense until we create some objects that we will be using.

Core Setup:
   Create a new class library and add a reference to System.Web.
   Create 2 classes.
MusicManager.cs - This will have the 2 search methods.

public ArrayList SearchArtist(string artistname)
public DataSet SearchAlbumsByArtist(string artisid)

SearchArtist - return an ArrayList of Artists objects.
SearchAlbumsByArtist - Return a DataSet of Albums.
You can look at the source files for furthure details.

Artists.cs - This is a very basic class but is Serialized

[Serializable]
public class Artists
{
public string artistName;
public string artistID;
}

And that's it. These 2 classes do not have to be in their own Project. I have only done this to show the sepration of the UI and the code.

Back to the Web App.

In the main page you'll need to reference the Core.MusicManager class.

private Core.MusicManager musicMgr = new Core.MusicManager();

Next are our two search methods:

As you can see both of these methods are very simple.

They take in a parameter, pass it to the MusicManager and get some data back.

[Ajax.AjaxMethod()]
public ArrayList GetArtist(string artistName)
{
ArrayList artistList = new ArrayList();
artistList = musicMgr.SearchArtist(artistName);
return artistList;
}
 
[Ajax.AjaxMethod()]
public DataSet GetAlbumByArtist(string searchCriteria)
{
DataSet dsAlbums = new DataSet();
dsAlbums = musicMgr.SearchAlbumsByArtist(searchCriteria);
return dsAlbums;
}

<< Previous

Next >>