Home / AJAX

HOW TO Query an OData Service Using Ajax

RSS
Modified on 2010/03/02 00:54 by Shayne Burgess Categorized as Uncategorized
You can access an OData feed 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 an OData feed 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.

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 OData feed that exposes the Northwind database. The easiest way to create this is to use WCF Data Services to create a service over the Northwind database. The service must be configured to allow reading from the Customers feed. For more information, see Data Service Quickstart.

Querying an OData Service

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

To query the data service

  1. Create a script element or JScript file that includes a client-script function that does the following:
    • Creates an instance of the AdoNetServiceProxy class.
    • 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);
      }
  2. 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 + ".";
    }
  3. 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. Information about the data service is contained by the following property:
    __metadata

     
    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();
    }
  4. On the Web page that you are using to invoke the OData 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>
  5. 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" />
  6. 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>