Gridview中CollapsiblePanelExtender的未知控制錯誤

Question

我正在解決gridview中的編碼挑戰，我試圖從Ajax Control Toolkit（在Visual Studio 2012中）插入CollapsiblePanelExtender到一個複選框部分。我希望做的是使整個複選框部分摺疊並根據用戶請求進行擴展。

我面臨的挑戰（asp代碼如下 - 無cs代碼）是在「< asp：Panel ID =」pnlClick「...」部分代碼的下方有一條綠色波浪線「面板」，並與下面的錯誤（從調試輸出注）的「CheckBoxField字段」每個實例下：

Element 'Panel' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing. 

Element 'CheckBoxField' is not a known element. This can occur if there is a compilation error in the Web site, or the web.config file is missing. 

此外，當我切換到這個頁面，我得到以下錯誤的設計視圖：

Error Creating Control - GridView1 

System.Web.UI.WebControls.DataControlFieldCollection must have items of type 'System.Web.UI.WebControlField'. 'asp:Panel' is of type 'System.Web.UI.WebControls.Panel'. 

這個難題的SQL部分是堅如磐石的，所以我不需要assitanc與此同時。我是Ajax Control Toolkit的新手，所以我正在試圖確定我需要做些什麼來完成這項工作（如果這是我嘗試完成的正確解決方案）。我一直在通過谷歌尋求答案，但沒有任何幫助我用gridview解決這個問題。下面的代碼是在過去六個月到一年內嘗試將其他非GridView解決方案拼湊在一起的產物。我可能錯過了一些東西，我敢打賭，這可能是一件簡單的事情，需要加以解決。如果這甚至可能，我在這裏錯過了什麼（下面）？

如果任何人也知道一個很好的非MSDN引用與例子，將不勝感激。

.aspx的代碼：

<%@ Page Title="Test Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="form2.aspx.cs" Inherits="form2" %> 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server"> 
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager> 
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None"> 
     <AlternatingRowStyle BackColor="White" /> 
     <Columns> 
      <asp:CommandField ShowEditButton="True" /> 
      <asp:BoundField DataField="Field 1" HeaderText="Field 1" SortExpression="Field 1" /> 
      <asp:BoundField DataField="Field 2" HeaderText="Field 2" SortExpression="Field 2" /> 
      <asp:BoundField DataField="Field 3" HeaderText="Field 3" SortExpression="Field 3" /> 
      <asp:BoundField DataField="Field 4" HeaderText="Field 4" SortExpression="Field 4" /> 
      <asp:BoundField DataField="Field 5" HeaderText="Field 5" SortExpression="Field 5" /> 
      <asp:BoundField DataField="Field 6" HeaderText="Field 6" SortExpression="Field 6" /> 
      <asp:BoundField DataField="Field 7" HeaderText="Field 7" SortExpression="Field 7" /> 
      <asp:BoundField DataField="Field 8" HeaderText="Field 8" SortExpression="Field 8" /> 
      <asp:BoundField DataField="Field 9" HeaderText="Field 9" SortExpression="Field 9" /> 
      <asp:Panel ID="pnlClick" runat="server" CssClass="collapsiblepanelCSS"> 
       <div style="background-color:blue;height:30px; vertical-align: middle"> 
        <div style="float: left;color:white;padding: 5px 5px 0 0 "> 
         Server List Collapsable Panel 
        </div> 
        <div style="float: right; color: white; padding: 5px 5px 0 0" id="divshow"> 
         <asp:Label ID="lblMessage" runat="server" Text="Label" /> 
         </div> 
        <div style="clear:both"> 
       </div> 
        </div> 
        </asp:Panel> 
      <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="collapsiblepanelCSS"> 
      <asp:CheckBoxField DataField="Check Box 1" HeaderText="Check Box 1" SortExpression="Check Box 1" /> 
      <asp:CheckBoxField DataField="Check Box 2" HeaderText="Check Box 2" SortExpression="Check Box 2" /> 
      <asp:CheckBoxField DataField="Check Box 3" HeaderText="Check Box 3" SortExpression="Check Box 3" /> 
      <asp:CheckBoxField DataField="Check Box 4" HeaderText="Check Box 4" SortExpression="Check Box 4" /> 
      <asp:CheckBoxField DataField="Check Box 5" HeaderText="Check Box 5" SortExpression="Check Box 5" /> 
      <asp:CheckBoxField DataField="Check Box 6" HeaderText="Check Box 6" SortExpression="Check Box 6" /> 
      <asp:CheckBoxField DataField="Check Box 7" HeaderText="Check Box 7" SortExpression="Check Box 7" /> 
      <asp:CheckBoxField DataField="Check Box 8" HeaderText="Check Box 8" SortExpression="Check Box 8" /> 
      <asp:CheckBoxField DataField="Check Box 9" HeaderText="Check Box 9" SortExpression="Check Box 9" /> 
      <asp:CheckBoxField DataField="Check Box 10" HeaderText="Check Box 10" SortExpression="Check Box 10" /> 
      <asp:CheckBoxField DataField="Check Box 11" HeaderText="Check Box 11" SortExpression="Check Box 11" /> 
      <asp:CheckBoxField DataField="Check Box 12" HeaderText="Check Box 12" SortExpression="Check Box 12" /> 
       </asp:Panel> 
      <CC1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" Collapsed="true" ExpandControlID="pnlClick" TextLabelID="lblMessage" CollapsedText="Click To Show" ExpandedText="Click To Hide" ImageControlID="imgArrows" ExpandDirection="Vertical" TargetControlID="pnlCollapsable" ScrollContents="false" runat="server"></CC1:CollapsiblePanelExtender> 

      <asp:BoundField DataField="Field 10" HeaderText="Field 10" SortExpression="Field 10" /> 
      <asp:BoundField DataField="Field 11" HeaderText="Field 11" SortExpression="Field 11" /> 
      <asp:BoundField DataField="Field 12" HeaderText="Field 12" SortExpression="Field 12" /> 
      <asp:CommandField ShowEditButton="True" /> 
     </Columns> 
     <EditRowStyle BackColor="#2461BF" /> 
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
     <RowStyle BackColor="#EFF3FB" /> 
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
     <SortedAscendingCellStyle BackColor="#F5F7FB" /> 
     <SortedAscendingHeaderStyle BackColor="#6D95E1" /> 
     <SortedDescendingCellStyle BackColor="#E9EBEF" /> 
     <SortedDescendingHeaderStyle BackColor="#4870BE" /> 
    </asp:GridView> 

    <sql connection strings, insert/update SQL code, update parameters, and closing ASP/HTML tags> 

Answer 1

一切，是你列集合的直接孩子需要一個DataControlField型控制（CheckBoxField字段，ButtonField字段等）。

因此。您需要將Panel中的所有內容放入<Templatefield>，這樣您可以創建自定義字段。

而你需要所有這些CheckBoxFields只是普通的複選框的那些的CheckBox轉換，綁定到你想要的數據字段，然後你要善於

<asp:TemplateField> 
    <asp:Panel ID="pnlClick" runat="server" CssClass="collapsiblepanelCSS"> 
     <div style="background-color:blue;height:30px; vertical-align: middle"> 
      <div style="float: left;color:white;padding: 5px 5px 0 0 "> 
       Server List Collapsable Panel 
      </div> 
      <div style="float: right; color: white; padding: 5px 5px 0 0" id="divshow"> 
       <asp:Label ID="lblMessage" runat="server" Text="Label" /> 
      </div> 
      <div style="clear:both"> 
      </div> 
     </div> 
    </asp:Panel> 
    <asp:Panel ID="pnlCollapsable" runat="server" Height="0" CssClass="collapsiblepanelCSS"> 
     <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%=Eval("Check Box 1") %>' Text="Check Box 1" /> 
     <asp:CheckBox ID="CheckBox2" runat="server" Checked='<%=Eval("Check Box 2") %>' Text="Check Box 2" /> 
     <asp:CheckBox ID="CheckBox3" runat="server" Checked='<%=Eval("Check Box 3") %>' Text="Check Box 3" /> 
     <asp:CheckBox ID="CheckBox4" runat="server" Checked='<%=Eval("Check Box 4") %>' Text="Check Box 4" /> 
     <asp:CheckBox ID="CheckBox5" runat="server" Checked='<%=Eval("Check Box 5") %>' Text="Check Box 5" /> 
     <asp:CheckBox ID="CheckBox6" runat="server" Checked='<%=Eval("Check Box 6") %>' Text="Check Box 6" /> 
     <asp:CheckBox ID="CheckBox7" runat="server" Checked='<%=Eval("Check Box 7") %>' Text="Check Box 7" /> 
     <asp:CheckBox ID="CheckBox8" runat="server" Checked='<%=Eval("Check Box 8") %>' Text="Check Box 8" /> 
     <asp:CheckBox ID="CheckBox9" runat="server" Checked='<%=Eval("Check Box 9") %>' Text="Check Box 9" /> 
     <asp:CheckBox ID="CheckBox10" runat="server" Checked='<%=Eval("Check Box 10") %>' Text="Check Box 10" /> 
     <asp:CheckBox ID="CheckBox11" runat="server" Checked='<%=Eval("Check Box 11") %>' Text="Check Box 11" /> 
     <asp:CheckBox ID="CheckBox12" runat="server" Checked='<%=Eval("Check Box 12") %>' Text="Check Box 12" /> 
    </asp:Panel> 
    <CC1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" Collapsed="true" 
     ExpandControlID="pnlClick" TextLabelID="lblMessage" CollapsedText="Click To Show" 
     ExpandedText="Click To Hide" ImageControlID="imgArrows" ExpandDirection="Vertical" 
     TargetControlID="pnlCollapsable" ScrollContents="false" runat="server"> 
    </CC1:CollapsiblePanelExtender> 
</asp:Templatefield>