How to: Execute a Sequence of Actions Through a Data Service Using AJAX

To execute a sequence of actions

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

   1. Creates an instance of the DataService class.

   2. Calls the createActionSequence method to create an instance of the ActionSequence JavaScript object.

   3. Calls the addInsertAction method, addUpdateAction method, or addRemoveAction method as many times as needed in order to create a sequence of data operations. In each call, you pass as parameters the object with the data, and the relative URI of the resource that will receive the data. You can also pass a parameter with context or state, which is passed to the callback function when the request returns.

   4. Calls the executeActions method to execute all the data operations that have been added to the sequence. If needed, you can pass a callback function that is called when the data operations have been executed.

   The following example shows a function named pageLoad that creates an instance of the DataService class. The instance references a fictitious data service that has the relative URI /Northwind.svc. The function named ExecuteOperations calls the createActionSequence method to create an instance of the ActionSequence script class. The function includes code that adds ten insert operations to the sequence. Finally, it calls the executeActions method and passes cbComplete as the callback function.

   var northwindService;
   
   function pageLoad() {
       northwindService = new Sys.Data.DataService("/Northwind.svc");
   }
   
   function ExecuteOperations() {
       var actSequence = northwindService.createActionSequence();
       // Create 10 customer objects and insert them.
       for (var i = 0; i < 10; i++) {
           var customer = {
               CustomerID: "TEST" + i,
               CompanyName: "Sample Company " + i
           };
           actSequence.addInsertAction(customer, "/Customers");
       }
       actSequence.executeActions(cbComplete, "insert 10 Customers" /* user-provided context */);
   }

2. If needed, add a callback function for the completed sequence of operations.

   Each callback function takes up to three parameters:

   • An array of ActionResult objects that represent the results of each operation.

   • A Boolean value that indicates whether an error has occurred during any part of the operations.

   • A state object for the batch of operations.

   The following example shows a succeeded callback function.

   function cbComplete(result, hasError, context) {
       alert("Operation '" + context + "' " + ((!hasError) ? "succeeded." : "experienced at least one failure."));
   }

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/SequenceExample.js" />

5. Add code or an HTML element that calls the JavaScript function that performs the insert operation.

   <input id="btnInsert" 
          type="button" 
          value="Add 10 New Customers" 
          onclick="return ExecuteOperations()" 
   />