How to: Insert Data with a Data Service Using AJAX

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

You can access an ADO.NET Data Service from an ASP.NET AJAX application by using the Sys.Data.AdoNetServiceProxy 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 ASP.NET AJAX-enabled Web page that enables the user to insert a new record in the Customers table of the Northwind database.

view:Sys.Data.DataService.Insert#Default.aspx

To run the example code in this topic, you will need the following:

  • The current release ASP.NET AJAX, which you can download from the CodePlex site.

  • The SQL Server Northwind sample database installed on your computer.

  • An ADO.NET Data Service that exposes the Northwind database. The data service must be configured to allow adding new records in the Customers table. For more information, see Data Service Quickstart.

Inserting Data through a Data Service

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

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 AdoNetServiceProxy class.

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

    3. 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 AdoNetServiceProxy 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.AdoNetServiceProxy("/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 data service, add a ScriptManager control with a Scripts collection and a ScriptReference element that references MicrosoftAjaxAdoNet.js, as shown in the following example.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Name="MicrosoftAjaxAdoNet.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.

    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 />

See Also

Other Resources

ASP.NET AJAX and ADO.NET Data Services

  • Last updated on