Asp.net

Asp.net ListView - Data Editing

Kazi Manzur Rashid — Thu, 13 Sep 2007 20:17:12 GMT

In my previous post, I have shown the data binding capabilities of ListView control. In this post, I will show the Data Editing power of ListView. Like the previous DataGrid, DataList and GridView controls the ListView control has the EditItemTemplate and it also comes up with the long awaited InsertItemTemplate, in the past there was a lot of attempt to allow the users to insert data through Header or Footer Template which is no longer required. In this post I will show you the full data editing capabilities of ListView which includes Insert, Edit and Delete with both LinqDataSource and code. We will follow the previous post example for the data editing.

The first thing you have to do to add the data editing capabilities is defining the Edit item and Insert item templates. Instead of row kind of style editing like the DataGrid and GridView we will follow the form style editing, this is the another powerful features of ListView that you have the full control on how the html is generated. The following shows the screen-shots of both EditItemTemplate and InsertItemTemplate view:

The following shows the EditItem and InsertItem Template:

<EditItemTemplate>
    <tr>
        <td colspan="9">
            <table>
                <tbody>
                    <tr>
                        <th>
                            Company:
                        </th>
                        <td>
                            <asp:TextBox ID="CompanyNameTextBox" runat="server" Text='<% #Bind("CompanyName")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CompanyValidator" runat="server" ControlToValidate="CompanyNameTextBox" ErrorMessage="<div>Company cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Contact:
                        </th>
                        <td>
                            <asp:TextBox ID="ContactNameTextBox" runat="server" Text='<% #Bind("ContactName")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="ContactValidator" runat="server" ControlToValidate="ContactNameTextBox" ErrorMessage="<div>Contact cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Title:
                        </th>
                        <td>
                            <asp:TextBox ID="ContactTitleTextBox" runat="server" Text='<% #Bind("ContactTitle")%>'></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Address:
                        </th>
                        <td>
                            <asp:TextBox ID="AddressTextBox" runat="server" TextMode="MultiLine" Columns="20" Rows="4" Text='<% #Bind("Address")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="AddressValidator" runat="server" ControlToValidate="AddressTextBox" ErrorMessage="<div>Address cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            City:
                        </th>
                        <td>
                            <asp:TextBox ID="CityTextBox" runat="server" Text='<% #Bind("City")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CityValidator" runat="server" ControlToValidate="CityTextBox" ErrorMessage="<div>City cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Postal Code:
                        </th>
                        <td>
                            <asp:TextBox ID="PostalCodeTextBox" runat="server" Text='<% #Bind("PostalCode")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="PostalCodeValidator" runat="server" ControlToValidate="PostalCodeTextBox" ErrorMessage="<div>Postal code cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Country:
                        </th>
                        <td>
                            <asp:TextBox ID="CountryTextBox" runat="server" Text='<% #Bind("Country")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CountryValidator" runat="server" ControlToValidate="CountryTextBox" ErrorMessage="<div>Country cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Phone:
                        </th>
                        <td>
                            <asp:TextBox ID="PhoneTextBox" runat="server" Text='<% #Bind("Phone")%>' ValidationGroup="edit"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="PhoneValidator" runat="server" ControlToValidate="PhoneTextBox" ErrorMessage="<div>Phone cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="edit"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <asp:LinkButton ID="UpdateButton" CommandName="Save" runat="server" Text="Update" ValidationGroup="edit"></asp:LinkButton>
                            <asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server" Text="Cancel" CausesValidation="false"></asp:LinkButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</EditItemTemplate>
<InsertItemTemplate>
    <tr>
        <td colspan="9">
            <table>
                <tbody>
                    <tr>
                        <th>
                            ID:
                        </th>
                        <td>
                            <asp:TextBox ID="CustomerIDTextBox" runat="server" Text='<% #Bind("CustomerID")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="IDValidator" runat="server" ControlToValidate="CustomerIDTextBox" ErrorMessage="<div>ID cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Company:
                        </th>
                        <td>
                            <asp:TextBox ID="CompanyNameTextBox" runat="server" Text='<% #Bind("CompanyName")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CompanyValidator" runat="server" ControlToValidate="CompanyNameTextBox" ErrorMessage="<div>Company cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Contact:
                        </th>
                        <td>
                            <asp:TextBox ID="ContactNameTextBox" runat="server" Text='<% #Bind("ContactName")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="ContactValidator" runat="server" ControlToValidate="ContactNameTextBox" ErrorMessage="<div>Contact cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Title:
                        </th>
                        <td>
                            <asp:TextBox ID="ContactTitleTextBox" runat="server" Text='<% #Bind("ContactTitle")%>'></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Address:
                        </th>
                        <td>
                            <asp:TextBox ID="AddressTextBox" runat="server" Text='<% #Bind("Address")%>' TextMode="MultiLine" Columns="20" Rows="4" ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="AddressValidator" runat="server" ControlToValidate="AddressTextBox" ErrorMessage="<div>Address cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            City:
                        </th>
                        <td>
                            <asp:TextBox ID="CityTextBox" runat="server" Text='<% #Bind("City")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CityValidator" runat="server" ControlToValidate="CityTextBox" ErrorMessage="<div>City cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Postal Code:
                        </th>
                        <td>
                            <asp:TextBox ID="PostalCodeTextBox" runat="server" Text='<% #Bind("PostalCode")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="PostalCodeValidator" runat="server" ControlToValidate="PostalCodeTextBox" ErrorMessage="<div>Postal code cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Country:
                        </th>
                        <td>
                            <asp:TextBox ID="CountryTextBox" runat="server" Text='<% #Bind("Country")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="CountryValidator" runat="server" ControlToValidate="CountryTextBox" ErrorMessage="<div>Country cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Phone:
                        </th>
                        <td>
                            <asp:TextBox ID="PhoneTextBox" runat="server" Text='<% #Bind("Phone")%>' ValidationGroup="add"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="PhoneValidator" runat="server" ControlToValidate="PhoneTextBox" ErrorMessage="<div>Phone cannot be blank.</div>" SetFocusOnError="true" Display="Dynamic" ValidationGroup="add"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td>
                            <asp:LinkButton ID="InsertButton" CommandName="Insert" runat="server" Text="Save" ValidationGroup="add"></asp:LinkButton>
                            <asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server" Text="Cancel" CausesValidation="false"></asp:LinkButton>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</InsertItemTemplate>

To edit existing record, you have to put a Button in the ItemTemplate/AlternatingItemTemplate which commandName is set to Edit, you can also use ImageButton/LinkButton instead of regular button as in this example I am using LinkButton. The same holds true for deleting record, in this case the commandName has to be Delete. Next, in the EditItemTemplate you have to add buttons which commandName sets to Update and Cancel.

To add record, you must have to set the InsertItemTemplate position, the supported values are FirstItem, LastItem and None. Since we are using form view for adding record it does not look appealing showing it all the time, instead we will put a button in the LayoutTemplate, upon click the form view will appear at the end. Next, in the InsertItemTemplate two new buttons are required which commandName sets to Insert and Cancel. At last, as we are showing this template on the new button click, we need to put few lines of code to show/hide the template as well as the new button. The following shows the code:

private void CloseInsert()
{
    lvwCustomers.InsertItemPosition = InsertItemPosition.None;
    ((LinkButton) lvwCustomers.FindControl("NewButton")).Visible = true;
}

protected void NewButton_Click(object sender, EventArgs e)
{
    lvwCustomers.EditIndex = -1;
    lvwCustomers.InsertItemPosition = InsertItemPosition.LastItem;
    ((LinkButton) sender).Visible = false;
}

protected void lvwCustomers_ItemEditing(object sender, ListViewEditEventArgs e)
{
    CloseInsert();
}

protected void lvwCustomers_ItemCanceling(object sender, ListViewCancelEventArgs e)
{
    if (e.CancelMode == ListViewCancelMode.CancelingInsert)
    {
        CloseInsert();
    }
}

protected void lvwCustomers_ItemInserted(object sender, ListViewInsertedEventArgs e)
{
    CloseInsert();
}

That's it we are all set to Add/Edit/Delete the records with LinqDataSource control.

Now we will see how to do the same with code. It is almost same as the LinqDataSource except few things, we need to hook the ItemCommand event and add few empty event handlers, the following shows the code:

protected void lvwCustomers_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    switch(e.CommandName)
    {
        case "Insert":
        {
            InsertCustomer(e.Item);
            break;
        }
        case "Update":
        {
            UpdateCustomer(e.CommandArgument as string, e.Item);
            break;
        }
        case "Delete":
        {
            DeleteCustomer(e.CommandArgument as string);
            break;
        }
    }
}

protected void lvwCustomers_ItemInserting(object sender, ListViewInsertEventArgs e)
{
}

protected void lvwCustomers_ItemEditing(object sender, ListViewEditEventArgs e)
{
    CloseInsert();
    lvwCustomers.EditIndex = e.NewEditIndex;
    BindList();
}

protected void lvwCustomers_ItemUpdating(object sender, ListViewUpdateEventArgs e)
{
}

protected void lvwCustomers_ItemCanceling(object sender, ListViewCancelEventArgs e)
{
    if (e.CancelMode == ListViewCancelMode.CancelingInsert)
    {
        CloseInsert();
    }
    else
    {
        lvwCustomers.EditIndex = -1;
    }

    BindList();
}

protected void lvwCustomers_ItemDeleting(object sender, ListViewDeleteEventArgs e)
{
}

As you can see that in ItemCommand event we are checking the commandName and based upon that we are calling the helper function which does the actual db operation. The reason behind having those empty event handlers like ItemInserting, ItemUpdating and ItemDeleting is, if those left unhandled you will get a nasty exception that the event was not handled. While playing with the ListView data editing my first try was these events to do the db operation instead of the ItemCommand, but found that the event argument always left empty(except the itemIndex) as well as the EditItem and InsertItem property of ListView if the ListView is not bind with any DataSource control.

Now lets see what those db operation functions does, the following shows the code:

private void InsertCustomer(ListViewItem insertItem)
{
    if (IsValid)
    {
        using (NorthwindDataContext db = new NorthwindDataContext())
        {
            Customer customer = new Customer();

            customer.CustomerID = ((TextBox)insertItem.FindControl("CustomerIDTextBox")).Text;
            customer.CompanyName = ((TextBox)insertItem.FindControl("CompanyNameTextBox")).Text;
            customer.ContactName = ((TextBox)insertItem.FindControl("ContactNameTextBox")).Text;
            customer.ContactTitle = ((TextBox)insertItem.FindControl("ContactTitleTextBox")).Text;
            customer.Address = ((TextBox)insertItem.FindControl("AddressTextBox")).Text;
            customer.City = ((TextBox)insertItem.FindControl("CityTextBox")).Text;
            customer.PostalCode = ((TextBox)insertItem.FindControl("PostalCodeTextBox")).Text;
            customer.Country = ((TextBox)insertItem.FindControl("CountryTextBox")).Text;
            customer.Phone = ((TextBox)insertItem.FindControl("PhoneTextBox")).Text;

            db.Customers.Add(customer);

            db.SubmitChanges();
            CloseInsert();
            BindList();
        }
    }
}

private void UpdateCustomer(string customerID, ListViewItem editItem)
{
    if (IsValid)
    {
        using (NorthwindDataContext db = new NorthwindDataContext())
        {
            Customer customer = db.Customers.Where(c => c.CustomerID == customerID).Single();

            customer.CompanyName = ((TextBox) editItem.FindControl("CompanyNameTextBox")).Text;
            customer.ContactName = ((TextBox)editItem.FindControl("ContactNameTextBox")).Text;
            customer.ContactTitle = ((TextBox)editItem.FindControl("ContactTitleTextBox")).Text;
            customer.Address = ((TextBox)editItem.FindControl("AddressTextBox")).Text;
            customer.City = ((TextBox)editItem.FindControl("CityTextBox")).Text;
            customer.PostalCode = ((TextBox)editItem.FindControl("PostalCodeTextBox")).Text;
            customer.Country = ((TextBox)editItem.FindControl("CountryTextBox")).Text;
            customer.Phone = ((TextBox)editItem.FindControl("PhoneTextBox")).Text;

            db.SubmitChanges();
            lvwCustomers.EditIndex = -1;
            BindList();
        }
    }
}

private void DeleteCustomer(string customerID)
{
    using(NorthwindDataContext db = new NorthwindDataContext())
    {
        Customer customer = db.Customers.Where(c => c.CustomerID == customerID).Single();
        db.Customers.Remove(customer);
        db.SubmitChanges();
    }

    Pager dpCustomers = (Pager)lvwCustomers.FindControl("dpCustomers");
    dpCustomers.CurrentPageNo = 1;

    BindList();
}

That's it. You will find the complete source code of both of this example in the bottom of this post. In my next post, I will show the new GroupTemplate of ListView.

Download: Full Source

Asp.net ListView - DataBinding

Kazi Manzur Rashid — Sun, 09 Sep 2007 06:18:20 GMT

In my previous post, I have presented few cool css examples of the new Asp.net ListView control. In this post, I will show how you can setup the data binding of the ListView control with the new LinqDataSource control as well as through code, which outputs the previous post examples.

Like its ancestor, the ListView comes up with few templates and some of them are really new. In order to bind data we first have to define the LayoutTemplate. The LayoutTemplate is a new template that acts as a container for either group or item templates. Since our previous example presents the data in tabular format, we will exclude the GroupTemplate from discussing in this post. One of the required thing you have to keep in mind while defining the LayoutTemplate is, you must have to declare an itemContainer/groupContainer where the item/group will be repeated. For example, I have declared the tbody as the itemContainer like the following:

<LayoutTemplate>
    <table>
        <thead>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Title</th>
                <th>Address</th>
                <th>City</th>
                <th>Postal Code</th>
                <th>Country</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody id="itemContainer" runat="server"></tbody>
        <tfoot>
            <tr>
                <th style="text-align:right" colspan="8">
                    <asp:DataPager runat="server" ID="dpCustomers" PageSize="10">
                        <Fields>
                            <asp:NumericPagerField ButtonCount="5"/>
                        </Fields>
                    </asp:DataPager>
                </th>
            </tr>
        </tfoot>
    </table>
</LayoutTemplate>

As you can see, the LayoutTemplate also contains another new control DataPager that I will discuss later. Another important thing is that unlike the Repeater control where usually the HeaderTemplate contains the starting tag and the FooterTemplate contains the ending tag of the container , the LayoutTemplate contains the both except the repeating part.

Next, we have to define the ItemTemplate and the AlteringItemTemplate like the following:

<ItemTemplate>
    <tr>
        <td>
            <asp:Label ID="lblCompany" runat="server" Text='<% #Eval("CompanyName")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblContact" runat="server" Text='<% #Eval("ContactName")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblTitle" runat="server" Text='<% #Eval("ContactTitle")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblAddress" runat="server" Text='<% #Eval("Address")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblCity" runat="server" Text='<% #Eval("City")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblPostalCode" runat="server" Text='<% #Eval("PostalCode")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblCountry" runat="server" Text='<% #Eval("Country")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblPhone" runat="server" Text='<% #Eval("Phone")%>'></asp:Label>
        </td>
    </tr>
</ItemTemplate>
<AlternatingItemTemplate>
    <tr class="odd">
        <td>
            <asp:Label ID="lblCompany" runat="server" Text='<% #Eval("CompanyName")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblContact" runat="server" Text='<% #Eval("ContactName")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblTitle" runat="server" Text='<% #Eval("ContactTitle")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblAddress" runat="server" Text='<% #Eval("Address")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblCity" runat="server" Text='<% #Eval("City")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblPostalCode" runat="server" Text='<% #Eval("PostalCode")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblCountry" runat="server" Text='<% #Eval("Country")%>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblPhone" runat="server" Text='<% #Eval("Phone")%>'></asp:Label>
        </td>
    </tr>
</AlternatingItemTemplate>

At last, we will add a LinqDataSource control which will refer the Customers table of Northwind database. Certainly you have to add a LinqToSQLClasses previously and define the data model. The following shows the LinqDataSource:

<asp:LinqDataSource ID="linqCustomers" runat="server" ContextTypeName="NorthwindDataContext" TableName="Customers"/>

One of the benefits of using LinqDataSource over the other DataSource controls is it produces very optimized SQL without writing a single line of code. For example, the following SQL is generated when I moved to page two by clicking the DataPager.

exec sp_executesql N'SELECT TOP 10 [t1].[CustomerID], [t1].[CompanyName], [t1].[ContactName], [t1].[ContactTitle], [t1].[Address], [t1].[City], [t1].[Region], [t1].[PostalCode], [t1].[Country], [t1].[Phone], [t1].[Fax]
FROM (
    SELECT ROW_NUMBER() OVER (ORDER BY [t0].[CustomerID], [t0].[CompanyName], [t0].[ContactName], [t0].[ContactTitle], [t0].[Address], [t0].[City], [t0].[Region], [t0].[PostalCode], [t0].[Country], [t0].[Phone], [t0].[Fax]) AS [ROW_NUMBER], [t0].[CustomerID], [t0].[CompanyName], [t0].[ContactName], [t0].[ContactTitle], [t0].[Address], [t0].[City], [t0].[Region], [t0].[PostalCode], [t0].[Country], [t0].[Phone], [t0].[Fax]
    FROM [dbo].[Customers] AS [t0]
    ) AS [t1]
WHERE [t1].[ROW_NUMBER] > @p0',N'@p0 int',@p0=10

Like the other data controls, both the ListView and DataPager are tightly coupled with the DataSource controls.

So far we have seen how to bind data with the DataSource Control, now lets see how to bind data with code. The first issue you will face while binding pageable data that like the GridView built-in paging, there is no way you can utilize the DataPager control unless you use the DataSource controls. So you have to roll your own pager, in this example I have substitute the DataPager control with the server side version of my AjaxDataControls pager. Thus the LayoutTemplate becomes:

<LayoutTemplate>
    <table>
        <thead>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Title</th>
                <th>Address</th>
                <th>City</th>
                <th>Postal Code</th>
                <th>Country</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody id="itemContainer" runat="server"></tbody>
        <tfoot>
            <tr>
                <th colspan="8" style="text-align:right">
                    <cc1:Pager ID="pager" runat="server" OnPageChange="pager_PageChange" SliderSize="5" ShowFirstAndLast="false" ShowPreviousAndNext="true"/>
                </th>
            </tr>
        </tfoot>
    </table>
</LayoutTemplate>

The next issue you will face once you put the pager in the LayoutTemplate is, you will not be able to get the reference of the control by FindControl() until you bind the data of the ListView. So we have to first bind with a dummy data to get the reference, once done we will bind with the original data like the following:

private void BindList()
{
    using (NorthwindDataContext db = new NorthwindDataContext())
    {
        //Unless we bind the data we will not be able to refer the pager control
        //so bind it with a dummy data
        lvwCustomers.DataSource = new Customer[] { new Customer() };
        lvwCustomers.DataBind();

        Pager pager = (Pager)lvwCustomers.FindControl("pager");
        //Calculate the startIndex based upon the Current and RowPerPage
        int startIndex = (pager.CurrentPageNo - 1) * pager.RowPerPage;

        //Now bind it with the actual data.
        lvwCustomers.DataSource = db.Customers.Skip(startIndex).Take(pager.RowPerPage);
        lvwCustomers.DataBind();

        //We also need to know the total row in order to properly render the pager
        pager.TotalRow = db.Customers.Count();
    }
}

Next we have to handle the PageChange event of the pager to render the new page records. The following shows the code of this event:

protected void pager_PageChange(object sender, PageChangeEventArgs e)
{
    ((Pager)sender).CurrentPageNo = e.PageNo;
    BindList();
}

That's it. You will find the full source code of both these example in the bottom of this post. In my next post, I will show how we can leverage the data editing capabilities of ListView control.

Download: Full Source

Asp.net ListView - Too much CSS Friendly

Kazi Manzur Rashid — Wed, 05 Sep 2007 11:22:32 GMT

My First experiment with Asp.net ListView control was awesome. I downloaded few templates from CSS Table Gallery and able to apply it only in few minutes. Checkout the result of Northwind Customer table:

Simply Rocking!

I will be covering the other features of this cool control in my future posts. Stay tuned.

Download: Full Source

Create An Ajax Style File Upload

Kazi Manzur Rashid — Wed, 01 Aug 2007 08:36:58 GMT

If you visit Asp.net Ajax Forum, you will find hundreds of request on File Upload Control that it does not give Ajax version of the page when it is placed in an UpdatePanel. Certainly, it is not possible, as the XMLHTTPRequest object that is used internally to post the form does not support file upload. In this post I will show you how to create Ajax like version of the file upload. The trick is very simple, I will use an Iframe to upload the file so the whole page does not get refreshed and when the post is in progress it will show a dummy progress. The following shows you the screenshots of the solutions:

Now lets discuss the implementation part, starting with the Main page markup.

<fieldset>
    <legend>Photo Upload Demo</legend>
    <div id="divFrame">
        <iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" 
style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="PhotoUpload.aspx"></iframe>
    </div>
    <div id="divUploadMessage" style="padding-top:4px;display:none"></div>
    <div id="divUploadProgress" style="padding-top:4px;display:none">
        <span style="font-size:smaller">Uploading photo...</span>
        <div>
            <table border="0" cellpadding="0" cellspacing="2" style="width:100%">
                <tbody>
                    <tr>
                        <td id="tdProgress1">&nbsp; &nbsp;</td>
                        <td id="tdProgress2">&nbsp; &nbsp;</td>
                        <td id="tdProgress3">&nbsp; &nbsp;</td>
                        <td id="tdProgress4">&nbsp; &nbsp;</td>
                        <td id="tdProgress5">&nbsp; &nbsp;</td>
                        <td id="tdProgress6">&nbsp; &nbsp;</td>
                        <td id="tdProgress7">&nbsp; &nbsp;</td>
                        <td id="tdProgress8">&nbsp; &nbsp;</td>
                        <td id="tdProgress9">&nbsp; &nbsp;</td>
                        <td id="tdProgress10">&nbsp; &nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>

As you see that we are using few divs to show and hide the upload form and the progress bar. The important thing is we are binding the initPhotoUpload in the frame load event. Now let us check the iframe source page markup.

<form id="photoUpload" enctype="multipart/form-data" runat="server">
    <div>
        <input id="filPhoto" type="file" runat="server"/>
    </div>
    <div id="divUpload" style="padding-top:4px">
        <input id="btnUpload" type="button" value="Upload Photo" />
    </div>
</form>

The iframe source page contains only a file upload control and a button to post the form. Now lets get back to the main page initPhotoUpload function and lets check how it is implemented:

function initPhotoUpload()
{
    _divFrame = document.getElementById('divFrame');
    _divUploadMessage = document.getElementById('divUploadMessage');
    _divUploadProgress = document.getElementById('divUploadProgress');
    _ifrPhoto = document.getElementById('ifrPhoto');

    var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

    btnUpload.onclick = function(event)
    {
        var filPhoto = _ifrPhoto.contentWindow.document.getElementById('filPhoto');

        //Baisic validation for Photo
        _divUploadMessage.style.display = 'none';

        if (filPhoto.value.length == 0)
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;

        if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        beginPhotoUploadProgress();
        _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
        _divFrame.style.display = 'none';
    }
}

Once the iframe is loaded we are setting few module level variables (All module level variables are prefixed with _ (underscore) character in this example) to DOM elements, we are also getting the reference of the Upload button which is in the iframe and creating its click handler. In the click handler first we are doing few basic validation such as the file upload control is not empty or the file that is specified has a valid image file extension. Once the validation qualifies then we are calling the beginPhotoUploadProgress function (discussed next) and submitting the iframe form. The beginPhotoUploadProgress function is the first of three functions which are used to show the dummy progress bar. Let us see how these functions are written:

function beginPhotoUploadProgress()
{
    _divUploadProgress.style.display = '';
    clearPhotoUploadProgress();
    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

function clearPhotoUploadProgress()
{
    for (var i = 1; i <= _maxLoop; i++)
    {
        document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';
    }

    document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
    _loopCounter = 1;
}

function updatePhotoUploadProgress()
{
    _loopCounter += 1;

    if (_loopCounter <= _maxLoop)
    {
        document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
    }
    else 
    {
        clearPhotoUploadProgress();
    }

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

As we can see we are basically using the timer (window.setTimeout) to show the dummy progress in these functions. Now lets see what happens in the server side when the iframe page posts.

private const string SCRIPT_TEMPLATE = "<" + "script " + "type=\"text/javascript\">window.parent.photoUploadComplete('{0}', {1});" + "<" + "/script" + ">";

private void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        //Sleeping for 10 seconds, fake delay, You should not it try at home.
        System.Threading.Thread.Sleep(10 * 1000);
        UploadPhoto();
    }
}

private void UploadPhoto()
{
    string script = string.Empty;

    if ((filPhoto.PostedFile != null) && (filPhoto.PostedFile.ContentLength > 0))
    {
        if (!IsValidImageFile(filPhoto))
        {
            script = string.Format(SCRIPT_TEMPLATE, "The uploaded file is not a valid image file.", "true");
        }
    }
    else
    {
        script = string.Format(SCRIPT_TEMPLATE, "Please specify a valid file.", "true");
    }

    if (string.IsNullOrEmpty(script))
    {
        //Uploaded file is valid, now we can do whatever we like to do, copying it file system,
        //saving it in db etc.

        //Your Logic goes here

        script = string.Format(SCRIPT_TEMPLATE, "Photo uploaded.", "false");
    }

    //Now inject the script which will fire when the page is refreshed.
    ClientScript.RegisterStartupScript(this.GetType(), "uploadNotify", script);
}

private static bool IsValidImageFile(HtmlInputFile file)
{
    try
    {
        using (Bitmap bmp = new Bitmap(file.PostedFile.InputStream))
        {
            return true;
        }
    }
    catch (ArgumentException)
    {
        //throws exception if not valid image
    }

    return false;
}

In the server side we are first doing some basic validation such as the file upload control has file and the file is a valid image file. Once the validation is done we are injecting some javascript which will be executed when the page is loaded in the browser. The javascript calls the main page photoUploadComplete function which shows the success/failure or the validation message of the upload. Lets see the javascript function photoUploadComplete of the main page.

function photoUploadComplete(message, isError)
{
    clearPhotoUploadProgress();

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _divUploadProgress.style.display = 'none';
    _divUploadMessage.style.display = 'none';
    _divFrame.style.display = '';

    if (message.length)
    {
        var color = (isError) ? '#ff0000' : '#008000';

        _divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
        _divUploadMessage.style.display = '';

        if (isError)
        {
            _ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
        }
    }
}

The function simply hides the progress bar and shows the upload control then it shows the message in colored text which is sent from the server.

I hope you can easily implment it in Ajax UpdatePanel, if not please let me know, I will show it in next post.

Download : Complete Solution

Implement Yahoo's YSlow in your Asp.net pages

Kazi Manzur Rashid — Sun, 29 Jul 2007 10:14:46 GMT

I have got quite a bit of comments and feedbacks on my previous post where I shown how to combine multiple JS and CSS Files into one. So I decided to enhance it a bit more. Now it Supports:

GZip or Deflate Compression based upon the browser header. Can be turned on/off from web.config
Minifier for both JS and CSS files. Although it is recommended to keep separate version of these files for both development and production instead of minifying it runtime. There are plenty of online and offline tool available to do it. This can be also turned on/off from web.config.
New Setting in the web.config for Cache Duration instead of hardcoding it in the code.

If you have checked the recent YSlow of Yahoo which works on top of Firebug, you already know that the above items are highly recommended for creating High Performance web applications.

Download: Enhanced Version

Combine Multiple JavaScript and CSS Files and Remove Overheads

Kazi Manzur Rashid — Wed, 25 Jul 2007 20:57:46 GMT

When developing a large web application especially if it is Ajax enabled, we often ended up with a larger number of JavaScript and Cascading Stylesheet files and it is quite common that more than one JavaScript file is involved for a single functionality. For example, if you are using DataTable widget of Yahoo User Interface you have to add yahoo-dom-event.js, connection-min.js, dragdrop-min.js, json.js, datasource-beta-min.js, datatable-beta-min.js (as per the example). When a browser encounters an external resource file such as Image, CSS, JS it opens a separate connection to download the file which actually add extra overhead both to server and the browser. To minimize it we can manually combine multiple JS and CSS file into a single large file, but this makes development life harder. Instead we can programmatically combine these files which we will see in the next section.

To combine these resource file we can utilize the Generic Handler (.ashx) file which comes with the Asp.net, we can also put some directive in the web.config file to conditionally combines the resource files depending upon the settings. First, lets see the web.config file.

<appSettings>
  <add key="UseFileSet" value="true"/>
  <add key="VersionNo" value="1.0"/>
  <add key="FileSet_CSS_Style1" value="Css/StyleSheet1.css,Css/StyleSheet2.css,Css/StyleSheet3.css,Css/StyleSheet4.css" />
  <add key="FileSet_JS_Functionality1" value="Scripts/JScript1.js,Scripts/JScript2.js,Scripts/JScript3.js,Scripts/JScript4.js" />
</appSettings>

As you can see there three kind of settings, first whether we will use the file set which is specified in the consequent settings, second the version number which we will discuss later and third different file sets. Each fileset contains the fileset name as the key and files location in comma separated value. Now lets see how do we embed this resource files in an aspx page:

<% if (ResourceHandler.UseFileSet)
   {
%>
    <link type="text/css" href="ResourceHandler.ashx?v=<%= ResourceHandler.VersionNo %>&fileSet=FileSet_CSS_Style1&type=text/css" rel="Stylesheet"/>
    <script type="text/javascript" src="ResourceHandler.ashx?v=<%= ResourceHandler.VersionNo %>&fileSet=JS_Functionality1&type=application/x-javascript"></script>
<%
   }
   else
   {
%>
    <link href="Css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet2.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet3.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet4.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/JScript1.js"></script>
    <script type="text/javascript" src="Scripts/JScript2.js"></script>
    <script type="text/javascript" src="Scripts/JScript3.js"></script>
    <script type="text/javascript" src="Scripts/JScript4.js"></script>
<%
   }
%>

As you can see we are using Asp.net syntax to conditionally add these resource file depending upon the settings. When we are in development mode we can turn it off from the web.config file. But the problem with using generic resource handler is the files never gets cached in the browser. So our generic handler must also inject proper caching headers along with combining files. Now lets see how the generic handler is implemented:

<%@ WebHandler Language="C#" Class="ResourceHandler" %>
using System;
using System.IO;
using System.Web;
using System.Configuration;

public class ResourceHandler : IHttpHandler
{
    public static bool UseFileSet
    {
        get
        {
            return Convert.ToBoolean(ConfigurationManager.AppSettings["UseFileSet"]);
        }
    }

    public static string VersionNo
    {
        get
        {
            return ConfigurationManager.AppSettings["VersionNo"];
        }
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }

    public void ProcessRequest (HttpContext context)
    {
        string fileSet = context.Request.QueryString["fileSet"];

        //Basic Validation
        if (string.IsNullOrEmpty(fileSet))
        {
            return;
        }

        string contetType = context.Request.QueryString["type"];

        if (string.IsNullOrEmpty(contetType))
        {
            return;
        }

        string files = ConfigurationManager.AppSettings["FileSet_" + fileSet];

        if (string.IsNullOrEmpty(files))
        {
            return;
        }

        //Get the list of files specified in the FileSet
        string[] fileNames = files.Split(',');

        if ((fileNames != null) && (fileNames.Length > 0))
        {
            //Write each files in the response
            for (int i = 0; i < fileNames.Length; i++)
            {
                context.Response.Write(File.ReadAllText(context.Server.MapPath(fileNames[i])));
            }

            //Set the content type
            context.Response.ContentType = contetType;

            // Cache the resource for 7 Days
            CacheUtility.Cache(TimeSpan.FromDays(7));
        }
    }
}

As we can see the Handler contains some static property which we used when embedding in the aspx files. The file merging is done in the ProcessRequest method. In this method we are reading the physical files which is specified in the web.config fileset and writing it in the Asp.net Response object and at the end we are using a helper class CacheUtility to cache the response. Now let see how the this class is implemented:

using System;
using System.Web;
using System.Reflection;

public static class CacheUtility
{
    public static void Cache(TimeSpan duration)
    {
        HttpCachePolicy cache = HttpContext.Current.Response.Cache;

        FieldInfo maxAgeField = cache.GetType().GetField("_maxAge", BindingFlags.Instance | BindingFlags.NonPublic);
        maxAgeField.SetValue(cache, duration);

        cache.SetCacheability(HttpCacheability.Public);
        cache.SetExpires(DateTime.Now.Add(duration));
        cache.SetMaxAge(duration);
        cache.AppendCacheExtension("must-revalidate, proxy-revalidate");
    }
}

As you can see we are not only using the regular caching methods of Asp.net, we are also using some reflection code to set the proper cache-control header. You can find the reason why the reflection is used from these two links Client-side caching for script methods access in ASP.NET AJAX and ASP.NET AJAX under the hood secrets. If you want to know more about the cache-control header then read Caching Details. If any of the files get modified then update the version number in web.config, it will ensure that the latest files get downloaded due to the query string.

Download: Complete Solution

I am the winner for the Month of June

Kazi Manzur Rashid — Thu, 19 Jul 2007 06:51:54 GMT

This morning dotnetslackers announced me as the winner of the XBox article content for the month of June. Special thanks to everyone who vote my Asp.net Ajax Control Development article. Some of my friends asked me why did I choose to write in dotnetslackers over codeproject when codeproject got 8x more traffic. The reason behind choosing dotnetslackers, I think it got much more Asp.net Ajax specialist as a member comparing to codeproject and once it won the Asp.net Atlas Mashup contest of Asp.net and these make me feel that there is no better and friendlier place other than this for my Asp.net Ajax Articles. But I have few suggestions for dotnetslackers to make it more attractive for the developer community:

Publish Article Instantly, same as codeproject Unedited Reader Contribution.
A Better Navigation System, Add Editors Pick, Best of this week/month etc.
Hierarchical Comments section for each article which allows user to post html as well as code. Dump the complete comment in Mail. Send mail when there is a new topic/reply.
Stop Paid Articles (I am not sure how many good article they found comparing to unpaid) instead find sponsors for article competition, may be for different categories too.
The Home page is too bulky (385KB as per Firebug). 2x heavy comparing to codeproject and my startpage pageflakes
A Better Search System (Currently it only scans through news, no article get indexed).
Allow Article Authors to add meta tag (SEO Optimization)

I hope they will take my suggestion seriously and start implementing the above features one by one.

Cancel a Web Service Call in Asp.net Ajax

Kazi Manzur Rashid — Sat, 14 Jul 2007 10:30:34 GMT

In this post I will show you how to cancel a web Service call after it is invoked, I will also provide you some interesting findings (Maybe a Bug) in Asp.net Ajax Network Layer. There are plenty of examples available on how to abort an UpdatePanel AsyncPostback but none for the WebService. The following will show you how to do it.

Since we are going to cancel a call we need a web method which wait for a long time to complete:

The Web Method:

[WebMethod()]
public string LongOperation(int miliseconds)
{
    System.Threading.Thread.Sleep(miliseconds);
    return "Task Complete";
}

Now lets check the client part. If you are already familiar with Web Service calling in JavaScript, I hope you know that there is always a JavaScript Proxy class involved for that Web Service. This Proxy class is inherited from the Sys.Net.WebServiceProxy which contains a single method invoke. If you check the Ajax Documentation you will find that this invoke method returns a WebRequest object which is used to call Web Service method, it is also mentioned that this WebRequest object can be also used to cancel the call. Now lets see what is the generated Proxy class looks like. You can easily generate the proxy class by appending /js in the Web Service URL.

var TestService=function() {
TestService.initializeBase(this);
this._timeout = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
TestService.prototype={
LongOperation:function(miliseconds,succeededCallback, failedCallback, userContext) {
return this._invoke(TestService.get_path(), 'LongOperation',false,{miliseconds:miliseconds},succeededCallback,failedCallback,userContext); }}
TestService.registerClass('TestService',Sys.Net.WebServiceProxy);
TestService._staticInstance = new TestService();
TestService.set_path = function(value) { TestService._staticInstance.set_path(value); }
TestService.get_path = function() { return TestService._staticInstance.get_path(); }
TestService.set_timeout = function(value) { TestService._staticInstance.set_timeout(value); }
TestService.get_timeout = function() { return TestService._staticInstance.get_timeout(); }
TestService.set_defaultUserContext = function(value) { TestService._staticInstance.set_defaultUserContext(value); }
TestService.get_defaultUserContext = function() { return TestService._staticInstance.get_defaultUserContext(); }
TestService.set_defaultSucceededCallback = function(value) { TestService._staticInstance.set_defaultSucceededCallback(value); }
TestService.get_defaultSucceededCallback = function() { return TestService._staticInstance.get_defaultSucceededCallback(); }
TestService.set_defaultFailedCallback = function(value) { TestService._staticInstance.set_defaultFailedCallback(value); }
TestService.get_defaultFailedCallback = function() { return TestService._staticInstance.get_defaultFailedCallback(); }
TestService.set_path("TestService.asmx");
TestService.LongOperation= function(miliseconds,onSuccess,onFailed,userContext) {TestService._staticInstance.LongOperation(miliseconds,onSuccess,onFailed,userContext); }

As you can see the LongOperation in protoype section is using the base class(Sys.Net.WebServiceProxy) invoke method to call the Web method which in turn returns WebRequest. The Proxy also has a self instance as a _staticInstance. But in later it overrides the method and uses the _staticInstance to call the WebMethod but it does not return the WebRequest(This is the bug) in this case. So if I write the code as we always did for calling a web method it does not return the WebReqest object.

var _request = TestService.LongOperation    (       10000, //10 seconds
                                                    function(result)
                                                    {
                                                        //
                                                    },
                                                    function(exception)
                                                    {
                                                        //
                                                    }
                                            );

But if I call like the following the WebRequest is returned:

var _request = TestService._staticInstance.LongOperation  (     10000, //10 seconds
                                                            function(result)
                                                            {
                                                                //
                                                            },
                                                            function(exception)
                                                            {
                                                                //
                                                            }
                                                        );

Really interesting!!! I have already posted a bug in Asp.net Ajax Forum you can check the progress from this link.

Now lets check how to cancel the call as we have already got the reference of the WebRequest object. To Cancel we can use the following code:

if (_request != null)
{
    var executor = _request.get_executor();

    if (executor.get_started())
    {
        executor.abort();
    }
}

Explanation: Every WebRequest in Ajax Framework has an associated Executor which actually uses the browser XMLHttpRequest to call the server side method (An URL). In the above, first we are getting a reference of that executor then checking if the call is in progress (To be in the safe side), if so then we are invoking abort method of that executor which in turns call the abort method of the XMLHttpRequest.

Another annoying problem I found after doing the abort the Ajax Framework throws an exception and for this reason the OnFailure Callback of the Web method call is executed. So we also need to differentiate between a real exception and an User Defined Abort (May be a button click of the user). For this we have to put some extra check in the failure callback like the following:

var _request = TestService._staticInstance.LongOperation  (     10000, //10 seconds
                                                                function(result)
                                                                {
                                                                    alert(result);
                                                                    $get('btnInvoke').disabled = false;
                                                                    $get('btnAbort').disabled = true;
                                                                },
                                                                function(exception)
                                                                {
                                                                    if (!_request.get_executor().get_aborted())
                                                                    {
                                                                        alert(exception.get_message());
                                                                    }
                                                                    $get('btnInvoke').disabled = false;
                                                                    $get('btnAbort').disabled = true;
                                                                }
                                                            );

In the Failure Callback we are again checking if the WebRequest Executor has been aborted, if so then it is not an exception rather the user choose to cancel the call.

Download: Complete working sample.

Another Article on Ajax Control Development

Kazi Manzur Rashid — Mon, 09 Jul 2007 22:43:39 GMT

Another addition of my Ajax Control Development Article series. This time it is Asp.net Ajax Repeater. Check it out.

My New Article - ASP.NET AJAX Control Development

Kazi Manzur Rashid — Wed, 27 Jun 2007 01:20:29 GMT

A must read who wants to develop controls in Asp.net Ajax Framework. Covers in depth details of both client and server side programming. Check it out.