Learn how to display a master/detail form with a ListView control using ASP.NET 3.5 C#
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 <asp:ListView> 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.
Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!
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:
| <style type="text/css"> .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; } </style> |
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.
| <body> <form id="myForm" runat="server"> <div> <asp:ListView ID="lstPeopleCategories" DataSourceID="dbPeopleCategory" DataKeyNames="Id" runat="server"> <LayoutTemplate> <div class="categoryContainer"> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </div> </LayoutTemplate> <ItemTemplate> <div> <asp:LinkButton ID="lnkSelect" Text='<%# Eval("Name") %>' CommandName="Select" runat="server" /> </div> </ItemTemplate> <SelectedItemTemplate> <div id="selected"> <%# Eval("Name") %> </div> </SelectedItemTemplate> </asp:ListView> |
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:
| <asp:ListView ID="lstPeople" DataSourceID="dbPeople" runat="server"> <LayoutTemplate> <ol> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </ol> </LayoutTemplate> <ItemTemplate> <li> <%# Eval("City") %> </ItemTemplate> </asp:ListView> |
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. Here is an example of a connection string with the web.config:
| <connectionStrings> <add name="PeopleConnectionString" connectionString="Data Source=(local);Initial Catalog=People;Integrated Security=True" providerName="System.Data.SqlClient"/> </connectionStrings> y> |
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.
| <asp:SqlDataSource ID="dbPeopleCategory" SelectCommand="SELECT Id, Name FROM Person" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" runat="server" /> <asp:SqlDataSource ID="dbPeople" SelectCommand="SELECT City FROM Person WHERE Id=@Id" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" runat="server"> <SelectParameters> <asp:ControlParameter Name="Id" ControlID="lstPeopleCategories" /> </SelectParameters> |
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.
No comments:
Post a Comment