In this article I will explain with an example, how to use the EditItemTemplate for editing records in ASP.Net ListView control using C# and VB.Net.
HTML Markup
The following HTML Markup consists of an ASP.Net ListView control. The ListView control consists of an EditItemTemplate with an ASP.Net DropDownList.
The DropDownList will be populated when the Edit Button is clicked.
Accessing controls in the EditItemTemplate of ASP.Net ListView control
You will need to make use of the OnItemDataBound event of the ASP.Net ListView control, but we need to first find out which Item is being edited and then try to access the control as shown below.
C#
protected void OnItemDataBound[object sender, ListViewItemEventArgs e]
{
if [ListView1.EditIndex == [e.Item as ListViewDataItem].DataItemIndex]
{
DataTable dt = new DataTable[];
dt.Columns.Add[new DataColumn["Country"]];
dt.Rows.Add["USA"];
dt.Rows.Add["Australia"];
dt.Rows.Add["UK"];
dt.Rows.Add["Zambia"];
dt.Rows.Add["India"];
DropDownList ddlCountries = [e.Item.FindControl["ddlCountries"] as DropDownList];
ddlCountries.DataSource = dt;
ddlCountries.DataTextField = "Country";
ddlCountries.DataValueField = "Country";
ddlCountries.DataBind[];
ddlCountries.Items.Insert[0, new ListItem["Select Country", "0"]];
Label lblCountry = [e.Item.FindControl["lblCountry"] as Label];
ddlCountries.Items.FindByValue[lblCountry.Text].Selected = true;
}
}
VB.Net
Protected Sub OnItemDataBound[sender As Object, e As ListViewItemEventArgs]
If ListView1.EditIndex = DirectCast[e.Item, ListViewDataItem].DataItemIndex Then
Dim dt As New DataTable[]
dt.Columns.Add[New DataColumn["Country"]]
dt.Rows.Add["USA"]
dt.Rows.Add["Australia"]
dt.Rows.Add["UK"]
dt.Rows.Add["Zambia"]
dt.Rows.Add["India"]
Dim ddlCountries As DropDownList = TryCast[e.Item.FindControl["ddlCountries"], DropDownList]
ddlCountries.DataSource = dt
ddlCountries.DataTextField = "Country"
ddlCountries.DataValueField = "Country"
ddlCountries.DataBind[]
ddlCountries.Items.Insert[0, New ListItem["Select Country", "0"]]
Dim lblCountry As Label = TryCast[e.Item.FindControl["lblCountry"], Label]
ddlCountries.Items.FindByValue[lblCountry.Text].Selected = True
End If
End Sub
Populating the ListView control using Dynamic DataTable
Inside the Page Load event, first a dynamic DataTable is populated and then is it used to populate the ListView control.
The dynamic DataTable is also saved in ViewState using the Persons property.
C#
private DataTable Persons
{
get { return ViewState["Persons"] != null ? [DataTable]ViewState["Persons"] : null; }
set { ViewState["Persons"] = value; }
}
protected void Page_Load[object sender, EventArgs e]
{
if [!IsPostBack]
{
BindListView[];
}
}
private void BindListView[]
{
DataTable dt = Persons;
if [dt == null]
{
dt = new DataTable[];
dt.Columns.AddRange[new DataColumn[2] { new DataColumn["Name"], new DataColumn["Country"] }];
dt.Rows.Add["John", "USA"];
dt.Rows.Add["Rick", "Australia"];
dt.Rows.Add["Andrew", "UK"];
dt.Rows.Add["Peter", "Zambia"];
dt.Rows.Add["Mudassar", "India"];
Persons = dt;
}
ListView1.DataSource = dt;
ListView1.DataBind[];
}
VB.Net
Private Property Persons[] As DataTable
Get
Return If[ViewState["Persons"] IsNot Nothing, DirectCast[ViewState["Persons"], DataTable], Nothing]
End Get
Set[value As DataTable]
ViewState["Persons"] = value
End Set
End Property
Protected Sub Page_Load[sender As Object, e As EventArgs] Handles Me.Load
If Not IsPostBack Then
BindListView[]
End If
End Sub
Private Sub BindListView[]
Dim dt As DataTable = Persons
If dt Is Nothing Then
dt = New DataTable[]
dt.Columns.AddRange[New DataColumn[1] {New DataColumn["Name"], New DataColumn["Country"]}]
dt.Rows.Add["John", "USA"]
dt.Rows.Add["Rick", "Australia"]
dt.Rows.Add["Andrew", "UK"]
dt.Rows.Add["Peter", "Zambia"]
dt.Rows.Add["Mudassar", "India"]
Persons = dt
End If
ListView1.DataSource = dt
ListView1.DataBind[]
End Sub
Editing and Updating ListView records using Dynamic DataTable
Edit
When the Edit Button is clicked, the ListViews OnItemEditing event handler is triggered. Here simply the EditIndex of the ListView is updated with the Item Index of the ListView item to be edited.
C#
protected void OnItemEditing[object sender, ListViewEditEventArgs e]
{
ListView1.EditIndex = e.NewEditIndex;
BindListView[];
}
VB.Net
Protected Sub OnItemEditing[sender As Object, e As ListViewEditEventArgs]
ListView1.EditIndex = e.NewEditIndex
BindListView[]
End Sub
Update
When the Update Button is clicked, the ListViews OnItemUpdating event handler is triggered.
The Name value is fetched from the Label inside the ListView item while the Country value is fetched from the DropDownList.
Now the DataTable is fetched from the ViewState and a loop is executed over its row and once the fetched Name value matches the Name field, the Country value of that row is updated.
C#
protected void OnItemUpdating[object sender, ListViewUpdateEventArgs e]
{
string name = [ListView1.Items[e.ItemIndex].FindControl["lblName"] as Label].Text;
string country = [ListView1.Items[e.ItemIndex].FindControl["ddlCountries"] as DropDownList].SelectedItem.Value;
foreach [DataRow row in Persons.Rows]
{
if [row["Name"].ToString[] == name]
{
row["Country"] = country;
break;
}
}
ListView1.EditIndex = -1;
BindListView[];
}
VB.Net
Protected Sub OnItemUpdating[sender As Object, e As ListViewUpdateEventArgs]
Dim name As String = TryCast[ListView1.Items[e.ItemIndex].FindControl["lblName"], Label].Text
Dim country As String = TryCast[ListView1.Items[e.ItemIndex].FindControl["ddlCountries"], DropDownList].SelectedItem.Value
For Each row As DataRow In Persons.Rows
If row["Name"].ToString[] = name Then
row["Country"] = country
Exit For
End If
Next
ListView1.EditIndex = -1
BindListView[]
End Sub
Cancel Edit
When the Cancel Button is clicked, the ListViews OnItemCanceling event handler is triggered. Here the ListView EditIndex is set to -1 and the ListView is populated with data.
C#
protected void OnItemCanceling[object sender, ListViewCancelEventArgs e]
{
ListView1.EditIndex = -1;
BindListView[];
}
VB.Net
Protected Sub OnItemCanceling[sender As Object, e As ListViewCancelEventArgs]
ListView1.EditIndex = -1
BindListView[]
End Sub
Screenshot
Demo
View Demo
Downloads
ListViewEditItemTemplate.zip