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#
Untitled Document
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:
|
<asp:ScriptManager ID="SM1" runat="server" />
|
Next up, let's go ahead and 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>
</ContentTemplate>
</asp:UpdatePanel>
|
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:
<?xml version="1.0" encoding="utf-8" ?>
<People>
<Person>
<ID>1</ID>
<Name>Francois Mettle</Name>
<Age>19</Age>
<Country>France</Country>
</Person>
<Person>
<ID>2</ID>
<Name>Kevin Bickerstaffe</Name>
<Age>47</Age>
<Country>South Africe</Country>
</Person>
<Person>
<ID>3</ID>
<Name>Laura Kinns</Name>
<Age>13</Age>
<Country>USA</Country>
</Person>
</People>
|
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
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:
protected void Page_Load(object sender, EventArgs e)
{
DataSet xmlData = new DataSet();
xmlData.ReadXml(MapPath("data.xml"));
Repeater1.DataSource = xmlData;
Repeater1.DataBind();
}
|
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:
<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>
</asp:Repeater>
|
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:
<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>
|
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.
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:
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
}
|
We also need to include the method name in the OnItemCommand attribute on the Repeater control, like so:
|
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
|
What the method will do is to check which Command is being called, then we will set the visibility of the Literal and TextBox controls accordingly:
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
RepeaterItem item = e.Item;
Literal lit_Name = (Literal)item.FindControl("lit_Name");
TextBox fld_Name = (TextBox)item.FindControl("fld_Name");
Literal lit_Age = (Literal)item.FindControl("lit_Age");
TextBox fld_Age = (TextBox)item.FindControl("fld_Age");
Literal lit_Country = (Literal)item.FindControl("lit_Country");
TextBox fld_Country = (TextBox)item.FindControl("fld_Country");
LinkButton lnk_Edit = (LinkButton)item.FindControl("lnk_Edit");
LinkButton lnk_Cancel = (LinkButton)item.FindControl("lnk_Cancel");
if (e.CommandName == "EditThis")
{
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;
}
else if (e.CommandName == "CancelEdit")
{
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;
}
}
|
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
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:
<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>
</form>
|
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
And the entire code-behind will look something like this:
using System;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataSet xmlData = new DataSet();
xmlData.ReadXml(MapPath("data.xml"));
Repeater1.DataSource = xmlData;
Repeater1.DataBind();
}
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
RepeaterItem item = e.Item;
Literal lit_Name = (Literal)item.FindControl("lit_Name");
TextBox fld_Name = (TextBox)item.FindControl("fld_Name");
Literal lit_Age = (Literal)item.FindControl("lit_Age");
TextBox fld_Age = (TextBox)item.FindControl("fld_Age");
Literal lit_Country = (Literal)item.FindControl("lit_Country");
TextBox fld_Country = (TextBox)item.FindControl("fld_Country");
LinkButton lnk_Edit = (LinkButton)item.FindControl("lnk_Edit");
LinkButton lnk_Cancel = (LinkButton)item.FindControl("lnk_Cancel");
if (e.CommandName == "EditThis")
{
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;
}
else if (e.CommandName == "CancelEdit")
{
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;
}
}
}
|