Home / AJAX

OData: HOW TO Remove Data with an OData Service Using Ajax

Modified on 2010/03/10 01:39 by Shayne Burgess Categorized as Uncategorized
You can access an OData Service from an ASP.NET AJAX application by using the Sys.Data.OpenDataServiceProxy class. From client script, you can query and modify data that is exposed by an OData service on the same Web site as the current page.

The example in this procedure shows an ASP.NET AJAX-enabled Web page that enables the user to delete record in the OrderDetails 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 odata.org website.
  • 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.

Removing Data through an OData Service

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

To remove data through an OData Service

  1. reate a script element or JScript file that includes a client-script function that does the following:
    • Creates an instance of the the OpenDataServiceProxy class.
    • Retrieves the record to remove.
      The following example shows an event handler named pageLoad that performs these tasks. The the OpenDataServiceProxy instance references a data service that has the relative URI /Northwind.svc. The call to the query method retrieves the first 20 records in the OrderDetails table. The user will select one of these records to remove.
      // The data service.
      var northwindService;
      // The following variables hold references to the OrderDetail
      // objects and their associated <li> elements
      var details;
      var detailNodes;
      // On page load, populate the OrderDetail list.
      function pageLoad() {
      northwindService =
      new Sys.Data.OpenDataServiceProxy("Northwind.svc");
      querySuccess, cbFailure, userContext);
  2. If needed, add callback functions for succeeded and failed query operation. The callback functions take up to three parameters, one for the result or error, an optional context, and an optional operation name.
    The following example shows a succeeded and a failed callback function. The callback function named querySuccess displays the results of the query and creates a link that will call the doRemove function when the user selects it.
    // Callback for a successful query. The function fills the details
    // array and the detailNodes array.
    function querySuccess(result, context, operation, userContext) {
    var resultList = $get("resultList");
    resultList.innerHTML = "";
    details = new Array();
    detailNodes = new Array();
    for (var i in result) {
    var thisDetail = result[i];
    var li = document.createElement("li");
    details[i] = thisDetail;
    detailNodes[i] = li;
    li.appendChild(document.createTextNode("Order ID: " +
    thisDetail.OrderID + " ProductID: " +
    li.innerHTML = li.innerHTML +
    ' <a href="javascript:doRemove(' + i + ')">[remove]</a>';
    function cbFailure(error, context, operation) {
  3. Call the remove method, and pass the record to remove as a JavaScript object. If needed, pass references to callback functions for success and error conditions. You can also pass an optional parameter that contains a context or state object. This parameter is passed to the succeeded or failed callback function when the request returns.
    The following example shows the doRemove function, which passes the selected record as a JavaScript object in the remove method.
    function doRemove(i) {
    northwindService.remove(details[i], removeSuccess,
    cbFailure, i);
  4. If needed, add callback functions for succeeded and failed remove operation.
    The callback function for failed query operations that is shown in step 2 will also work for failed remove operations, because it only displays the error message. The following example shows a callback function for succeeded remove operations that changes the text to "removed".
    function removeSuccess(result, context, operation) {
    var oldChild = detailNodes[context];
    var newChild = document.createElement("li");
    var resultList = $get("resultList");
    resultList.replaceChild(newChild, oldChild);
  5. On the Web page that you are using to invoke the OData service, add a script reference to the start.debug.js script that will automatically link the necessary references, as shown in the following example.
     <script type="text/javascript" src="scripts/start.debug.js"></script> 
    The following Sys.require statement referencing the required object must be also included:
    Sys.components.openDataContext, Sys.components.openDataServiceProxy]);
  6. 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.
    <asp:ScriptReference Path="scripts/RemoveExample.js" />
  7. Add any required user interface elements to the Web page.
    The following example shows the unordered list that is referenced by the JavaScript code that you created in step 1.
    <ul id="resultList">