AJAX可折叠面板扩展器不起作用 [英] AJAX Collapsible Panel Extender not working
本文介绍了AJAX可折叠面板扩展器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试添加可折叠的面板扩展器.我最近安装了VS 2013，并添加了Ajax工具包.我曾尝试根据许多不同的教程来实现可折叠面板，但是我的方法无法正常工作.我将属性设置为开始折叠，但是我得到的是面板展开，并且当我单击图像以展开/折叠时什么也没有发生.我确定我只是想念一些愚蠢的东西，但我看不到它.任何帮助将不胜感激.
I am trying to add a collapsible panel extender. I recently installed VS 2013 and added the Ajax Toolkit. I have tried to implement the collapsible panel based on many different tutorials, but mine does not work. I have the property set to start collapsed, but what I get is the panel expanded, and nothing happens when I click my image to expand/collapse it. I''m sure I''m just missing something stupid, but I can''t see it. Any help would be much appreciated.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<ajaxToolkit:CollapsiblePanelExtender ID="cpeFilter" runat="Server"
TargetControlID="PnlPlayer"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="true"
ExpandControlID="imgFilter"
CollapseControlID="imgFilter"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="false"
TextLabelID="Label1"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="imgFilter"
ExpandedImage="~/images/plyr_filter.gif"
CollapsedImage="~/images/plyr_filter.gif"
ExpandDirection="Vertical" />
<asp:Image ID="imgFilter" CssClass="imgBtn" runat="server" ImageUrl="images/plyr_filter.gif" ></asp:Image>
<asp:Panel ID="PnlPlayer" runat="server" >
I am the player
</asp:Panel>
</div>
</form>
</body>
</html>
推荐答案
CollapsiblePanel假定正在使用标准CSS盒子模型.早期版本的Internet Explorer不完全支持该模型，因此请使用！DOCTYPE声明(如在此页面顶部找到，并且对于新的ASP.NET页面默认启用)以指定该页面应在IE的标准兼容模式.在此处阅读 [
CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of Internet Explorer didn''t support that model completely, so please use the !DOCTYPE declaration (as found at the top of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered in IE''s standards-compliant mode. Read here[^].
Or maybe use ToolScriptManager.
-KR
尝试并使用ToolScriptManager而不是Scriptmanager……
Try and use ToolScriptManager instead of Scriptmanager......
Friends;
I utilized 3 panels in order to get it work!
This is a complete example:
---------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CollapsiblePanel Training</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<div>
<asp:Panel ID="pnl_Control" runat="server" BorderColor="Blue" BorderWidth="3px" Width="300px" HorizontalAlign="left" >
<asp:Panel ID="pnl_Header" runat="server" BackColor="Blue" ForeColor="White" Font-Bold="true" Width="300px">
<asp:Label ID="lbl_ExpandCollapse" runat="server" Text="Show Details..."></asp:Label>
<asp:Image ID="img_ExpandCollapse" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="Xpand Image" ImageAlign="Right" height="25" Width="25"/>
</asp:Panel>
<asp:Panel ID="pnl_Target" runat="server" Width="300px" Height="0px" HorizontalAlign="Justify">
This text must appeart after you click Expand/Collapse Panel. If so then you've succeeded.... God job!
<asp:Image ID="img_DetailImage" runat="server" ImageUrl="~/images/Maldives.jpg" Height="250px" Width="250px" AlternateText="Alt Text" />
</asp:Panel>
</asp:Panel>
<asp:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
TargetControlID="pnl_Target"
CollapsedSize="0"
ExpandedSize="300"
Collapsed="True"
ExpandControlID="pnl_Control"
CollapseControlID="pnl_Control"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="False"
TextLabelID="lbl_ExpandCollapse"
CollapsedText="Show Details..."
ExpandedText="Hide Details"
ImageControlID="img_ExpandCollapse"
ExpandedImage="~/images/collapse.jpg"
CollapsedImage="~/images/expand.jpg"
ExpandDirection="Vertical" >
</asp:CollapsiblePanelExtender>
</form>
</body>
</html>
这篇关于AJAX可折叠面板扩展器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
