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:
| <asp:ScriptManager ID="SM1" runat="server" /> |
Next, we can add an UpdatePanel to the page:
<asp:UpdatePanel ID="UP1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</asp:UpdatePanel> |
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
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:
<?xml version="1.0" encoding="utf-8" ?>
<People>
<Person>
<ID>1</ID>
<Name>Freddie Cosgrove</Name>
<Age>41</Age>
<Country>USA</Country>
</Person>
<Person>
<ID>2</ID>
<Name>Regina Filange</Name>
<Age>33</Age>
<Country>Sweden</Country>
</Person>
<Person>
<ID>3</ID>
<Name>Rod Hull</Name>
<Age>67</Age>
<Country>UK</Country>
</Person> |
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):
| Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim xmlData As New DataSet()
xmlData.ReadXml(MapPath("data.xml"))
Repeater1.DataSource = xmlData
Repeater1.DataBind()
End Sub |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
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:
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table><tr><th>Name</th><th>Age</th><th>Country</th><th>Edit</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate> |
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:
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="lit_Name" runat="server" Text='<%# Eval("Name") %>' />
<asp:TextBox ID="fld_Name" runat="server" Text='<%# Eval("Name") %>' Visible="false" />
</td>
<td>
<asp:Literal ID="lit_Age" runat="server" Text='<%# Eval("Age") %>' />
<asp:TextBox ID="fld_Age" runat="server" Text='<%# Eval("Age") %>' Columns="4" Visible="false" />
</td>
<td>
<asp:Literal ID="lit_Country" runat="server" Text='<%# Eval("Country") %>' />
<asp:TextBox ID="fld_Country" runat="server" Text='<%# Eval("Country") %>' Visible="false" />
</td>
<td>
<asp:LinkButton ID="lnk_Edit" runat="server" Text="Edit" CommandName="EditThis" />
<asp:LinkButton ID="lnk_Cancel" runat="server" Text="Cancel" CommandName="CancelEdit" Visible="false" />
</td>
</tr> |
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):
Protected Sub Repeater1_ItemCommand(ByVal source As Object, ByVal e As RepeaterCommandEventArgs)
End Sub |
Here, we are going to check the CommandName, as we have two. Then we will set the visibility of the Literal and TextBox controls:
Protected Sub Repeater1_ItemCommand(ByVal source As Object, ByVal e As RepeaterCommandEventArgs)
Dim item As RepeaterItem = e.Item
Dim lit_Name As Literal = CType(item.FindControl("lit_Name"), Literal)
Dim fld_Name As TextBox = CType(item.FindControl("fld_Name"), TextBox)
Dim lit_Age As Literal = CType(item.FindControl("lit_Age"), Literal)
Dim fld_Age As TextBox = CType(item.FindControl("fld_Age"), TextBox)
Dim lit_Country As Literal = CType(item.FindControl("lit_Country"), Literal)
Dim fld_Country As TextBox = CType(item.FindControl("fld_Country"), TextBox)
Dim lnk_Edit As LinkButton = CType(item.FindControl("lnk_Edit"), LinkButton)
Dim lnk_Cancel As LinkButton = CType(item.FindControl("lnk_Cancel"), LinkButton)
If e.CommandName = "EditThis" Then
lit_Name.Visible = False
fld_Name.Visible = True
lit_Age.Visible = False
fld_Age.Visible = True
lit_Country.Visible = False
fld_Country.Visible = True
lnk_Edit.Text = "Save"
lnk_Cancel.Visible = True
ElseIf e.CommandName = "CancelEdit" Then
lit_Name.Visible = True
fld_Name.Visible = False
lit_Age.Visible = True
fld_Age.Visible = False
lit_Country.Visible = True
fld_Country.Visible = False
lnk_Edit.Text = "Edit"
lnk_Cancel.Visible = False
End If |
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
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:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<HeaderTemplate>
<table><tr><th>Name</th><th>Age</th><th>Country</th><th>Edit</th></tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="lit_Name" runat="server" Text='<%# Eval("Name") %>' />
<asp:TextBox ID="fld_Name" runat="server" Text='<%# Eval("Name") %>' Visible="false" />
</td>
<td>
<asp:Literal ID="lit_Age" runat="server" Text='<%# Eval("Age") %>' />
<asp:TextBox ID="fld_Age" runat="server" Text='<%# Eval("Age") %>' Columns="4" Visible="false" />
</td>
<td>
<asp:Literal ID="lit_Country" runat="server" Text='<%# Eval("Country") %>' />
<asp:TextBox ID="fld_Country" runat="server" Text='<%# Eval("Country") %>' Visible="false" />
</td>
<td>
<asp:LinkButton ID="lnk_Edit" runat="server" Text="Edit" CommandName="EditThis" />
<asp:LinkButton ID="lnk_Cancel" runat="server" Text="Cancel" CommandName="CancelEdit" Visible="false" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel> |
And then the entire code-behind will look something like this:
Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim xmlData As New DataSet()
xmlData.ReadXml(MapPath("data.xml"))
Repeater1.DataSource = xmlData
Repeater1.DataBind()
End Sub
Protected Sub Repeater1_ItemCommand(ByVal source As Object, ByVal e As RepeaterCommandEventArgs)
Dim item As RepeaterItem = e.Item
Dim lit_Name As Literal = CType(item.FindControl("lit_Name"), Literal)
Dim fld_Name As TextBox = CType(item.FindControl("fld_Name"), TextBox)
Dim lit_Age As Literal = CType(item.FindControl("lit_Age"), Literal)
Dim fld_Age As TextBox = CType(item.FindControl("fld_Age"), TextBox)
Dim lit_Country As Literal = CType(item.FindControl("lit_Country"), Literal)
Dim fld_Country As TextBox = CType(item.FindControl("fld_Country"), TextBox)
Dim lnk_Edit As LinkButton = CType(item.FindControl("lnk_Edit"), LinkButton)
Dim lnk_Cancel As LinkButton = CType(item.FindControl("lnk_Cancel"), LinkButton)
If e.CommandName = "EditThis" Then
lit_Name.Visible = False
fld_Name.Visible = True
lit_Age.Visible = False
fld_Age.Visible = True
lit_Country.Visible = False
fld_Country.Visible = True
lnk_Edit.Text = "Save"
lnk_Cancel.Visible = True
ElseIf e.CommandName = "CancelEdit" Then
lit_Name.Visible = True
fld_Name.Visible = False
lit_Age.Visible = True
fld_Age.Visible = False
lit_Country.Visible = True
fld_Country.Visible = False
lnk_Edit.Text = "Edit"
lnk_Cancel.Visible = False
End If
End Sub |
