I'm sure you're all familiar with editing records in a master/detail scenario with a GridView and DetailsView. There are probably a thousand tutorials on the 'net that show how to do this. So, when I happened upon a fellow on the ASP.NET forums asking about doing master/detail editing with the ListView instead of the GridView , my first thought was to post a link and tell him to have at it. However, to my surprise, a quick Google search didn't really reveal any good, straightforward examples. That being the case, I decided to work one up, which I'll share with you now.
The ListView is a new databound control introduced with the .NET Framework 3.5. You could think of the ListView as what you might get if a GridView and a Repeater had a baby. Like the GridView, the ListView can display, edit, delete, page, and sort records. And like the Repeater, the ListView is entirely template-driven. Also, the ListView supports inserting new records, functionality provided by neither the GridView nor the Repeater. In fact, due to the extreme flexibility of the ListView, you may find fewer situations in which building a master/detail interface using the DetailsView is needed.
The Solution
The example presented here doesn't show off any of the native data-manipulation prowess of the ListView. Instead, it only displays and allows user selection of individual records, and passes all of the insertion, editing, and deleting functionality to an accompanying DetailsView.Again, the tricky part is that with a ListView, you need to build your own presentation code. In the example, I'm displaying the records in a table; however, you could display the records however you want: as a bulleted list, a multicolumn grid, or totally free-form; whatever you want. You also need to provide buttons in the template to initiate the functionality you need. Here, in the ItemTemplate of the ListView, you'll see a button with CommandName="Select". That allows the datasource for the DetailsView to pick up the value of the record's primary key and fetch the individual record. Notice that in the SelectedItemTemplate, no button is defined. That means when a record is marked as selected in the ListView, the Select button won't appear.
The example presented here uses selected fields from the Employees table of the Northwind database, and also uses SqlDataSource for simplicity. If you have the Northwind database, you should be able to paste this code into a blank .aspx file and run it locally. Just be sure to change the connection strings in each SqlDataSource to point to your own Northwind database.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
head><body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="lvwEmployees" runat="server" DataKeyNames="EmployeeID" DataSourceID="SqlDataSourceEmpList">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
td><td>
<asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
td><td>
<asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
td><td>
<asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
td><td>
<asp:Button ID="SelectButton" runat="server" Text="Select" CommandName="Select" />
td>tr>ItemTemplate><SelectedItemTemplate>
<tr style="background-color: yellow; font-weight: bold;">
<td>
<asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
td><td>
<asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
td><td>
<asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
td><td>
<asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
td>tr>SelectedItemTemplate><LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="1" style="border-collapse: collapse;
border-width: 1px;"><tr runat="server" style="background-color: #DCDCDC; color: #000000;">
<th runat="server">
EmployeeID
th><th runat="server">
LastName
th><th runat="server">
FirstName
th><th runat="server">
Title
th>tr><tr id="itemPlaceholder" runat="server">
tr>table>td>tr>table>LayoutTemplate>asp:ListView> <asp:SqlDataSource ID="SqlDataSourceEmpList" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees] ORDER BY [EmployeeID]">
asp:SqlDataSource><br />
<asp:DetailsView ID="dvwEmployee" runat="server" DataSourceID="SqlDataSourceEmp"
AutoGenerateRows="False" DataKeyNames="EmployeeID">
<Fields>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True"
NewText="Add" ButtonType="Button" />
Fields>asp:DetailsView><asp:SqlDataSource ID="SqlDataSourceEmp" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)"
UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @EmployeeID">
<SelectParameters>
<asp:ControlParameter ControlID="lvwEmployees" Name="EmployeeID" PropertyName="SelectedValue"
Type="Int32" />
SelectParameters><DeleteParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" />
DeleteParameters><UpdateParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="EmployeeID" Type="Int32" />
UpdateParameters><InsertParameters>
<asp:Parameter Name="LastName" Type="String" />
<asp:Parameter Name="FirstName" Type="String" />
<asp:Parameter Name="Title" Type="String" />
InsertParameters>asp:SqlDataSource> div>form>body>html>
Hey, I didn't say it was gonna be fancy. ;) That part is up to you!
No comments:
Post a Comment