Explicitly binding data to ListView web control

This article talks about binding data without SqlDataSource and Eval / Bind methods.

Introduction

As we all know usage of Eval and Bind methods can be expensive. Controls that are using this method with Data-Binding Expression are GridView, DetailsView, FormView, Repeater and ListView. These are actually Data-Bound controls which can be bind to a Data Source controls such as an ObjectDataSource or SqlDataSource. There are ways to lower cost of usage of Eval method. Here is example how to do this.

If you are using these controls (Data-Bound web controls) for enterprise web applications with several thousands of clicks per minute, Eval method isn’t really the best solution. And of course, everything is hard coded in html. In this example we are NOT going to use Eval or Bind methods, we are NOT going to use Data Source controls. We are going to do everything from the server side.

Why ListView?

This control has one very important event that we are going to heavily manipulate - ItemDataBound. Also it has templates e.g. ItemTemplate and EditItemTemplate. Our example is going to bind the data from DataSet, edit this data and update it.

Code explanation

We are going to have Label controls in ItemTemplate and TextBox controls in EditItemTemplate. In “edit mode” every Label is going to be switched with TextBox.

protected void Page_Load(object sender, EventArgs e)
{
   if (ProductsListView.EditItem == null) 
   { ProductsListView.DataSource = LoadDataSet();
      ProductsListView.DataBind();
   }
}

As you can see we are checking if this is “view mode” or “edit mode” to bind the right data to ListView control. This will be more clear as we get to the other event handlers. After we call DataBind method ItemDataBound event is fired.

protected void ProductsListView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
  ListViewDataItem dataItem = (ListViewDataItem)e.Item;
  DataRowView drv = (DataRowView)dataItem.DataItem; 
  if (ProductsListView.EditItem == null)
  {
       Label companyName = (Label)e.Item.FindControl("CompanyName");  
       companyName.Text = drv["CompanyName"].ToString();
       Label city = (Label)e.Item.FindControl("City");
       city.Text = drv["City"].ToString();
       Label customerID = (Label)e.Item.FindControl("CustomerID");
       customerID.Text = drv["CustomerID"].ToString();
}

... Here we are again checking which template is being rendered, because if we are in “view mode” and we are looking for TextBox controls we will get an error. Now all data from DataSet is bound to Label controls in ItemTemplate and page is rendered. item.JPG Edit button’s CommandName attribute is set to “Edit”. This is going to fire new event - ItemEditing.

protected void ProductsListView_ItemEditing(object sender, ListViewEditEventArgs e)
{
  ProductsListView.EditIndex = e.NewEditIndex;
  ProductsListView.DataBind();
}

Now we are setting EditIndex property to the index of the item that is being edited. Again calling DataBind method which fires ItemDataBound event. ...

else if (ProductsListView.EditItem != null)
{
  if (dataItem.DisplayIndex == ProductsListView.EditIndex)
  {
      TextBox nameTextBox = (TextBox)e.Item.FindControl("CompanyTextBox");    
      nameTextBox.Text = drv["CompanyName"].ToString();
      TextBox cityTextBox = (TextBox)e.Item.FindControl("CityTextBox");
      cityTextBox.Text = drv["City"].ToString();
      TextBox customerID = (TextBox)e.Item.FindControl("CustomerIDTextBox");
      customerID.Text = drv["CustomerID"].ToString();
}
}
}

This code is second part of “if statements” in ItemDataBound event handler. Here we are not looking for Label controls in ItemTemplate, but TextBox controls in EditItemTemplate (EditItem != null). Also we want to bind right row of data (DisplayedIndex == EditIndex).

edititem.JPG

Now EditItemTemplate is rendered with data binded to TextBox controls. From here we can change data in TextBox controls and try to update changes. Update button has CommandName attribute set to “Update”. This is going to fire new event - ItemUpdating.

protected void ProductsListView_ItemUpdating(object sender, ListViewUpdateEventArgs e)
{

   TextBox nameTextBox=(TextBox)ProductsListView.EditItem.FindControl("CompanyTextBox");
   TextBox cityTextBox=(TextBox)ProductsListView.EditItem.FindControl("CityTextBox");
   TextBox customerID=(TextBox)ProductsListView.EditItem.FindControl("CustomerIDTextBox");
   Update(nameTextBox.Text, cityTextBox.Text, customerID.Text);
   ProductsListView.EditIndex = -1;
   ProductsListView.DataSource = LoadDataSet();
   ProductsListView.DataBind();
}

Now that we are in “edit mode” we are looking for TextBox controls from EditItem property. Using values from TextBox controls we are updating data to database and closing EditItemTemplate. Because all buttons are causing postback we had on the beginning in Page_Load check to bind data only if we are not in “edit mode”. Now that we are, we are binding new updated DataSet in this event handler. Clicking on Cancel button ItemCanceling event is fired.

protected void ProductsListView_ItemCanceling(object sender, ListViewCancelEventArgs e)
{
   ProductsListView.EditIndex = -1;
   ProductsListView.DataSource = LoadDataSet();
   ProductsListView.DataBind();
}

Same story we had for ItemUpdating, although data is not updated, we need to bind data from this event handler because we are in “edit mode”.