Explicitly binding data to the ListView web control

• Download example - 2.33 KB

Introduction

As we all know, the usage of the Eval and Bind methods can be expensive. Controls that use this method with Data-Binding Expressions are GridView, DetailsView, FormView, Repeater, and ListView. These are actually Data-Bound controls which can be bound to Data Source controls such as an ObjectDataSource or SqlDataSource.

There are ways to lower the cost of usage of the Eval method. Here is an example of 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, the 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 the Eval or Bind methods, nor are we are going to use Data Source controls. We are going to do everything from the server side. For this example to work properly, you need to download the .NET Framework 3.5 Service Pack 1 Beta.

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 a DataSet, edit this data, and update it.

Using the code

We are going to have Label controls in the ItemTemplate and TextBox controls in the EditItemTemplate. In the “edit mode”, every Label is going to be switched with a 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 the ListView control. This will be more clear as we get to the other event handlers. After we call the DataBind method, the 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 the DataSet is bound to Label controls in the ItemTemplate and the page is rendered.

The Edit button’s CommandName attribute is set to “Edit”. This is going to fire a new event - ItemEditing.

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

Now, we are setting the EditIndex property to the index of the item that is being edited. Again, calling the DataBind method which fires the 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 the second part of “if statements” in the 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 the right row of data (DisplayedIndex == EditIndex).

Now, EditItemTemplate is rendered with data bound to the TextBox controls. From here, we can change the data in TextBox controls and try to update the changes. The Update button has the CommandName attribute set to “Update”. This is going to fire a 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 the “edit mode”, we are looking for TextBox controls from the EditItem property.

Using values from TextBox controls, we update data to the database and close EditItemTemplate. Because all buttons cause a postback, we had on the beginning in the Page_Load, a check to bind data only if we are not in “edit mode”. Now that we are, we are binding a new updated DataSet in this event handler.

Clicking on the Cancel button with fire the ItemCanceling event.

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

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