c# - 別の ListView に依存するこの ListView を開発する方法は?

Question

私は新しい ASP.NET 開発者で、システム管理者が 2 つの ListView を使用してクイズを作成できる単純なクイズエンジンを開発しようとしています。最初の ListView はクイズのタイトルと説明を挿入するためのもので、2 つ目の ListView は質問、回答 (回答の数が異なる)、正解、回答の説明、質問の順序を挿入するためのものです。

次のデータベース設計があります。

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

2番目のListViewをデータにバインドすることで混乱させた要件：

各クイズには異なる数の質問があり、各質問には異なる数の可能な回答があります。たとえば、クイズの 1 つで、2 つの質問があります。最初の質問には 4 つの回答があり、2 番目の質問は正誤問題になります。
一部の質問には画像が含まれている場合があります。

この ListView は、CRUDE 操作をサポートする必要があります。それで、それを行う方法は？

最初の ListView の ASP.NET コード:

<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>

そして、2番目の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>

私の問題は、管理者が希望どおりに異なる数の回答で質問を入力できるようにする方法です。誰でもこれで私を助けてもらえますか？

score 0 · Accepted Answer

私はこれとプロトタイピングについて考えてきました、そして私はあなたがデザインを修正することによってよりよく役立つと思います。2つのlistViewで1ページすべてを実行しようとするのではなく、ワークフローをシミュレートして、これを複数のページに分散させることをお勧めします。最初のページで、最初のlistViewを使用します。これは、Quiz（zes）テーブルで必要なCRUD操作を実装します。特定のクイズが選択されたときに、URLのパラメーターとしてQuizIDを渡すことにより、作業を新しいページに進めるようにコーディングします-例：

Response.Redirect（ "Questions.aspx？quiz_id = 1024"）;

またはセッション変数として-例：

Session ["quiz_id"] = 1024; Response.Redirect（ "Questions.aspx"）;

この時点では、質問または回答のテーブルでQuizIDを使用しないため、ワークフローの後半までこれは必要ありませんが、後で役立ちます。クイズの場合と同じ方法で質問のlistViewをコーディングしてから、回答に進んで繰り返します。

管理者が質問と回答を提供した後、統合ページ（または複数のページ）に移動します。ここで、これまで持っていたQuizIDを最終的に使用できます。または、クイズを選択するための小さなリストボックスを提供できます。各listBoxItemのテキストはタイトルや説明であり、値はQuizIDです。

いずれにせよ、この時点で、利用可能なものの質問と回答のリストボックスを追加し、それらの横に選択されたもののリストボックスを追加できます。左右の矢印ボタンを追加して、両方のボックスセットのオプションを前後に移動します。

この時点で、ページに保存ボタンを追加し、クリックイベントで、QuizID変数、および選択した質問と回答のリストボックスからのQuestionIDとAnswerIDを使用して、QuizContentsテーブルに挿入を実行します。これらのリストボックスのいずれかで複数選択モードを許可する場合は、この操作をループする必要があります。

最後に、QuizIDで検索して、関連するすべての質問と回答を一目で確認できる確認ページを用意します。

c# - 別の ListView に依存するこの ListView を開発する方法は?

1 に答える 1

Related

Reference