Anthem.NET : Topics : Calling Server-Side Methods : Returning datasets (source)

Description

Invoking methods on pages and controls has special support for returning DataSet, DataTable, and DataRow objects.

In this example, a DataSet is returned from a method on the page and the rows in its only table is added to a drop down list.

Example

Click Me!

Steps

1. Add a method to your page that returns data. Don't forget to make it public and add the Anthem.Method attribute to it:

   [Anthem.Method]
   public DataSet GetData()
   {
   	DataSet ds = new DataSet();
   	DataTable dt = new DataTable("MyTable");
   	ds.Tables.Add(dt);
   	dt.Columns.Add("id", typeof(int));
   	dt.Columns.Add("name", typeof(string));
   	dt.Rows.Add(new object[] { 1, "foo" });
   	dt.Rows.Add(new object[] { 2, "bar" });
   	dt.Rows.Add(new object[] { 3, "baz" });
   	return ds;
   }

2. Add a client-side select and button to your page:

   <select id="data">
   </select>
   <button id="button" onclick="GetData(); return false;">Click Me!</button>

3. The GetData function is a client-side, JavaScript function that invokes the method on the page. Add that function in a client-side script block:

   <script language="javascript" type="text/javascript">
       function GetData() {
           Anthem_InvokePageMethod(
               'GetData',
               [],
               function (result) {
                   var table = result.value.Tables['MyTable'];
                   var select = document.getElementById('data');
                   for (var i = 0; i < table.Rows.length; ++i) {
                       var row = table.Rows[i];
                       var option = document.createElement('option');
                       option.value = row['id'];
                       option.text = row['name'];
                       if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
                           select.add(option);
                       } else {
                           select.add(option, null);
                       }
                   }
               }
           );
       }
   </script>

4. The result's value property is a DataSet. Notice how it has a Tables property and how the tables in that keyed collection have a Rows property. The row objects are keyed by column name:

   <script language="javascript" type="text/javascript">
       function GetData() {
           Anthem_InvokePageMethod(
               'GetData',
               [],
               function (result) {
                   var table = result.value.Tables['MyTable'];
                   var select = document.getElementById('data');
                   for (var i = 0; i < table.Rows.length; ++i) {
                       var row = table.Rows[i];
                       var option = document.createElement('option');
                       option.value = row['id'];
                       option.text = row['name'];
                       if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
                           select.add(option);
                       } else {
                           select.add(option, null);
                       }
                   }
               }
           );
       }
   </script>

Remarks

The "API" for DataSet, DataTable, and DataRow on the client tries to emulate the API on the server. It's not perfect, but if you follow this example, you should be able to get most of what you need done.