Yet Another Blog on ASP.NET and Some Other Stuff

DefaultDotAspx.com said “Hello world!” to the ASP.NET community.

What is it?

You can use DefaultDotAspx.com to get ready for the interviews or evaluate your knowledge. It is kind of a small knowledge base about ASP.NET and other topics. It has some short quizzes about ASP.NET and SQL as well.

There are tons of sites like this. So what?

Well… It is developed with the perspective of an ASP.NET development experience, therefore the content is dedicated accordingly. Even though it does not matter to the end-users, it was - and is being - developed by the latest version 3.5 and its new features.

This post is an addition to these three posts:

• ListView Control in ASP.NET 3.5 - 1 (opens a new window)
• ListView Control in ASP.NET 3.5 - 2 (opens a new window)
• ListView Control in ASP.NET 3.5 - 3 (opens a new window)

It would be a better practice to read these three posts first.

Using InsertItemTemplate with ItemCommand

I will demonstrate how to utilize InsertItemTemplate and InsertCommand in order to add a new record to the Country table. First, add the buttons which will show and hide the InsertItemTemplate by using the InsertItemPosition property of ListView:

Their associated OnClick events are:

For the initial loading of the page, set InsertItemPosition property of the ListView to None:

Now, place the InsertItemTemplate somewhere between the ListView tags like the other templates:

Like I did in this post before for the Edit and Delete commands, I will add a similar custom routine for the Insert command inside the ItemCommand event:

View on the HTML presentation is now supposed to be like:

If “Show Insert” button is clicked:

Put some meaningful entries to the textboxes:

It’s there, inserted:

Also, pay attention that “Hide Insert” button becomes “Show Insert” button.

Download

For more hands-on understanding of this post, you can download the sample (by VWD 2008) via here.

This post is a continuing sample demonstration of these two posts:

• ListView Control in ASP.NET 3.5 - 1 (opens a new window)
• ListView Control in ASP.NET 3.5 - 2 (opens a new window)

It would be a good practice to read them first before jumping into this post.

Using EditItemTemplate with ItemCommand

I will try to show how to add an editing capability to the ListView in this post by utilizing ItemCommand event. This event is basically raised when a button inside the ListView is clicked.

Following code should be added inside the ItemTemplate and AlternatingItemTemplate templates:

After adding the above code, EditItemTemplate template should also be placed somewhere between the ListView tags like the other templates:

Even though Edit, Update, Cancel and Delete buttons have built-in functionalities about what they are supposed to be doing, I will only use this advantage for Edit and Cancel buttons. Edit button puts the row in an edit mode by rendering the EditItemTemplate that I defined above. Cancel button invokes its built-in functionality which cancels the edit operation by raising the ItemCanceling event. For other buttons, I prefer to write their own custom routines:

As a result of these modifications, the result on the browser should look like:

When the Edit button is clicked:

Remember that I put RequiredFieldValidator controls for Country Name and Capital City textboxes (look at the 3rd screenshot in this post). Therefore, any operation in the edit mode (Update, Cancel or Delete) will not take action if one of these or both fields are blank:

Download

For more understanding of this post, you can download the sample (by VWD 2008) via here.

Update

This post is continued by:

• ListView Control in ASP.NET 3.5 - 4

This post is actually a continuing demonstration of this one:

• ListView Control in ASP.NET 3.5 - 1 (opens a new window)

It would be a better practice to jump into it first before reading this post.

EmptyDataTemplate

The empty template, EmptyDataTemplate, can be utilized to define the view when there is no data for the ListView, which means that the ListView control is bound to a DataSource having no records. In reality, this template is rendered instead of LayoutTemplate when ListView is empty. It renders by itself, therefore it is not required to be defined inside any other ListView templates.

I have defined the Select command of AccessDataSource1 in a way that it returns zero record, and put the empty template right after AlternatingItemTemplate between the ListView tags:

In order to hide the “Clear Sorting” and “View All” buttons when our ListView is empty, I will set their visibility values to False inside the Page_Load method when the DataSource (AccessDataSource1) has no records:

As a result of all these changes, the HTML presentation should look like:

It should also be known that…

Even though ListView is empty, EmptyDataTemplate can only be displayed when InsertItemPosition value is set to None (which is the default if the value is not defined). InsertItemPosition defines the location of InsertItemTemplate when it is rendered as a part of ListView.

Download

For further understanding of this post, you can download the source code (by VWD 2008) via here.

Update

This post is continued by:

• ListView Control in ASP.NET 3.5 - 3
• ListView Control in ASP.NET 3.5 - 4

ListView is one of the new data controls that was shipped with the latest release of ASP.NET, which is 3.5. It displays the values from a data source by utilizing user-defined templates. This gives the developer more flexibility about the design of the data displayed on the user interface. In order for the ListView control to display its content, templates should be created for different parts of the control. The LayoutTemplate and ItemTemplate are mandatory. All other templates are optional. This post will explain some of the useful features and properties of ListView by dividing the content into the meaningful parts:

Some Definitions Before Jumping Into Coding (via MSDN)

LayoutTemplate: The root template that defines a container object (such as a table, div or span elements) that will contain the content defined in the ItemTemplate. It may also contain a DataPager object.

ItemTemplate: Defines the data-bound content to display for individual items (such as rows).

AlternatingItemTemplate: Defines the content to render for alternating items to make it easier to distinguish between consecutive items.

DataPager: Provides paging functionality for data-bound controls that implement the IPageableItemContainer interface, such as the ListView control.

Sorting: (ListView’s Sorting event) Occurs when a Sort button (a button with its CommandName property set to Sort) is clicked or the Sort method is called, but before the ListView control handles the sort operation.

Part 1 - Simple Binding

In this post, VB.NET and AccessDataSource will be used. When you download the source code, you will see the sample Access database in the App_Data folder. It basically contains one table which is named as Country with the fields of CountryID (AutoNumber, Indexed), CountryName (Text, 50) and CapitalCity (Text, 50). This Country table holds some country names and their associated capital city names.

As mentioned before in the Introduction section, LayoutTemplate and ItemTemplate are mandatory templates in order to initialize the data binding of a ListView:

As a result of this code, HTML presentation should be like:

Part 2 - With DataPager

ListView1 is now ready to be added more functionalities such as paging. To provide this, DataPager object will be used and in order to utilize a DataPager within ListView1, following code can added inside the LayoutTemplate, preferably to the end:

As a result of adding this code, HTML presentation should now be like:

Part 3 - With AlternatingItemTemplate

In order to describe the appearance of alternating rows of ListView1, AlternatingItemTemplate property can be used. It is very similar to the same one in Repeater control. Following code can be added after the ItemTemplate:

Result should look like:

Part 4 - With Sorting Capability

ListView control has a built-in sorting capability. This functionality is defined in the CommandArgument property of the button that contains the columns to be sorted. It occurs when a button with its CommandName property set to Sort is clicked or the Sort method is called. First approach will be utilized here:

A user might want to get back the initial view of the ListView after playing with the sort buttons, therefore a Clear Sorting button is also added:

To inform the user which direction he or she sorts, ascending and descending images (asc.gif and desc.gif) would be helpful which will be displayed next to the sort buttons:

As a final view of this part, you should see:

Part 5 - With MouseOver/MouseOut Effects

As the ListView control gives more flexibility about displaying the data, MouseOver and MouseOut effects can be easily applied without dealing with some kind of RowCreated (ItemCreated) and RowDataBound (ItemDataBound) events:

Similar approach must also be applied to the AlternatingItemTemplate:

Now, when you mouse over any row in the table, you should have a color of pink:

Update - You can read this post to practice putting dynamic tooltips to the ListViews.

Part 6 - With View All Utility

There may be some cases on the users side that they want to view all rows (results) in one page instead of going through the paging process.

In order to accomplish this, ViewAll and EnablePaging functions will be defined as:

And, View All and Enable Paging buttons will be displayed as:

Conclusion

This post explained some basics of ListView control and its built-in capabilities. The code samples given in here may not be the best approaches but at least can give an idea about how to push the borders of using ListView in the ASP.NET 3.5 applications.

Download

For further hands-on understanding of this post, you can download the source code (by VWD 2008) via here.

Update

This post is continued by:

• ListView Control in ASP.NET 3.5 - 2
• ListView Control in ASP.NET 3.5 - 3
• ListView Control in ASP.NET 3.5 - 4