Learn how to display a master/detail form with a ListView control using ASP.NET 3.5.In this tutorial we will demonstrate how to use a new, soon
(if not already) to be very popular control in ASP.NET 3.5, the
control. This control, unlike the GridView,
supports the data editing, insertion, deleting, paging and sorting
semantics of higher-level controls like the GridView.
How to Display a Page Form with a ListView Control
Learn how to display a master/detail form with a ListView control using ASP.NET 3.5 .In this tutorial we will demonstrate how to use a new, soon
(if not already) to be very popular control in ASP.NET 3.5, the
control. This control, unlike the GridView,
supports the data editing, insertion, deleting, paging and sorting
semantics of higher-level controls like the GridView. It gives you
complete control over the html markup generated.
The ASP.NET 3.5 ListView control enables you to bind to data items
that are returned from a data source and then display them. You can
display items individually, or you can group them.
To start, open Visual Studio 2008. File > New > Web Site >
ASP.NET Web Site and name it ListViewControl or whatever you want.
We can set up the ListView control so you can use it to select
items, usually when you want to create a master/detail form. The page
that we will create contains two ListView controls. One works as a tab
strip and enables you to select a person’s name. The second ListView
displays a numbered list of matching City’s where they were live. Now
from here we need to layout the CSS. Here is the markup of the style
sheet that we will use:
.categoryContainer div
{
width: 120px;
font-size: small;
border: 1px silver;
float: left;
padding: 2px;
margin: 2px;
}
.categoryContainer a
{
text-decoration: none;
}
.categoryContainer div:hover
{
background-color: #eeeeee;
}
#selected
{
background-color: silver;
}
|
This CSS layout should be pretty straight forward. We just defined
the Category.Container div and assigned values to the background
colors.
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
This first ListView control will be used to render something resembling a tab strip.
ID="lstPeopleCategories"
DataSourceID="dbPeopleCategory"
DataKeyNames="Id"
runat="server">
ID="itemPlaceholder"
runat="server" />
ID="lnkSelect"
Text='<%# Eval("Name") %>'
CommandName="Select"
runat="server" />
Notice that this ListView control has its DataKeyNames property set
which causes the ListView control to build a hidden collection of
primary key values when the ListView is bound to its data source. Each
item within the ListView is associated with an ID value.
Also, notice that the ListView control includes a
SelectItemTemplate. The contents within the SelectedItemTemplate are
rendered for the selected item in the ListView. To select an item, just
click one of the links rendered by the ListView control’s ItemTemplate.
The links are rendered with a LinkButton control.
The CommandName property of the LinkButton has the value “Select”.
This command name causes the ListView to change the selected item.
We migrated our web sites to Server Intellect
over one weekend and the setup was so smooth that we were up and
running right away. They assisted us with everything we needed to do
for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
Now as for the second ListView control. It uses the first ListView
control as the source value for a select parameter. Notice that when
you select a new item in the first ListView control, the second
ListView control displays matching names. Here is the markup:
ID="lstPeople"
DataSourceID="dbPeople"
runat="server">
ID="itemPlaceholder"
runat="server" />
|
In order connect to the Person table you will need to connect to a
database. So first you must set the ConnectionString property to a
valid connection string in the web.config as well as in the markup
under the SqlDataSource.
The SqlDataSource data source control represents data in an SQL
relational database to data-bound controls like the ListView that we
just went through. You can use the SqlDataSource control in conjunction
with a data-bound control to retrieve data from a relational database
and to display, edit, and sort data on a Web page with little or no
code.
ID="dbPeopleCategory"
SelectCommand="SELECT Id, Name FROM Person"
ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" runat="server" />
ID="dbPeople"
SelectCommand="SELECT City FROM Person
WHERE Id=@Id"
ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>"
runat="server">
Name="Id"
ControlID="lstPeopleCategories" />
|
By using the DataSourceID property, it enables you to bind the
Listview control to a data source control, such as the SqlDataSource
control. We encourage this approach because it allows the ListView
control to take advantage of the capabilities of the data source
control. Plus, it also gives you built-in functionality for sorting,
paging, inserting, deleting, and updating.
We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
|
