Asp.net nested ListView control’s, with edit functionality- example


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>
                                        &nbsp;</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>
                        &nbsp;</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>
  1. #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. #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. #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. #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. #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. #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. #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. #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.

  9. #9 by Alan on August 7, 2012 - 21:22

    I have a query in a sqldatasource. I need to select based on 3 different controls in the listview LvInjury. They are the datakeys. The Case ID, the Claim Number and the Loss Code to display the loss detail. You example seems to only search on one field. Any suggestions I tried LvInjury$CaseID to no avail.

(will not be published)


I absolutely love these. They came at the lace wigs are good quality, and very soft. Absolutely love these extensions. I just love this hair. Hair came on time, I waited until after hair extensions uk very full, no shedding and it is been installed for 3 weeks now and yes I jus ordered 3 more bundles. Lol. I definitely recommend this company for your bundles ladies. They are soft, hair bundles on the head for human hair wigs and I would continue to recommend them. I have thinner hair so they cover and blend nicely.