This tutorial will show you how to use AJAX and a repeater to create a GridView-like editing system, where you can edit each row right in the table, with Async postbacks. C#

The Repeater control is by far the most flexible data display control in the .NET Framework. It is also the most powerful and customizable. However, at the same time, it can be too complex for some users, as you are in more control over how data is displayed and how you can manipulate that data. The GridView control has built-in Edit, Delete, New controls, but the GridView control is not very flexible.

In this tutorial, you will learn how to use the Repeater control to implement in-line editing like the GridView offers, whilst maintaining the flexibility and power of using the Repeater control. We will also make use of the built-in AJAX capabilities of ASP.NET 3.5 and create a more user-friendly system with Asynchronous postbacks. This means we can edit data almost instantaneously.

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 to do is add the ScriptManager to our ASPX page, which will manage all of our AJAX calls:

We will use this UpdatePanel to wrap around our Repeater, so that the Repeater updates Asynchronously when needed. 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 are defining three sample data records each with an ID, Name, Age, and Country. We will use this data from the XML file to display on the page using the repeater. We can do this on Page_Load like so:

This code simply reads the XML from the external file and then assigns it to our Repeater to display. At the moment, however, our Repeater will not display anything, as we have not configured it to do so. We need to build out our item template before anything is displayed. Let’s go ahead and create a HTML table structure:

For each data item, we will create a Literal and a TextBox control; making the latter invisible initially. We set both values to those from the XML file:

To create the Edit feature, we can use LinkButtons with specified CommandNames, which we will use 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:

We also need to include the method name in the OnItemCommand attribute on the Repeater control, like so:

So all we are doing here is hiding and showing ASP.NET Controls. 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. We’ll leave it up to you to add a third update command to save the data back to the XML file.
The ASPX page will look something like this:

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

Download Source Files