How to develop this ListView which depends on another ListView?

I am a new ASP.NET developer and I am trying to develop a simple Quiz Engine that will allow the System Administrator to create quizzes using two ListViews. The first ListView for inserting the Quiz title and description, and the second ListView is for inserting the question, answers (different number of answers), correct Answer, Answer Explanation, Question Order.

I have the following database design:

Quiz Table: QuizID, Title, Description
Question Table: QuestionID, Question, QuestionOrder, AnswerExplanation
QuestionImage Table: ID, QuestionID, URL
Answer Table: AnswerID, Answer
QuizContent Table: ID, QuizID, QuestionID, AnswerID

The requirements that I have let me confused with binding the second ListView with the data:

  1. each quiz has a different number of questions and each question has different number of possible answers. For example, in one of the quizzes, I have two questions. In the first question, I have four possible answers, and the second question will be True or False question.
  2. some questions may have some images.

This ListView should support CRUDE operations. So How to do that?

My ASP.NET Code for the first ListView:

<asp:ListView ID="ListView1" runat="server" DataKeyNames="QuizID" 
                DataSourceID="SqlDataSource1" InsertItemPosition="LastItem" >

                <EditItemTemplate>
                    <tr style="">
                        <td>
                            <asp:ImageButton ID="UpdateButton" ImageUrl="Images/icons/update24.png" Width="20px" runat="server" CommandName="Update" />

                            <asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/cancel324.png" Width="20px" runat="server" CommandName="Cancel" />
                        </td>
                        <td>
                            <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="DescriptionTextBox" runat="server" 
                                Text='<%# Bind("Description") %>' />
                        </td>
                    </tr>
                </EditItemTemplate>
                <EmptyDataTemplate>
                    <table id="Table1" runat="server" style="">
                        <tr>
                            <td>
                                No data was returned.</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <InsertItemTemplate>
                    <tr style="">
                        <td>
                            <asp:ImageButton ID="InsertButton" ImageUrl="Images/icons/create 2 48.png" Width="20px" runat="server" CommandName="Insert" />

                            <asp:ImageButton ID="CancelButton" ImageUrl="images/clear3.png" Width="20px" runat="server" CommandName="Cancel" />
                        </td>

                        <%--<td>
                            &nbsp;</td>--%>
                        <td>
                            <asp:TextBox ID="TitleTextBox" runat="server" Text='<%# Bind("Title") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="DescriptionTextBox" runat="server" 
                                Text='<%# Bind("Description") %>' />
                        </td>
                    </tr>
                </InsertItemTemplate>
                <ItemTemplate>
                    <tr style="">
                        <td>
                            <asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" Width="20px" runat="server" CommandName="Delete" />

                            <asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit224.png" Width="20px" runat="server" CommandName="Edit" />

                            <asp:ImageButton ID="SelectButton" ImageUrl="images/select.png" Width="20px" runat="server" CommandName="Select" />
                            <%--<asp:Button ID="SelectButton" runat="server" CommandName="Select" Text="Select" />--%>
                        </td>
                        <%--<td>
                            <asp:Label ID="QuizIDLabel" runat="server" 
                                Text='<%# Eval("QuizID") %>' />
                        </td>--%>
                        <td>
                            <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
                        </td>
                        <td>
                            <asp:Label ID="DescriptionLabel" runat="server" 
                                Text='<%# Eval("Description") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <LayoutTemplate>
                    <div ><table id="thetable" width="97%" cellpadding="0px" cellspacing="0px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
                        <thead>
                            <tr style="background-color:#C6D7B5;">
                                <th style="border-bottom:2px solid #003366; ">...</th>
                                <th style="border-bottom:2px solid #003366; ">Title</th>
                                <th style="border-bottom:2px solid #003366; ">Description</th>
                            </tr>
                       </thead>
                       <tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
                    </table></div>
                </LayoutTemplate>
                <SelectedItemTemplate>
                    <tr style="">
                        <td>
                            <asp:ImageButton ID="DeleteButton" ImageUrl="images/delete24.png" Width="20px" runat="server" CommandName="Delete" />

                            <asp:ImageButton ID="EditButton" ImageUrl="images/edit224.png" Width="20px" runat="server" CommandName="Edit" />
                        </td>
                        <%--<td>
                            <asp:Label ID="QuizIDLabel" runat="server" 
                                Text='<%# Eval("QuizID") %>' />
                        </td>--%>
                        <td>
                            <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
                        </td>
                        <td>
                            <asp:Label ID="DescriptionLabel" runat="server" 
                                Text='<%# Eval("Description") %>' />
                        </td>
                    </tr>
                </SelectedItemTemplate>
            </asp:ListView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:QuizSysDBConnectionString %>" 

                SelectCommand="SELECT * FROM [Quiz]" 
                DeleteCommand="DELETE FROM [Quiz] WHERE [QuizID] = @QuizID" 
                InsertCommand="INSERT INTO [Quiz] ([Title], [Description]) VALUES (@Title, @Description)" 


                UpdateCommand="UPDATE [Quiz] SET [Title] = @Title, [Description] = @Description WHERE [QuizID] = @QuizID">
                <DeleteParameters>
                    <asp:Parameter Name="QuizID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="Title" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="Title" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                    <asp:Parameter Name="QuizID" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>

And my code for the Second ListView:

<div align="center">
        <asp:ListView ID="ListView2" runat="server" DataSourceID="SqlDataSource2" 
            DataKeyNames="QuestionID" InsertItemPosition="LastItem">

            <EditItemTemplate>

                <tr style="background-color: #FFCC66;color: #000080;">
                    <td>
                        <asp:ImageButton ID="UpdateButton" ImageUrl="Images/icons/update24.png" Width="20px" runat="server" CommandName="Update" />

                        <asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/cancel324.png" Width="20px" runat="server" CommandName="Cancel" />
                    </td>
                    <%--<td>
                        <asp:Label ID="QuestionIDLabel1" runat="server" 
                            Text='<%# Eval("QuestionID") %>' />
                    </td>--%>
                    <td>
                        <asp:TextBox ID="QuestionTextBox" runat="server" Text='<%# Bind("Question") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="Answer1TextBox" runat="server" Text='<%# Bind("Answer") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="CorrectAnswerTextBox" runat="server" 
                            Text='<%# Bind("CorrectAnswer") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="AnswerExplanationTextBox" runat="server" 
                            Text='<%# Bind("AnswerExplanation") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="QuestionOrderTextBox" runat="server" 
                            Text='<%# Bind("QuestionOrder") %>' CssClass="textbox" />
                    </td>
                </tr>
            </EditItemTemplate>

            <EmptyDataTemplate>
                <table id="Table2" runat="server" 
                    style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                    <tr>
                        <td>
                            No data was returned.</td>
                    </tr>
                </table>
            </EmptyDataTemplate>

            <InsertItemTemplate>
                <tr style="">
                    <td>
                        <asp:ImageButton ID="ImageButton1" ImageUrl="images/insert.png" Width="20px" runat="server" CommandName="Insert" />

                        <asp:ImageButton ID="CancelButton" ImageUrl="images/clear3.png" Width="20px" runat="server" CommandName="Cancel" />
                    </td>
                    <%--<td>
                        &nbsp;</td>--%>
                    <td>
                        <asp:TextBox ID="QuestionTextBox" runat="server" Text='<%# Bind("Question") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="AnswerTextBox" runat="server" Text='<%# Bind("Answer1") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <%-- to hide the bollon when mouse out, just add onmouseout="BalloonPopupControlBehavior.hidePopup();  --%>
                        <asp:TextBox ID="CorrectAnswerTextBox" runat="server" Text='<%# Bind("CorrectAnswer") %>' CssClass="textbox"/>
                    </td>
                    <td>
                        <asp:TextBox ID="AnswerExplanationTextBox" runat="server" Text='<%# Bind("AnswerExplanation") %>' CssClass="textbox" />
                    </td>
                    <td>
                        <asp:TextBox ID="QuestionOrderTextBox" runat="server" Text='<%# Bind("QuestionOrder") %>' CssClass="textbox" />
                    </td>
                </tr>

                <%-- --%>
                <ajaxtoolkit:balloonpopupextender ID="BalloonPopupExtender1" runat="server"
                                            TargetControlID="CorrectAnswerTextBox" BalloonPopupControlID="pnlBallon"
                                            Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small" 
                                            CustomCssUrl="ballonPopupStyle" 
                    CustomClassName="oval" UseShadow="true" ScrollBars="Auto" 
                                            DisplayOnMouseOver="false" DisplayOnFocus="true" 
                    DisplayOnClick="true" >
                </ajaxToolkit:BalloonPopupExtender>

                <asp:Panel ID="pnlBallon" runat="server">
                    Please enter the letter of the correct answer A, B, C, D.
                </asp:Panel>

            </InsertItemTemplate>

            <ItemTemplate>
                <tr style="background-color: #FFFBD6;color: #333333;">
                    <td>
                        <asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" Width="20px" runat="server" CommandName="Delete" />

                            <asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit224.png" Width="20px" runat="server" CommandName="Edit" />
                    </td>
                    <td>
                        <asp:Label ID="QuestionLabel" runat="server" Text='<%# Eval("Question") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Answer1Label" runat="server" Text='<%# Eval("Answer") %>' />
                    </td>
                    <td>
                        <asp:Label ID="CorrectAnswerLabel" runat="server" 
                            Text='<%# Eval("CorrectAnswer") %>' />
                    </td>
                    <td>
                        <asp:Label ID="AnswerExplanationLabel" runat="server" 
                            Text='<%# Eval("AnswerExplanation") %>' />
                    </td>
                    <td>
                        <asp:Label ID="QuestionOrderLabel" runat="server" 
                            Text='<%# Eval("QuestionOrder") %>' />
                    </td>
                </tr>
            </ItemTemplate>

            <LayoutTemplate>
                <div><table id="thetable" width="97%" cellpadding="0px" cellspacing="0px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
                        <thead>
                            <tr style="background-color:#C6D7B5;">
                                <th style="border-bottom:2px solid #003366; ">...</th>
                                <th style="border-bottom:2px solid #003366; ">Question</th>
                                <th style="border-bottom:2px solid #003366; ">Answer</th>
                                <th style="border-bottom:2px solid #003366; ">Correct Answer</th>
                                <th style="border-bottom:2px solid #003366; ">Answer Explanation</th>
                                <th style="border-bottom:2px solid #003366; ">Question Order</th>
                                <th style="border-bottom:2px solid #003366; ">Image</th>
                            </tr>
                       </thead>
                       <tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
                </table></div>

            </LayoutTemplate>
            <SelectedItemTemplate>
                <tr style="background-color: #FFCC66;font-weight: bold;color: #000080;">
                    <td>
                        <asp:ImageButton ID="DeleteButton" ImageUrl="images/delete.png" Width="20px" runat="server" CommandName="Delete" />
                        <%--<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" 
                            Text="Delete" />--%>
                        <asp:ImageButton ID="EditButton" ImageUrl="images/edit.png" Width="20px" runat="server" CommandName="Edit" />
                        <%--<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />--%>
                    </td>
                    <td>
                        <asp:Label ID="QuestionLabel" runat="server" Text='<%# Eval("Question") %>' />
                    </td>
                    <td>
                        <asp:Label ID="Answer1Label" runat="server" Text='<%# Eval("Answer") %>' />
                    </td>
                    <td>
                        <asp:Label ID="CorrectAnswerLabel" runat="server" 
                            Text='<%# Eval("CorrectAnswer") %>' />
                    </td>
                    <td>
                        <asp:Label ID="AnswerExplanationLabel" runat="server" 
                            Text='<%# Eval("AnswerExplanation") %>' />
                    </td>
                    <td>
                        <asp:Label ID="QuestionOrderLabel" runat="server" 
                            Text='<%# Eval("QuestionOrder") %>' />
                    </td>
                </tr>
            </SelectedItemTemplate>
        </asp:ListView>
        </div>
        </ContentTemplate>
        </asp:UpdatePanel>

        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:QuizSysDBConnectionString %>" 
            SelectCommand="SELECT     dbo.Question.Question, dbo.Question.QuestionOrder, dbo.Question.AnswerExplanation, dbo.Answers.Answer, dbo.QuestionImage.URL
                            FROM         dbo.Question INNER JOIN
                                                  dbo.QuizContent ON dbo.Question.QuestionID = dbo.QuizContent.QuestionID INNER JOIN
                                                  dbo.Answers ON dbo.QuizContent.AnswerID = dbo.Answers.AnswerID INNER JOIN
                                                  dbo.Quiz ON dbo.QuizContent.QuizID = dbo.Quiz.QuizID LEFT OUTER JOIN
                                                  dbo.QuestionImage ON dbo.Question.QuestionID = dbo.QuestionImage.QuestionID
                            WHERE     (dbo.QuizContent.QuizID = @QuizID)">
            <SelectParameters>
                <asp:ControlParameter ControlID="ListView1" Name="QuizID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>

My problem now is in how I can let the Admin be able to enter the question with different number of answers as he wishes. Could anyone please help me in this?

Answers


I've been thinking about this and prototyping, and I think you would be better served by modifying the design. Instead of trying to do everything one one page in two listViews, perhaps it is preferable to simulate a workflow and spread this over mulitple pages. On the first page use your first listView, which implements the CRUD operations you desire on the Quiz(zes) table. Code it so that when a particular quiz is selected, you advance the work to a new page, either by passing the QuizID as a parameter in the URL - Example:

Response.Redirect("Questions.aspx?quiz_id=1024");

or as a session variable - Example:

Session["quiz_id"] = 1024; Response.Redirect("Questions.aspx");

at this point, you don't need this until later in the workflow, since you don't use QuizID in the Questions or Answers tables, but It will come in handy later. Code your listView for questions the same way you did for quizzes, and then advance to answers and repeat.

After the admin has given question and answers, direct them to an integration page (or pages), where now you can finally use the QuizID you've been carrying. Or you can provide a small listbox to choose a quiz, with each listBoxItem's text being the title and/or description, and the value being the QuizID.

Either Way, at this point you can add listBoxes for the Questions and Answers for what's available, and listBoxes next to them with what is selected. Add left and right arrow buttons to move the options back and forth for both sets of boxes.

At this point, add a save button to the page and on the click event, perform an insert on the QuizContents table, using the QuizID variable, and the QuestionIDs and AnswerIDs coming from the selected Question and Answer listboxes. You will have to loop this operation if you allow a multiselect mode in either of these listboxes.

Finally, have a confirmation page where they can search by QuizID and see all associated questions and answers at a glance.


Need Your Help

Java BufferedReader back to the top of a text file?

java file file-io text-files bufferedinputstream

I currently have 2 BufferedReaders initialized on the same text file. When I'm done reading the text file with the first BufferedReader, I use the second one to make another pass through the file f...

Accessing Web Scripts

c# web

I've recently been experimenting with C#s webbrowser and my curiosity has been peaked.. How does the browser actually access the webpage's code? I mean, the html, php, javascript, ajax, what have y...