In an ASP.NET web form, I have the following code snippet:
<asp:UpdatePanel ID="udpNames" runat="server">
<ContentTemplate>
<div class="expanderheaders">
<asp:Image ID="epImgNames" runat="server" ImageAlign="Middle" CssClass="expanderimage" />
<asp:LinkButton ToolTip="Expand Names" ID="lbtnNames" runat="server" OnClick="lbName_Click"
Text="Names" CssClass="detaillinks" />
</div>
<div class="detailsectionBorders">
<ajax:CollapsiblePanelExtender ID="epNames" runat="server" ExpandControlID="lbtnNames"
CollapseControlID="lbtnNames" Collapsed="true" ExpandedSize="420" ScrollContents="true"
ImageControlID="epImgNames" CollapsedImage="~/images/expandwn.png" ExpandedImage="~/images/expanup.png"
TargetControlID="namePanel" CollapsedSize="0" CollapsedText="Names" AutoExpand="false" />
<asp:Panel ID="namePanel" runat="server">
<asp:PlaceHolder runat="server" ID="PlaceHolderNames" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The DIV tag with the class "expanderheaders" acts as a header for the section. It contains a link button and an image, resembling an expander panel bar.
The CollapsiblePanelExtender is an AJAX toolkit control that expands when an ASP.NET control (LinkButton) is clicked, loading a user control into the PlaceHolder to display new data. While this functionality works as expected, I want the entire div section (expanderHeaders) to trigger the expansion, not just the link button.
I've explored using jQuery to achieve this, and while I can replicate the panel expansion and set the DIV layer to respond to client events, I haven't been successful in invoking a server-side method to load the user control using jQuery.
If anyone has insights on how to either modify the existing control to expand the section when the link button spans the entire content of the div layer, or utilize client-side script/jQuery to call a server-side method to load a user control, your guidance would be appreciated.
Thank you in advance.
Update to James's answer:
I attempted something similar to this:
jQuery:
$(function () {
$("#panel").hide();
});
$(document).ready(function () {
$(".slide").click(function () {
$("#panel").show("slow");
});
});
ASPX:
<div>
<div id="panel" >
<p>Stuff here</p>
</div>
<div class="slide" id="div1" runat="server">
<p class="btn-slide">Expand Panel</p>
</div>
</div>
I'll skip the CSS as it's not crucial right now.
With this approach, clicking on the div layer triggers a postback each time, preventing the code-behind from being accessed.
protected void Page_Load (object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
div1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
}
protected override void RaisePostBackEvent (IPostBackEventHandler source, string eventArgument)
{
// Call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument.ToUpper() == "CLICKDIV")
{
}
}
However, this method still doesn't work.