In this tutorial, we will be looking at how we can replicate the built-in feature of the GridView control and use a Repeater to edit data inline and almost without delay. We will be using AJAX to call asynchronous postbacks, and allow editing of data a row at a time.

This tutorial was written with ASP.NET 3.5 using Visual Studio 2008. If you are using 2005 with ASP.NET 2.0, then you will need to download the AJAX Extensions from Microsoft.

The first thing we will do is to add the ScriptManager to our ASPX page, which will manage all of our AJAX calls:

Next, we can add an UpdatePanel to the page:

We will make use of the Header template to start a HTML table, and the Footer template to end it. The Content template will be used for the data we will be displaying. For this example, we will display data from an XML file. The XML will look something like this:

Here, we define three data records each with an ID, name, Age, and Country. We will use this XML file to display in the repeater. We can do this on page load like so (we will need to Import System.Data to use DataSet):

This code simply reads the XML from the external file and then assigns it to our Repeater to display. First though, we need to build out our repeater template. Let’s go ahead and create a HTML table to display:

In each of the table cells, we will place a Literal control and a TextBox control – making the TextBox control hidden by default. We will also assign the values of the datasource to each control:

Notice we have included LinkButtons with CommandNames. We will use these on the onItemCommand event of the Repeater. To create a handler for this event, either select the Repeater in Design view and double-click the onItemCommand event in the Properties window, or add the following code (You’ll also need to include the method name in the OnItemCommand attribute on the Repeater control):

Here, we are going to check the CommandName, as we have two. Then we will set the visibility of the Literal and TextBox controls:

Now if we run this web application, we will be able to click the Edit link for each item in the XML file and we will be provided with a textbox to edit the data. You can add a third update command to save the data back to the XML file.

The ASPX page will look something like this:

And then the entire code-behind will look something like this: