C# ASP.NET用户控件如何在服务器端处理div的点击事件？

Question

我正在创建一个用户控件。该用户控件是一个div，我想为其添加一个点击事件。

编辑：

包含此控件的页面必须处理此事件。

我该如何做？

- Martijn

Answer 1

首先，您需要在UserControl上定义一个事件，允许包含UserControl的Page注册和处理该事件。例如：

public partial class MyUserControl : System.Web.UI.UserControl
{    
    // Event for page to handle
    public event EventHandler DivClicked;

    protected virtual void OnDivClicked(EventArgs e)
    {
        if (DivClicked != null)
            DivClicked(this, e);
    }        

    protected void Page_Load(object sender, EventArgs e)
    {
        // Page Load Code goes here
    }
}

注意： 如果您使用支持postbacks的控件，下一部分将更容易。但是，由于您想使用一个

，所以我将解释如何强制

进行postbacks。我要感谢 Mathew Nolton提供的解决方案。

因此，在的方法中，您需要添加一个onClick属性来调用ASP.NET的__doPostback() javascript函数，该函数会为您的

调用服务器回调。这就是使

具备向服务器进行postback的能力的原因。此外，为了确定导致postback的控件，我提供了

的ClientId以及一些符号来区分我的postback和其他控件。请记住，在.ascx文件上定义

时，必须分配一个id并设置runat =“server”，以便在服务器端访问它。

现在，通过将onclick属性添加到div，每次单击时都会向服务器提交。因此，当后台回发导致调用Page_Load时，我检查它是否是由div引起的回发。如果是，我会触发UserControl的DivClicked事件，由页面处理。

public partial class MyUserControl : System.Web.UI.UserControl
{
    // Event Definition and Raising methods
    ...

   protected void Page_Load(object sender, EventArgs e)
   {
       // @@@@ will denote this is an argument I provided.
       string arg = "@@@@" + divClickableDiv.ClientID;
       // Add postback method to onClick 
       divClickableDiv.Attributes.Add("onClick", 
       Page.ClientScript.GetPostBackEventReference(divClickableDiv, arg));

       if (IsPostBack)
       {
           // Get event arguments for post back.
           string eventArg = Request["__EVENTARGUMENT"];

           // Determine if postback is a custom postback added by me.
           if (!string.IsNullOrEmpty(eventArg) && eventArg.StartsWith("@@@@"))
           {
               // Raise the click event for this UserControl if the div
               // caused the post back.
               if (eventArg == arg) 
                   OnDivClicked(EventArgs.Empty);
            }
        }
    }
}

这样就完成了 UserControl 的编写，现在你只需要在页面上注册 DivClicked 事件即可。

不幸的是，你无法在设计时支持中注册该事件。但是，你仍然可以将代码添加到 .aspx 页面中。在放置 UserControl 的页面上，向 UserControl 添加一个名为 OnXXX 的属性，其中 XXX 是事件名称。因此，对于我上面的示例，我在页面上定义 UserControl 如下：

<uc1:MyUserControl  ID="MyUserControl1" runat="server" OnDivClicked="MyUserControl1_DivClicked" />

现在，您需要将处理程序代码添加到页面的代码后台文件中（假设您正在使用代码后台），如下所示：

public partial class MyPage : System.Web.UI.Page 
{
    // Called whenever div in MyUserControl is clicked.
    protected void WebUserControl1_DivClicked(object sender, EventArgs e)
    {
        // Handle Div click event here.
    }
}

应该就这样了。希望这篇文章能帮到你。

- rocka

---

哇，多么精彩的解释啊！非常有趣的内容！非常感谢你！ - Martijn

Answer 2

<div runat="server" onserverclick="MyClickHandler">
...
</div>

- orip

---

这是真的吗？与http://stackoverflow.com/questions/7309718/onserverclick-not-working有冲突。 - Tim Partridge

Answer 3

Rocka的回答接近正确，但并不完全正确（因为它对我没有用，我找出了原因）。

Rocka用户控件的代码片段是正确的： // 由页面处理的事件 public event EventHandler DivClicked;

protected virtual void OnDivClicked(EventArgs e) 
{ 
    if (DivClicked != null) 
        DivClicked(this, e); 
} 

当使用UserControl时，以下内容将不起作用：

OnDivClicked不是事件处理程序，而是一个函数，因此您无法分配它。更何况，当函数触发时，实际的事件处理程序变量为null，因此不会执行任何操作。

正确的方法应该是：

这将把MyUserControl1_DivClicked分配为DivClicked的处理程序。可惜，这实际上并没有起作用，所以在页面的Page_Load中的代码后端中，改为使用以下行：

this.MyUserControl1.OnClick += new EventHandler(MyUserControl1);

另外，顺便提一下，如果将div设置为runat="server"，则OnClick将公开为可以连接到的事件。您所需要的就是在用户控件中为EventHandler添加一个传递属性到div。

- KenF

Answer 4

在你的ItemTemplate中，请使用asp:Panel代替div标签（面板呈现为div），并设置可见性属性如下：

<asp:Panel ID="ImgFeatured" runat="server" CssClass="featured-ribbon"> </asp:Panel>

代码后台

Panel ImgFeatured = (Panel)e.Row.FindControl("ImgFeatured");
ImgFeatured.Visible = true;

- sajanyamaha