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>