2012-07-25 60 views
0

我是一名新的ASP.NET開發人員,我必須創建一個測驗引擎應用程序。我正在使用ListView在特定測驗下插入問題。如何在此ListView中插入用於插入其他內容的圖像?

我有以下的數據庫設計:

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

我現在想的是使管理員能夠將圖像使嵌入到這些問題的任何一個。 我該怎麼做,因爲我在數據庫中有兩個不同的表格?一個用於上述設計中顯示的問題和一個圖像。我有這個設計,因爲不是所有的問題都會有圖像。除此之外,我可能有兩個或三個問題或更多具有相同的圖像。

我知道我不應該張貼太多的代碼或信息,但我必須這樣做,要清楚:

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

      <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="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> 
        <%--<td> 
         <asp:TextBox ID="UrlTextBox" runat="server" Text='<%# Bind("Url") %>' /> 
        </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> 
         <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> 
        <%--<td> 
         <asp:FileUpload ID="ImageIDUploader" runat="server" size="10" /> 
         </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" /> 
        </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> 
        <%--<td> 
          <a href='<%# Eval("URL") %>' target="_blank"> 
           <asp:Label ID="ImageURLlbl" runat="server" Text='<%# Eval("URL") %>' /> 
          </a> 
         </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> 
           <th style="border-bottom:2px solid #003366; ">Image (URL)</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> 
        <%--<td> 
          <asp:Label ID="ImageURLlbl" runat="server" 
           Text='<%# Eval("URL") %>' /> 
         </td>--%> 
       </tr> 
      </SelectedItemTemplate> 
     </asp:ListView> 
     </div> 

     <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
      ConnectionString="<%$ ConnectionStrings:QuizSysDBConnectionString %>" 
      SelectCommand="SELECT  QuestionID, Question, QuestionOrder, AnswerExplanation 
          FROM   dbo.Question 
          WHERE  (QuestionID IN 
                 (SELECT DISTINCT QuestionID 
                 FROM   dbo.QuizContent 
                 WHERE  (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" DefaultValue="0" 
        PropertyName="SelectedValue" Type="Int32" /> 
      </SelectParameters> 
     </asp:SqlDataSource> 

那麼怎麼辦呢?

回答

1

不要在同一個列表視圖中添加圖像,而是要顯示選擇的現有圖像,並添加另一個選項以打開彈出窗口,其中包含所有圖像的列表以及用於上載新圖像的選項。

創建視圖結合起來的問題和圖像:

CREATE VIEW QuestionsView AS 
SELECT Question.*, QuestionImage.ID AS ImageID 
FROM Question LEFT OUTER JOIN QuestionImage ON Question.QuestionID = QuestionImage.QuestionID 

使用此視圖來選擇適合您的ListView記錄。

要顯示一個DropDownList:

<td> 
    <asp:DropDownList runat="server" DataSourceID="imagesDataSource" SelectedValue="<%# Bind("ImageID") %>" DataTextField="URL" DataValueField="ID" /> 
    <asp:SqlDataSource runat="server" ID="imagesDataSource" SelectCommand="SELECT * FROM QuestionImage" /> 
</td> 

更改爲使用存儲過程的更新是獲取每個綁定使用參數您的ListView數據源。

添加一個鏈接到打開圖片列表彈出。對於彈出窗口,您可以在此處使用其中一個示例:http://smashingspy.com/32-best-jquery-popup-window-dialog-box-example/

+0

由於我是新的ASP.NET開發人員,可否請您提供示例或代碼段? – 2012-07-25 06:42:43

+0

剛剛編輯我的答案 – 2012-07-25 06:58:29

+0

我可以使用SqlDataSource而不是ObjectDataSource嗎?此外,Image對象的QuestionID與您所假設的不一樣,所以它可以嗎? – 2012-07-25 07:02:19