It might not sound like that much of a tall order, but I couldn’t find a single working example of this online- there were plenty of nested listview’s simply spitting out the data, but they all seemed to fall apart when you wanted to perform CRUD operations on the records in the nested ListView.
I eventually got this going today, after spending far longer than i ever imagined i would on it- the solution in hindsight seems obvious, but they always do- figured i would post here for anyone else who gives this ago, or for when i’ve totally forgotten about this whole episode, in about a months time;
Create your two ListViews- make sure your nested list view is in the “SelectedItemTemplate” and not the “EditItemTemplate” as i tried initially (doh!). When a row is selected in the ListView, the SelectedValue (or SelectedDataKey) property is set- you can then use this to feed a parameter of the child list view’s SQL/Object/Linq/Whatever data source.
Here is the complete ASPX markup- there is no code behind used at all.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="ListViewExample._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>ListView Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="QuizList" runat="server" DataSourceID="QuizData"
InsertItemPosition="LastItem" DataKeyNames="id">
<ItemTemplate>
<tr style="background-color: #E0FFFF;color: #333333;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete"
Text="Delete" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
<asp:Button ID="SelectButton" runat="server" CommandName="Select" Text="Select" />
</td>
<td>
<asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="QuizTitleLabel" runat="server" Text='<%# Eval("QuizTitle") %>' />
</td>
</tr>
</ItemTemplate>
<SelectedItemTemplate>
<tr style="background-color: #E0FFFF;color: #333333;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete"
Text="Delete" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
</td>
<td>
<asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="QuizTitleLabel" runat="server" Text='<%# Eval("QuizTitle") %>' />
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<asp:ListView ID="QuestionList" runat="server" DataSourceID="QuestionData"
InsertItemPosition="LastItem" DataKeyNames="id">
<ItemTemplate>
<tr style="background-color:#DCDCDC;color: #000000;">
<td>
<asp:Button ID="DeleteButton" runat="server"
CommandName="Delete" Text="Delete" />
<asp:Button ID="EditButton" runat="server"
CommandName="Edit" Text="Edit" />
</td>
<td>
<asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="QuestionLabel" runat="server"
Text='<%# Eval("Question") %>' />
</td>
</tr>
</ItemTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
</td>
<td>
</td>
<td>
<asp:TextBox ID="QuestionTextBox" runat="server"
Text='<%# Bind("Question") %>' />
</td>
</tr>
</InsertItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr id="Tr2" runat="server" style="background-color:#DCDCDC;color: #000000;">
<th id="Th1" runat="server">
</th>
<th id="Th2" runat="server">
Id</th>
<th id="Th3" runat="server">
Question</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr3" runat="server">
<td id="Td2" runat="server"
style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;">
</td>
</tr>
</table>
</LayoutTemplate>
<EditItemTemplate>
<tr style="background-color:#008A8C;color: #FFFFFF;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
<asp:HiddenField ID="HiddenField1" runat="server" value='<%# Bind("QuizId") %>'/>
</td>
<td>
<asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:TextBox ID="QuestionTextBox" runat="server"
Text='<%# Bind("Question") %>' />
</td>
</tr>
</EditItemTemplate>
<SelectedItemTemplate>
<tr style="background-color:#008A8C;font-weight: bold;color: #FFFFFF;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete"
Text="Delete" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
</td>
<td>
<asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:Label ID="QuestionLabel" runat="server" Text='<%# Eval("Question") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
</td>
</tr>
</SelectedItemTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
</td>
<td>
</td>
<td>
<asp:TextBox ID="QuizTitleTextBox" runat="server"
Text='<%# Bind("QuizTitle") %>' />
</td>
</tr>
</InsertItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1"
style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color: #E0FFFF;color: #333333;">
<th runat="server">
</th>
<th runat="server">
Id</th>
<th runat="server">
QuizTitle</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server"
style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<EditItemTemplate>
<tr style="background-color: #999999;">
<td>
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
</td>
<td>
<asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
</td>
<td>
<asp:TextBox ID="QuizTitleTextBox" runat="server"
Text='<%# Bind("QuizTitle") %>' />
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="QuizData" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDBConnection %>"
DeleteCommand="DeleteQuiz" DeleteCommandType="StoredProcedure"
InsertCommand="UpdateQuiz" InsertCommandType="StoredProcedure" SelectCommand="GetAllQuizes"
SelectCommandType="StoredProcedure" UpdateCommand="UpdateQuiz"
UpdateCommandType="StoredProcedure">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Id" Type="Int32" />
<asp:Parameter Name="QuizTitle" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Id" Type="Int32" />
<asp:Parameter Name="QuizTitle" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="QuestionData" runat="server"
ConnectionString="<%$ ConnectionStrings:TestDBConnection %>"
DeleteCommand="DeleteQuestion" DeleteCommandType="StoredProcedure"
InsertCommand="InsertQuestion" InsertCommandType="StoredProcedure"
ProviderName="System.Data.SqlClient" SelectCommand="GetQuestionsByQuizId"
SelectCommandType="StoredProcedure" UpdateCommand="UpdateQuestion"
UpdateCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="QuizList" Name="QuizId"
PropertyName="SelectedValue" Type="Int32" DefaultValue="" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Id" Type="Int32" />
<asp:Parameter Name="QuizId" Type="Int32" />
<asp:Parameter Name="Question" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Id" Type="Int32" />
<asp:ControlParameter ControlID="QuizList" Name="QuizId"
PropertyName="SelectedValue" Type="Int32" DefaultValue="" />
<asp:Parameter Name="Question" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Related posts:
- How To Display Hierarchical Data Using Nested Repeater Controls and Visual C# .NET
- Consuming RSS Feeds using ASP.net controls
- Stop the “web.config” being inherited by child applications in sub folders
- Globalization “Current Culture” settings in the web.config (ASP.NET)
- Conditional logic in ListView ItemTemplate with DataBinder.Eval
#1 by Frankie on December 26, 2009 - 23:24
Neat example.. Would it be possible for you to share the source code (Stored Procedures)? I would like to see it run on my local computer if possible.
Thanks so much!
Frankie
P.S. Have you ever tried to use the listview to dynamically build it with variable number of columns (chooseable by the user).. So it is still usable for CRUD?
I have yet to see examples on the internet.
#2 by shawson on December 30, 2009 - 00:22
I’m out off the office until new years, but when i get back i shall dig them out for you so you can see the method signitures (which i guess is what you’re after)
#3 by Robert Herrington on March 5, 2012 - 19:43
YOU sir, are a gentleman and a scholar. I used this structure to
build an edit form for a master ListView that represents t4 different table so it looks like a single record to the user. I even nested a ListView in a nested ListView. It worked perfectly the first time. I found NO other code on the internet that included the entire example. I thank you!
The only code-behind I needed to add was in the ItemUpdated to update the Items in the support tables:
Protected Sub lvwName_ItemUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ListViewUpdatedEventArgs) Handles lvwName.ItemUpdated
‘ Now update the schedules (daily, weekly, monthly also)
Dim lvwSchedules As ListView = CType(Find(lvwName, “lvwSchedules”), ListView)
lvwSchedules.UpdateItem(0, True)
Dim lvwDaily As ListView = CType(Find(lvwSchedules, “lvwDaily”), ListView)
lvwDaily.UpdateItem(0, True)
Dim lvwWeekly As ListView = CType(Find(lvwSchedules, “lvwWeekly”), ListView)
lvwWeekly.UpdateItem(0, True)
Dim lvwMonthly As ListView = CType(Find(lvwSchedules, “lvwMonthly”), ListView)
lvwMonthly.UpdateItem(0, True)
End Sub
#4 by Bryan on May 10, 2012 - 20:49
Thanks for the simple, clear, and complete example!!
I have been looking for a few weeks through so many forums, books, etc, on a clear explanation and example on how to implement nested ASP.Net Listviews using stored procedures.
You definitely are deserving of a gold star, thanks for posting this, it has helped me understand how to use the select parameters, control parameters, etc. better than any other source of information that I had found thus far.
#5 by Bryan on May 10, 2012 - 21:03
One question.
In the top-level ListView, how would I use a SelectParameter for the SelectCommands and pass into the parameter a key-value that is set through a passed-in Session value?
I think that I need to somehow use the code-block
?
#6 by Bryan on May 10, 2012 - 23:28
I figured out my question.
For the SelectParameter of the Top-level listView, I used a ControlParameter, which took as a value the selected value of the FormView that is on my page.
#7 by Bryan on May 10, 2012 - 23:30
I do have another question.
I would have thought that the sqlDataSource for the nested listView would have had to have been placed at the same level as the nested listView aspx code.
What is the standard, or the rule for the placement of sqlDataSource aspx code?
#8 by shawson on May 15, 2012 - 16:29
Thanks- glad this could help! Not sure what the standard would be- I don’t think it makes a difference where the sql data source is placed, just so long as it is defined somewhere on the page.