C# CollapsiblePanelExtender 点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/917010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CollapsiblePanelExtender Click Event
提问by aggitan
I have a a CollapsiblePanelExtender with the usual extend and collapse buttons....I would like to have a click event fire off when the extender is extended and a different click event fire off when the extender is collapsed. But the most important event is when it is extended. I could live without a click even on collapse.
我有一个带有通常的扩展和折叠按钮的 CollapsiblePanelExtender....我想在扩展器被扩展时触发一个点击事件，当扩展器被折叠时触发一个不同的点击事件。但最重要的事件是它何时被延长。即使在崩溃时，我也可以不点击一下。
Most of the examples I've found online searching using: "CollapsiblePanelExtender" "click event" is having the extender react based on a click even else where...
我在网上搜索到的大多数示例都使用：“CollapsiblePanelExtender”“点击事件”让扩展器根据点击做出反应，甚至在其他地方...
I want the extender to fire off a JS when clicked.
我希望扩展器在单击时触发 JS。
How should I go about accomplishing this? Am I asking the wrong question/using the wrong search strings?
我应该如何去完成这个？我问错了问题/使用了错误的搜索字符串吗？
CollapsiblePanelExtender extendatron = new CollapsiblePanelExtender();
extendatron.ID = "cpe" + MenuId;
extendatron.TargetControlID = "pnlContent" + strMenuId;
extendatron.ExpandControlID = "pnlMenu" + strMenuId;
extendatron.CollapseControlID = "pnlMenu" + strMenuId;
extendatron.Collapsed = bCollapsed;
extendatron.TextLabelID = strMenuName;
extendatron.ExpandedText = m_strButtonLabelHide;
extendatron.CollapsedText = m_strButtonLabelShow;
extendatron.ImageControlID = "imglnk" + strMenuId;
extendatron.CollapsedImage = "~/App_Themes/default/nbExpand.gif";
extendatron.ExpandedImage = "~/App_Themes/default/nbCollapse.gif";
extendatron.SuppressPostBack = true;
extendatron.ScrollContents = false;
var extender = $find('extendatron'); //this would be <%=myExtender.ClientID%>
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
采纳答案by Jonas
I assume you're talking about the ASP.Net AJAX Control Toolkit. You can add handlers to the collapsed and expanded events as follows:
我假设您在谈论 ASP.Net AJAX 控件工具包。您可以将处理程序添加到折叠和展开的事件，如下所示：
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
Let me know if you have any questions...I've done a fair bit of customizing some of these objects in various solutions.
如果您有任何问题，请告诉我...我已经在各种解决方案中对其中一些对象进行了大量自定义。
回答by ADL
First, you need to create a client side (JavaScript) onClickevent for the panel or control users are clicking on.
首先，您需要为onClick用户单击的面板或控件创建客户端 (JavaScript)事件。
So, go in there type onClick="functionName();"
所以，在那里输入 onClick="functionName();"
<asp:Panel ID="pDocumentHeaderTitle" runat="server" CssClass="collapsePanelHeader" onClick="setCollapseState();">
<asp:Image ID="imgDocumentHeaderHeader" runat="server" ImageUrl="~/images/wadown.gif"/>Document Header
<asp:Label ID="lblDocumentHeaderHeader" runat="server">(Show)</asp:Label>
</asp:Panel>
Next: Add this javascript.
下一步：添加这个javascript。
<script type="text/javascript">
function setCollapseState() {
var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
setCookie("cpeDocumentHeaderStatus", extenderDocumentHeader.value, 5)
}
//W3Schools cookie code.
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
//W3Schools cookie code.
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
</script>
Notice, when your page is loaded, there is a hidden field that is your collapsible panels state. It will be true or false. Go to page source and search for it you will find it.
请注意，当您的页面加载时，有一个隐藏字段是您的可折叠面板状态。这将是真的或假的。转到页面源并搜索它，您会找到它。
Then add:
然后加：
var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
So on click, get this clients state, save it in a cookie and your good to go!
因此，单击后，获取此客户端状态，将其保存在 cookie 中，一切顺利！
