使用 Div Click 事件作为 UpdatePanel 的触发器答案

【问题标题】：Use Div Click Event As UpdatePanel's Trigger使用 Div Click 事件作为 UpdatePanel 的触发器
【发布时间】：2014-01-06 12:11:32
【问题描述】：

我使用 div 作为图像按钮，因为 ASP Imagebutton 在点击时会导致闪烁，无论如何。

Div 点击引发服务器端事件来绑定网格，效果很好。只是整个页面加载。为了不这样做，我尝试将其作为触发器。

现在，它给出了错误 -

'div1 正在通过 RegisterAsyncPostBackControl 或 RegisterPostBackControl 必须实现 InamingContainer、IpostBackDataHandler 或 IpostbackEventHandler'

ASPX：

<div id="div1" runat="server" class="search"></div>
<asp:UpdatePanel runat="server" updatemode="conditional">
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="divSearch" EventName="Click"/>
</Triggers>
<ContentTemplate>
  <asp:gridview....../>
</ContentTemplate>
</asp:UpdatePanel>

C#：

public partial class Home: System.Web.UI.Page, IPostBackEventHandler
{

    protected void Page_Load(object sender, EventArgs e)
     {
       div1.Attributes["onclick"] = ClientScript.
                                  GetPostBackEventReference(this, "div1_Click");
     }

    protected void div1_Click()
     {
       bindGrid();
     }

    public void RaisePostBackEvent(string eventArgument)
    {
      if (!string.IsNullOrEmpty(eventArgument))
      {
        if (eventArgument == "div1_Click")
          {
            div1_Click();
          }
      }
    }
}

有什么办法可以做到这一点？

【问题讨论】：

错误说明了一切：“InamingContainer、IpostBackDataHandler 或 IpostbackEventHandler”。请改用asp:panel。
没有。一样。它对你有用吗？
这是因为 div 标签不支持 PostBack 事件。
那么如果一个div标签不起作用，那还能用什么呢？

标签： c# asp.net

【解决方案1】：

您可以在更新面板内添加一个asp按钮，此按钮具有css属性display = none，并且在div单击时使用jquery，触发asp按钮单击。

 <div id="jqmCollapsibleDiv" data-role="collapsible">
            <h3>Title</h3>
            <asp:UpdatePanel runat="server" ID="UpdatePannel1">
                <ContentTemplate>
                     <%-- Update pannel content --%>
                <div style="display: none">
                    <asp:Button runat="server" ID="btnTrigger" OnClick="btnTrigger_Click" />
                </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

jquery 代码

        $("#jqmCollapsibleDiv").collapsible({
            expand: function (event, ui) {
                $("#btnTrigger").click();
            }
        });

如果你不使用jquery mobile collapsible而使用简单的html div，在div中添加tabindex，并使用click事件：

$('#simpleHtmlDiv').click(function (){
   $("#btnTrigger").click();
});

【讨论】：