问题
I'm in the process of troubleshooting a coding challenge in a gridview where I'm attempting to insert a CollapsiblePanelExtender from the Ajax Control Toolkit (in Visual Studio 2012) into a section of checkboxes. What I'm hoping to do is to make the entire section of checkboxes collapse and expand at the users request.
The challenge I'm facing (the asp code is below - no cs code) is that in the " < asp:Panel ID="pnlClick"..." portion of the code there is a green squiggly line below 'Panel' and under every instance of 'CheckBoxField' with the following errors (as noted from the debug output):
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.
Also, when I switch to the design view of this page I get the following error:
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'.
The SQL portion of this puzzle is rock solid so I don't need assitance with this. I'm new to the Ajax Control Toolkit so I'm trying to determine what exactly I need to tweak to make this work (if this is even the right solution for what I'm attempting to accomplish). I've been pouring through Google for answers but nothing has helped me to resolve this matter with a gridview. The code below is the product of trying to piece together other non gridview solutions within the past six months to a year. There's something I'm probably missing and I'm willing to bet this is probably something simple that needs to be fixed. What am I missing here (below) if this is even possible?
If anyone also knows of a good non-msdn reference with examples that would be greatly appreciated too.
Aspx code:
<%@ 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>
回答1:
Everything that's a direct child of your Columns collection needs to be a DataControlField type control (CheckBoxField, ButtonField, etc).
Thus. you need to put all of that Panel stuff inside a <Templatefield>, which allows you to create a custom field.
And you need to convert all of those CheckBoxFields to just regular checkboxes, bind those CheckBoxes to the data fields you wanted, and you should be good
<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>
来源：https://stackoverflow.com/questions/17579935/unknown-control-error-with-collapsiblepanelextender-in-a-gridview