How to: Remove Data with a Data Service Using AJAX

To remove data through a 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. Retrieves the ID of the record to remove.

   3. Calls the remove method, and passes the relative URI of the resource that corresponds to the record to be removed. 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 doRemove that performs these tasks. The DataService instance references a data service that has the relative URI /Northwind.svc. The call to the remove method passes the relative URI of the record to be removed and references to the succeeded and failed callback functions.

   function doRemove() {
       var northwindService = new Sys.Data.DataService("/Northwind.svc");
       var customerId = $get("TextCustomerId").value;
       northwindService.remove(null, "/Customers('" + customerId + "')", 
           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.

   <asp:ScriptReference Path="scripts/RemoveExample.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.

   <p>Use this form to delete a Customer from the Northwind database.</p>
   
   Enter the Customer ID (five characters, for example &#39;SAMPL&#39;) below:<br />
   <br />
   <input id="TextCustomerId" type="text" /><br />
   <br />
   <span id="spanResults"></span>

6. Add code or an HTML element that calls the JavaScript function that performs the delete operation.

   <input id="ButtonDelete" type="button" 
       value="Delete entry" 
       onclick="doRemove()" />
   <br />