Practical ASP.NET

Updating Data with the dataContext and WCF Data Services

Peter moves on from simply retrieving data from the server using the dataContext and dataView to doing updates, deletes and inserts.

• By Peter Vogel
• 06/03/2010

I'm in the midst of a project where I'm using the new data tools in the AJAX library (the dataView and the dataContext) to create an ASP.NET page with full CRUD functionality and no server-side code. In a previous column I walked through the process of creating a WCF Data Service (Creating a WCF Data Service) that would return Entity Framework objects to my AJAX code. In the last column (Retrieving and Displaying a Single Object with dataView and WCF), I retrieved and displayed data for a single Customer.

But now comes the interesting part: Propagating the user's changes back to the server. This takes advantage of what Microsoft is calling "two way Live Binding". To simply display a the CompanyName property of the Customer object, I inserted "{{CompanyName}}" into my HTML. To implement two way binding I must insert an expression, enclosed in a single set of braces.

The simplest expression just adds the keyword "binding" with a space in front of the property name. Here's a text box displaying the CompanyName property

<input id="companyName" type="text" sys:value="{binding CompanyName}"/> 

You can add additional binding options to control formatting and handle conversion between data types, among other features.

Committing Updates
So what do you have to do to save your user's changes? Just drag an HTML button onto the page and set its onclick event to the name of a JavaScript function (you don't want to use an ASP.NET button because you don't want your page to postback):

<input type="button" id="Button1" onclick="return SaveData()"
 value="button" />

You then write the function where all you need to do is call the saveChanges method on your adoNetDataContext object (I discussed the adonetContext earlier in this series. Like this, in my case:

function SaveData() 
{
 dNwind.saveChanges();
}

And all of the changes that your user has made in your two way data bound elements are saved back to your WCF Data Service (the default behavior of the Data Service includes updates -- you don't need to write any code in the Service). I discussed my Data Service earlier in this series also.

Managing deletes is only slightly more complicated. I have to retrieve the entity that I want to delete from the dataView by its position (easy to do since I only have one item in the collection so it will be in position 0). I then pass it to the dataContext's removeEntity method and finish by calling the saveChanges method:

function DeleteCustomer() 
{
 var enty = vCust.get_data()[0];
 dNwind.removeEntity(enty);
 dNwind.saveChanges();
}

That takes care of delete though, if you try this at home with the Northwind database, your Customer won't delete because of referential integrity constraints. You'll need to remove the relationship between the Customers and Orders table or add a customer to delete.

Adding new Customers
Which leads to adding a new Customer. This is a four step process. First, you create a JavaScript object by calling the dataContext's createEntity method, passing the name of an object type known to your Data Service (I'm using "Customers"). The second step is to set values on the properties for that object, usually by retrieving those values from other elements on the form. I'll use jQuery to do those retrievals, a script tag to download a jQuery library. This tag will get the libraries from Microsoft's Content Delivery Network:

<script type="text/javascript" 
 src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"/>

In the third step, you use the dataContext's insertEntity to add the object to the list of items known to the dataContaxt, specifying what kind of Entity you're adding (again, this is Customers). Finally, you call the dataContext's saveChanges method to commit the object to the database. A typical function would look like this:

function InsertCustomer() 
{
  var enty = dNwind.createEntity("Customers");
  enty.CustomerID = $("#customerId").val();
  enty.CompanyName =  $("#companyName").val();
  dNwind.insertEntity(enty, "Customers");
  dNwind.saveChanges();
}

That's all very well, but what about displaying multiple rows? That's in the next column where I'll start working with orders for the selected customer.