Skip Navigation LinksHome > Categories > Code from a Category

In-place CRUD Operations with ASP.NET Repeater Control

User Name: tippu
Name: King SheZ
Contact Me:
Home Page:
7 years of enterprise application development, so far in my career i have worked on enterprise web applications with millions of users,i have also worked on many integrations between applications, i h... [More]
Viewed Times: 5747
Add Date: 09/05/2011
Recently someone had asked in the forums how to use an ASP.NET Repeater control for adding new items to the datasource it is bound to. Since words sometimes don't convey enough understanding I put together this sample to show how the Repeater control can be used in this situation along with in-place editing. This sample contains two versions; a server-side oriented approach, and a client-side oriented approach using AJAX.

Repeater vs. Gridview

When providing in-place editing and adding rows the first thing that comes to mind is usually to make use of an ASP.NET GridView control. This article is not about the differences bwtween the two controls nor whe/how to chose one over the other, but a quick look at the differences shows this

Table layout by default
Has select/edit/delete commands
Built-in pager support
Column sorting

No Default Table Lay out you have to use templates
No select/edit/delete commands must be added manually
No built-in pager support must be added manually
No Column sorting must be added manually

Although, not an exhaustive list it seems as though the GridView holds a distinct advantage by providing more built-in functionality. However, all of this functionality comes at a price. The GridView is a very "heavy" control and relies on extensive use of ViewState to work correctly and in some cases adds too much overhead to a page. That is when an ASP.NET Repeater control can have advantages.

Server-side Approach

In this first approach I'll rely on the tradional server-side coding using PostBacks and databinding events to provide the functionality. I'll wrap the Repeater control in and ASP.NET UpdatePanel to reduce the page refreshing, but otherwise there are only a few lines of client-side code involved.

As can be seen this is very minimal example, just enough to demonstrate the techniques, actual usage will, of course, vary. A table layout is used for simplicity but any type of layout can be produced using the templates and CSS. The two key events here are OnItemCommand and OnItemDataBound which will be covered in a moment.

Data Source

Since the control needs a datasource in order to bind to I've created a very simple entity

with a very simple Data Access Layer for this sample

Of course, in a production system this would be more complex and most likely use a Database as the datastore. However, for demonstration purposes this will be succifient.

Server-side Events

If no data is present for the control to bind to there needs to be a way to add items to the datasource. The markup shown above contains a FooterTemplate with a table row containing controls to allow the user to input data and a LinkButton to trigger the OnAddRecored event handler.

Nothing too complex here. The event is being triggered from the LinkButton, the sender object in this event handler. From that you get the RepeaterItem which is the Parent object of the LinkButton and find the TextBox controls. Then it is simply a matter of adding to the datasource and rebinding the Repeater control. It gets slightly more complex when handling in-place editing. The OnItemCommand event handles the command actions form the LinkButtons

The Delete action is very simple. Just remove the item from the datasource based on the index. For editing I set a ViewState backed property, EditIndex, to the index of the item wishing to be edited which will be used when the control is databound.

Although the TextBox controls could ahve beeb added in each row of the ItemTemplate and the visibility property used this creates too much overhead. Editing is only done on one item at a time so to have many TextBoxes rendered, even thought they are invisble and may never be used is too heavy an approach. Instead, the controls will be added dynamically to the row being edited using a PlaceHolder control.

The PlaceHolder control is necessary to dynamically add the TextBox controls because, although you can retrieve the Label control and find the Parent control, table cell in this case, you can't add the Textbox because ASP.NET generates the element as a LiteralControl which doesn't support adding child Controls. After adding the Textbox and assiging the current value from the datasource the Label controls is hidden by setting visibility=false then the HtmlHiddenInput fields are set with visiblity=true so they will be rendered and usable. The final step is to remove the edit button and reuse the delete button for saving the item once editing is complete. The reason for the HtmlHiddenInput is explained below.

Saving the edited item

Saving the in-place edit is where it gets a bit more complicated using server-side processing. When the Save button is clicked the first event to be fired is the ItemCommand. However, since the edit controls were added dynamically in the ItemDataBound event, and this event has not been fired yet, they are not available. Likewise, since the control has not been bound to any data yet the Label controls are being reconstituted from ViewState so they can't be used for temporary storage. In place of this the HtmlHiddenInput controls are used with JQuery based JavaScript to transfer the values from the edit controls to the hidden fields. This is the only client-side code in this example.

Client-side with AJAX

In the previous example the ASP.NET engine was handling a lot of the rendering and behind the scenes processing, with a client-side approach, however, it must be implemented by hand. The first thing to start with is hooking up the button events when the document is loaded. The live JQuery method is used for the edit and delete buttons so any new rows that are added will automatically have the events implements.

The next step is to implement the functionality to add new contacts.

Here the this variable, which represents the Add button that was clicked, is used to find the table row it belongs to. From this the input elements are found the text that was enetered by the user is extracted. The trick now comes in inserting a new row into the table. The NewRow will attempt to clone an existing row if any exists, otherwise the html must be created. An alternative would be to create the row in the markup but hide it from display then use it for cloning.

After the new row has been inserted and the text entered by the user has been updated the next step is to add the new contact to the datastore on the server. This is accomplished with an AJAX call to a WebMethod on the page.

There is nothing very complex here, just package the data and send it via AJAX to the method. If the method completes successfully, the id of the newly added contact is then assigned to the id attribute of the newly added row so it will be available during and edit or delete opertion.

Edit and Save

Edit functionality is handled similarly to the server-side approach; insert input controls inline and replace the edit and delete buttons.

Saving is once again similar; extract the values, update the labels, restore the buttons and update the datasource on the server.

The example was not meant to be an extensive exploration of the capabilities of the the ASP.NET Repeater control but hopfully it has successfully demonstrated how it could be used for CRUD operations against a datasource.

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.