Question

在asp.net webform中我有以下代码

<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>

DIV标记expandderheaders用作该部分的标题。它包含一个链接按钮，图像类似于扩展器面板栏。

CollapsiblePanelExtnder是一个ajax工具包控件，当单击一个asp.net控件（LinkButton）时会扩展，然后将用户控件加载到PlaceHolder中以显示新的数据部分。这一切都很好但我目前只能点击链接按钮来扩展该部分（如预期的那样）。我想要做的是能够点击整个div部分（expanderHeaders）并让它作为扩展该部分的控件。

我已经看过使用jQuery，我已经能够复制面板扩展，并设置DIV层在接受客户端事件时的功能，而不仅仅是在服务器端控件上。但是，在使用jQuery时，我无法调用服务器端方法来加载用户控件。

任何人都可以提供一些指导，说明如何将现有控件设置为链接按钮可以跨越div图层的整个内容的位置，或者使用客户端脚本/ jQuery允许我调用服务器端方法来加载页面中的用户控件？

提前致谢

更新詹姆斯回答

我尝试过与此类似的东西

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>

我会省略CSS，因为它现在不重要

使用这种方法点击div层似乎每次点击都会导致回发，因此永远不会访问代码隐藏。

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")
        {

        }
    }

仍然没有骰子。

Answer 1

使用jQuery执行此操作可能更容易：

//obviously, adjust this to your needs
$(document).ready(function(){    
    $(".expanderheaders").click(function(){
        $(".detailsectionBorders").hide("slow");
    }
});

要在服务器端执行此操作，如果您为div提供ID并指定runat="server"，则可以执行以下操作：

<div id="div1" runat="server">
    Expand Me
</div>

代码隐藏：

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")
    {
        //logic here   
    }
}

如何在asp Web表单中调用服务器端和客户端事件

1 个答案: