How to: Update Data with a Data Service Using AJAX

To update 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. If needed, calls the query method to retrieve the data to be updated.

   3. Creates the JavaScript object that contains the modified data.

   The following example shows a pageLoad function that creates an instance of the DataService class and calls the query method to retrieve all the records in the Categories table. The instance references a fictitious data service that has the relative URI /Northwind.svc. The call to the query method references querySuccess as the succeeded callback function and cbFailure as the failed callback function. The succeeded callback function creates an array that contains the returned data records and builds the user interface to display the results.

   <script language="javascript" type="text/javascript">
   // <!CDATA[
   // The data service.
   var northwindService;
   
   // For holding references to the Categories objects and their 
   // associated <li> elements.
   var categories;
   var categoryNodes;
   
   // On page load, populate the Categories list.
   function pageLoad() {
       northwindService = new Sys.Data.DataService("Northwind.svc");
       northwindService.query("Categories", querySuccess, cbFailure);
   }
   
   // Callback for a successful query; fill categories and 
   // categoryNodes arrays.
   function querySuccess(result, context, operation) {
     var resultList = $get("resultList");
     resultList.innerHTML = "";
     categories = new Array();
     categoryNodes = new Array();
     for (var i in result) {
       var thisCategory = result[i];
       var li = document.createElement("li");
       categories[thisCategory.CategoryID] = thisCategory;
       categoryNodes[thisCategory.CategoryID] = li;
       li.appendChild(document.createTextNode(thisCategory.CategoryName + ": " 
           + thisCategory.Description));
       li.innerHTML = li.innerHTML + ' <a href="javascript:doUpdate(' 
           + thisCategory.CategoryID + ')">[modify]</a>';
       resultList.appendChild(li);
     }
   }
   
   function cbFailure(result, context, operation) {
       alert(result);
   }
   // ]]>
   </script>

2. Add a function that calls the update method and passes the object with the data as a parameter.

   You can pass the relative URI of the resource that will receive the data. However, passing this value is not required if the object in the first parameter contains the identifier for the data record that you want to update. If needed, pass references to callback functions for success and error conditions. You can pass an optional parameter with context or state, which is passed to the succeeded or failed callback function when the request returns.

   The following example shows a function named doUpdate that performs these tasks. The category variable includes a JavaScript object that contains category data from the data service and changes the Description property to the value from the user's input. The call to the update method references updateSuccess as the succeeded callback function to update the data on the Web page, and cbFailure as the failed callback function. The updateSuccess method adds the updated content to the Web page.

   function doUpdate(i) {
       var category = categories[i];
       var newDesc = prompt("Change description for category '" 
           + category.CategoryName + "'.", category.Description);
       if (newDesc) {
           category.Description = newDesc;
           northwindService.update(category, null, updateSuccess, 
           cbFailure, category /* pass category back as context */);
       }
   } 
   
   // Callback for a successful update request. 
   // Change Categories and categoryNodes for this item.
   // Because update operations currently do not pass back
   // the modified object in the result parameter, 
   // the code uses the context parameter to store the object.
   function updateSuccess(result, context, operation) {
       var oldChild = categoryNodes[context.CategoryID];
       var newChild = document.createElement("li");
       var resultList = $get("resultList");
       newChild.appendChild(
           document.createTextNode(context.CategoryName 
           + ": " + context.Description));
       newChild.innerHTML = newChild.innerHTML + 
           ' <a href="javascript:doUpdate(' + context.CategoryID 
           + ')">[modify]</a>';
       resultList.replaceChild(newChild, oldChild);
       categoryNodes[context.CategoryID] = newChild;
   }

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

5. 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">
   </ul>