How to: Query a Data Service Using AJAX

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

You can access an ADO.NET Data Service from an ASP.NET AJAX application by using the Sys.Data.AdoNetServiceProxy class. From client script, you can query and modify data that is exposed by a data service that is hosted in the same Web site as the current Web page.

The example in this procedure shows an ASP.NET AJAX-enabled Web page that retrieves data from the Customers table of the SQL Server Northwind sample database.

view:Sys.Data.DataService.Query#Default.aspx

To run the example code in this topic, you will need the following:

The current release of ASP.NET AJAX, which you can download from the CodePlex site.
The SQL Server Northwind sample database installed on your computer.
An ADO.NET Data Service that exposes the Northwind database. The data service must be configured to allow reading from the Customers table. For more information, see Data Service Quickstart.

Querying a Data Service

You can create a page that uses client script to retrieve data through a data service.

To query the data service

Create a script element or JScript file that includes a client-script function that does the following:
1. Creates an instance of the AdoNetServiceProxy class.
2. Calls the class's query method and passes the following parameters: the relative URI of the resource that contains the data, and references to callback functions to be used in the case of success or failure. You can also pass a fourth optional parameter that contains a context or state object. This context parameter is passed to the succeeded or failed callback function when the request returns.
The following example shows a function named doQuery that performs these tasks. The AdoNetServiceProxy instance references a fictitious data service that has the relative URI /Northwind.svc. The call to the query method references cbSuccess as the succeeded callback function and cbFailure as the failed callback function.
```
function doQuery() {
  var northwindService = new 
    Sys.Data.AdoNetServiceProxy("/Northwind.svc");
  northwindService.query("/Customers", cbSuccess, cbFailure);
}
```
Add a callback function for failed operations. The callback function takes up to three parameters, one for the error, an optional context, and an optional operation name.

The following example shows a failed callback function.
```
function cbFailure(error, context, operation) {
  $get("spanResults").innerHTML = 
    "Error occurred while performing operation " + operation + ".";
}
```

Add a callback function for succeeded operations. The callback function takes up to three parameters, one for the result, an optional context, and an optional operation name. The function creates HTML for displaying the data that was returned by the query.

The following example shows a succeeded callback function. The function retrieves the query data from the result parameter. It includes logic so that it does not display the contents of the __metadata property, because that property does not contain data from the Customers table. The __metadata property contains information about the data service.

function cbSuccess(result, context, operation) {
  // Get Customers list and render by using an HTML table.
  var sb = new Sys.StringBuilder();
  sb.append("<table>");

  var firstRowOutput = false;
  for (idx in result) {
    var customer = result[idx];
    if (!firstRowOutput) {
      // Display the header row.
      sb.append("<tr>");
      for (key in customer) {
        if (key != "__metadata") {
          sb.append("<th>");
          sb.append(key);
          sb.append("</th>");
        }
    }
    sb.append("</tr>");
    firstRowOutput = true;
  }

  // Display the data.
  sb.append("<tr>");
  for (key in customer) {
    if (key != "__metadata") {
      sb.append("<td>");
      sb.append(customer[key]);
      sb.append("</td>");
      }
    }
  sb.append("</tr>");
  }

  sb.append("</table>");      
  $get("spanResults").innerHTML = sb.toString();
}

On the Web page that you are using to invoke the data service, add an ASP.NET ScriptManager control with a Scripts collection and a ScriptReference element that references MicrosoftAjaxAdoNet.js, as shown in the following example.
```
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Name="MicrosoftAjaxAdoNet.js" />
  </Scripts>
</asp:ScriptManager>
```
If you created the JavaScript function in step 1 as a JScript file, add a reference to that file in the ScriptManager control. To register a static script file, set the Path property of the ScriptReference object to the relative location of the file, as shown in the following example:
```
<asp:ScriptReference Path="scripts/QueryExample.js" />
```
Add any required user interface elements to the Web page and then add code or an HTML element that calls the JavaScript function that performs the query operation.

The following example shows a Web page that includes a button for calling the doQuery function.
```
<p>Click the button below to get a list of all the customers 
  from the Northwind database.</p>

<input id="ButtonQuery" type="button" 
    value="Perform Query" 
    onclick="doQuery()" /><br />
<br />
<span id="spanResults"></span>
</div>
```

How to: Query a Data Service Using AJAX

Querying a Data Service

To query the data service

See Also

Other Resources

Additional resources