I am a new ASP.NET developer and I have to create a quiz engine application. I am using three LiveView controls to show:
quiz information, question information (based on the selected quiz on the first ListView), and answers information (based on the selected question on the second ListView)
I have the following database design:
QuizContent Table: ID, QuizID, QuestionID, AnswerID, isCorrect
Quiz Table: QuizID, Title, Description, isSent
Question Table: QuestionID, Question, QuestionOrder, AnswerExplanation
Answers Table: AnswerID, Answer
What I want now is the following: when the user (who is the Admin) comes to the Quiz Engine Page, he should only see the first ListView which is mainly about the Quiz Information. And when he selects one of the quizzes, the second ListView will be displayed with the Question information of that selected quiz and so on for the third ListView. I am only facing problem in showing the second ListView. I don’t know how to show it.
So how to do that?
I know I should not post too much code or information, but I have to do it to make it clear:
<div align="center">
<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" ToolTip="Update" runat="server" CommandName="Update" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/cancel324.png" ToolTip="Cancel" 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/add24.png" ToolTip="Add" runat="server" CommandName="Insert" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/clear24.png" ToolTip="Cancel" runat="server" CommandName="Cancel" />
</td>
<%--<td>
</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" ToolTip="Delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" runat="server" CommandName="Edit" />
<asp:ImageButton ID="SelectButton" ImageUrl="Images/icons/select.png" ToolTip="Select" 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/icons/delete24.png" ToolTip="Delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" 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>
</div>
<br /><br />
<%--Second ListView that will contain the content of the quiz--%>
<div align="center">
<asp:ListView ID="ListView2" runat="server" DataSourceID="SqlDataSource2"
DataKeyNames="QuestionID" InsertItemPosition="LastItem" visible="false">
<EditItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="UpdateButton" ImageUrl="Images/icons/update24.png" ToolTip="Update" runat="server" CommandName="Update" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/cancel324.png" ToolTip="Cancel" 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") %>' />
</td>
<td>
<asp:TextBox ID="QuestionOrderTextBox" runat="server"
Text='<%# Bind("QuestionOrder") %>' />
</td>
<td>
<asp:TextBox ID="AnswerExplanationTextBox" runat="server"
Text='<%# Bind("AnswerExplanation") %>' />
</td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server"
style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="InsertButton" ImageUrl="Images/icons/add24.png" ToolTip="Add" runat="server" CommandName="Insert" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/clear24.png" ToolTip="Cancel" runat="server" CommandName="Cancel" />
</td>
<%--<td>
</td>--%>
<td>
<asp:TextBox ID="QuestionTextBox" runat="server"
Text='<%# Bind("Question") %>' />
</td>
<td>
<asp:TextBox ID="QuestionOrderTextBox" runat="server"
Text='<%# Bind("QuestionOrder") %>'/>
</td>
<td>
<asp:TextBox ID="AnswerExplanationTextBox" runat="server"
Text='<%# Bind("AnswerExplanation") %>' />
</td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" ToolTip="delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" runat="server" CommandName="Edit" />
<asp:ImageButton ID="SelectButton" ImageUrl="Images/icons/select.png" ToolTip="Select" runat="server" CommandName="Select" />
<%--<asp:Button ID="SelectButton" runat="server" CommandName="Select" Text="Select" />--%>
</td>
<td>
<asp:Label ID="QuestionLabel" runat="server" Text='<%# Eval("Question") %>' />
</td>
<td>
<asp:Label ID="QuestionOrderLabel" runat="server"
Text='<%# Eval("QuestionOrder") %>' />
</td>
<td>
<asp:Label ID="AnswerExplanationLabel" runat="server"
Text='<%# Eval("AnswerExplanation") %>' />
</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; ">Question Order</th>
<th style="border-bottom:2px solid #003366; ">Answer Explanation</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<SelectedItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" ToolTip="Delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" runat="server" CommandName="Edit" />
</td>
<td>
<asp:Label ID="QuestionLabel" runat="server" Text='<%# Eval("Question") %>' />
</td>
<td>
<asp:Label ID="QuestionOrderLabel" runat="server"
Text='<%# Eval("QuestionOrder") %>' />
</td>
<td>
<asp:Label ID="AnswerExplanationLabel" runat="server"
Text='<%# Eval("AnswerExplanation") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
</div>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:QuizSysDBConnectionString %>"
SelectCommand="SELECT [Question].* FROM [Question] INNER JOIN [QuizContent] ON [QuizContent].[QuizID] = @QuizID"
DeleteCommand="DELETE FROM [Question] WHERE [QuestionID] = @QuestionID"
InsertCommand="INSERT INTO [Question] ([Question], [QuestionOrder], [AnswerExplanation]) VALUES (@Question, @QuestionOrder, @AnswerExplanation)"
UpdateCommand="UPDATE [Question] SET [Question] = @Question, [QuestionOrder] = @QuestionOrder, [AnswerExplanation] = @AnswerExplanation WHERE [QuestionID] = @QuestionID">
<DeleteParameters>
<asp:Parameter Name="QuestionID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Question" Type="String" />
<asp:Parameter Name="QuestionOrder" Type="Int32" />
<asp:Parameter Name="AnswerExplanation" Type="String" />
<asp:ControlParameter ControlID="ListView1" Name="QuizID" PropertyName="SelectedValue" Type="Int32" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Question" Type="String" />
<asp:Parameter Name="QuestionOrder" Type="Int32" />
<asp:Parameter Name="AnswerExplanation" Type="String" />
</UpdateParameters>
<SelectParameters>
<asp:ControlParameter ControlID="ListView1" Name="QuizID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<br /><br />
<%--Third ListView that will contain the content of the quiz--%>
<div align="center">
<asp:ListView ID="ListView3" runat="server" DataSourceID="SqlDataSource3"
DataKeyNames="AnswerID" InsertItemPosition="LastItem">
<EditItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="UpdateButton" ImageUrl="Images/icons/update24.png" ToolTip="Update" runat="server" CommandName="Update" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/cancel324.png" ToolTip="Cancel" runat="server" CommandName="Cancel" />
</td>
<%--<td>
<asp:Label ID="AnswerIDLabel1" runat="server" Text='<%# Eval("AnswerID") %>' />
</td>--%>
<td>
<asp:TextBox ID="AnswerTextBox" runat="server"
Text='<%# Bind("Answer") %>' />
</td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server"
style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="InsertButton" ImageUrl="Images/icons/add24.png" ToolTip="Add" runat="server" CommandName="Insert" />
<asp:ImageButton ID="CancelButton" ImageUrl="Images/icons/clear24.png" ToolTip="Cancel" runat="server" CommandName="Cancel" />
</td>
<%--<td>
</td>--%>
<td>
<asp:TextBox ID="AnswerTextBox" runat="server"
Text='<%# Bind("Answer") %>'/>
</td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" ToolTip="Delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" runat="server" CommandName="Edit" />
</td>
<%--<td>
<asp:Label ID="AnswerIDLabel" runat="server" Text='<%# Eval("AnswerID") %>' />
</td>--%>
<td>
<asp:Label ID="AnswerLabel" runat="server" Text='<%# Eval("Answer") %>' />
</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; ">Answer</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<SelectedItemTemplate>
<tr style="">
<td>
<asp:ImageButton ID="DeleteButton" ImageUrl="Images/icons/delete24.png" ToolTip="Delete" runat="server" CommandName="Delete" />
<asp:ImageButton ID="EditButton" ImageUrl="Images/icons/edit24.png" ToolTip="Edit" runat="server" CommandName="Edit" />
</td>
<td>
<asp:Label ID="AnswerLabel" runat="server"
Text='<%# Eval("Answer") %>' />
</td>
</tr>
</SelectedItemTemplate>
</asp:ListView>
</div>
<asp:SqlDataSource ID="SqlDataSource3" runat="server"
ConnectionString="<%$ ConnectionStrings:QuizSysDBConnectionString %>"
SelectCommand="SELECT [Answers].* FROM [Answers] INNER JOIN [QuizContent] ON [QuizContent].QuestionID = @QuestionID"
DeleteCommand="DELETE FROM [Answers] WHERE [AnswerID] = @AnswerID"
InsertCommand="INSERT INTO [Answers] ([Answer]) VALUES (@Answer)"
UpdateCommand="UPDATE [Answers] SET [Answer] = @Answer WHERE [AnswerID] = @AnswerID">
<DeleteParameters>
<asp:Parameter Name="AnswerID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Answer" Type="String" />
<asp:ControlParameter ControlID="ListView2" Name="QuestionID" PropertyName="SelectedValue" Type="Int32" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Answer" Type="String" />
</UpdateParameters>
<SelectParameters>
<asp:ControlParameter ControlID="ListView2" Name="QuestionID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
NOTE:
I don’t have any code-behind. And again the problem is as following: when I run the code, I will see the three ListView controls. It should show only one of them. And when the user selects one of the rows, the second ListView will be displayed and so on for the third ListView.
OK I had already helped you with a similar question, this time, I decided to see exactly the problem so I created tables locally with your structure and I could replicate your problem
Basically your queries were wrong and I do not know how you were expecting to hide/show the
ListViewcontrols without writing code behind nor JavaScript…I must say that I agree with @GrayFox374 you should show more initiative…
Well anyhow…
I already tested this code and I think it’s exactly what you are looking for:
Basically when the page loads only the quizes table is visible, when a quiz is selected, if it has records, the questions table is shown and finally when you select a question, the answers table is shown only if it contains data.
Output
When page is loaded
When a quiz is selected
When a question is selected
Code behind
ASPX
Note: just showing the code I updated
Note, if this doesn’t work I would strongly recommend you to run the queries manually against your database to discard data issues
Well that’s it I hope I didn’t forget to add more modifications