How to: Insert Data with a Data Service Using AJAX

To insert data through the Data Service

1. Create a script element or JScript file that includes a client-script function that does the following:

   1. Creates an instance of the DataService class.

   2. Creates the JavaScript object that contains the data to insert.

   3. Calls the insert method, and passes as parameters the object with the data and the relative URI of the resource that will receive the data. If needed, pass references to callback functions for success and error conditions. You can also pass an optional parameter containing 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 DataService 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.DataService("/Northwind.svc");
     var newCustomer = {
       CustomerID: $get("TextCustomerId").value,
       CompanyName: $get("TextCompanyName").value,
       ContactName: $get("TextContactName").value
           };
       northwindService.insert(newCustomer, "/Customers", cbSuccess, cbFailure);
   }

2. If needed, 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 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 data service, add a ScriptManager control with a Scripts collection and a ScriptReference element that references MicrosoftAjaxDataService.js, as shown in the following example.

   <asp:ScriptManager ID="ScriptManager1" runat="server">
     <Scripts>
       <asp:ScriptReference Name="MicrosoftAjaxDataService.js" />
     </Scripts>
   </asp:ScriptManager>

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.

   <input id="ButtonInsert" type="button" value="Create" 
       onclick="doInsert()" /><br />
   <br />