Home / AJAX

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

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

The example in this procedure shows an Microsoft Ajax-enabled Web page that enables the user to insert a new record in the Customers table of the Northwind database.

To run the example code in this topic, you will need the following:
  • The current release Microsoft 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.

Inserting Data through an OData Service

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

To insert data through the OData service

  1. Create a script element or JScript file that includes a client-script function that does the following:
    • Creates an instance of the OpenDataServiceProxy class.
    • Creates the JavaScript object that contains the data to insert.
    • Calls the insert method and passes the following parameters: the object with the data, and the relative URI of the resource that will receive the data. You can also pass references to callback functions for success and error conditions. In addition, you can 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 a function named doInsert that performs these tasks. The OpenDataServiceProxy instance references a fictitious data service that has the relative URI /Northwind.svc. The newCustomer variable includes a JavaScript object that contains customer information that is derived from the values of text boxes on a Web page. The call to the insert method references cbSuccess as the succeeded callback function and cbFailure as the failed callback function.
       
      function doInsert() {
      var northwindService =
      new Sys.Data.OpenDataServiceProxy("/Northwind.svc");
      var newCustomer = {
      CustomerID: $get("TextCustomerId").value,
      CompanyName: $get("TextCompanyName").value,
      ContactName: $get("TextContactName").value
      };
      northwindService.insert(newCustomer, "/Customers", cbSuccess, cbFailure);
      }
  2. Optionally, add callback functions for succeeded and failed operations. 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 callback function and a failed callback function.
     
    function cbSuccess(result, context, operation) {
    $get("spanResults").innerHTML =
    "Operation '" + operation + "' succeeded.";
    }
    function cbFailure(error, context, operation) {
    $get("spanResults").innerHTML =
    "Operation '" + operation + "' failed.";
    }
  3. 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.require([Sys.components.dataView,
    Sys.components.openDataContext, Sys.components.openDataServiceProxy]);
  4. 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/InsertExample.js" />
  5. Add any required user interface elements to the Web page.
    The following example shows a Web page that includes text boxes that are referenced by the JavaScript code that you created in step 1.
     
    Use this form to insert a new customer into the Northwind database.<br />
    <table style="width:100%;">
    <tr>
    <td class="style1">
    Customer ID:</td>
    <td>
    <input id="TextCustomerId" type="text" />
    <span class="style2">(five characters, e.g. &#39;SAMPL&#39;)
    </span>
    </td>
    </tr>
    <tr>
    <td class="style1">
    Company Name:</td>
    <td>
    <input id="TextCompanyName" type="text" /></td>
    </tr>
    <tr>
    <td class="style1">
    Contact Name:</td>
    <td>
    <input id="TextContactName" type="text" /></td>
    </tr>
    </table>
    <br />
    <span id="spanResults"></span>
  6. Add code or an HTML element that calls the JavaScript function that performs the insert operation.
    The following example shows a Web page that includes a button for calling the doInsert function.
     
    <input id="ButtonInsert" type="button" value="Create"
    onclick="doInsert()" /><br />
    <br />