C# ASP.NET 用户控件 如何处理一个 div 点击服务器端? [英] C# ASP.NET User control How to handle a div click server side?

问题描述

我正在创建一个用户控件.用户控件是一个 div，我想向它添加一个点击事件.

I am creating an user control. The user control is a div and I want to add a click event to it.

拥有此控件的页面必须处理此事件.

The page that has this control on it has to handle this event.

我该怎么做?

推荐答案

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

First, you need to define an event on your UserControl that allows Page that contains the UserControl to register and handle the event. For example:

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

注意:如果您使用支持回发的控件，下一部分会更容易.但是，由于您想使用 div，我将解释如何强制 div 进行回发.我要感谢 Mathew Nolton 的解决方案.

Note: The next part would be easier if you were using a control that supported postbacks. However, since you want to use a div, I'll explain how to force a div to do postbacks. I'd like thank Mathew Nolton for this solution.

因此，在 UserControl 的 Page_Load 方法中，您需要添加一个 onClick 属性来调用 ASP.NET 的 __doPostback() 为您的 div 调用服务器的 javascript 函数.这就是使 div 能够回发到服务器的原因.此外，为了确定哪个控件导致了回发，我提供了 div 的 ClientId 以及一些符号来区分我的回发与其他控件.请记住，当您在 .ascx 文件上定义 div 时，它必须分配一个 id 并设置 runat="server"，才能访问在服务器端.

So, in the Page_Load method of the UserControl you need add an onClick attribute to call the ASP.NET's __doPostback() javascript function that calls the server back for your div. This is what gives a div the ability to postback to the server. In addition, to determine which control caused the postback, I supplied the div's ClientId along with some symbols to differentiate my postback from other controls. Remember when you define the div on the .ascx file it has to have an id assigned and set runat="server", to be accessible on the server side.

好的，现在通过向 div 添加一个 onclick 属性，它会在点击时回发到服务器.因此，当回发导致调用 Page_Load 时，我会检查是否是导致回发的 div.如果是这样，我将引发 UserControl 的 DivClicked 事件以由 Page 处理.

Ok, now by adding an onclick attribute to the div, it will postback to the server anytime its clicked. So, when a postback causes Page_Load to get called, I check to see if it was the div which caused the postback. If so, I raise the UserControl's DivClicked event to be handled by the Page.

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 事件.

That should do it for the UserControl, now all you have to do is register for the DivClicked event on the page.

很遗憾，您将无法获得设计时支持来注册该活动.但是，您仍然可以将代码添加到 .aspx 页.在您放置 UserControl 的页面上，向 UserControl 添加一个名为 OnXXX 的属性，其中 XXX 是名称事件.因此，对于我上面的示例，我将在页面上定义我的 UserControl 如下所示:

Unfortunately, you wont get design time support to register for the event. However, you can still add the code to the .aspx page. On the page where you drop your UserControl add an attribute to the UserControl called OnXXX where XXX is the name event. So, for my example above i would define my UserControl on the page would look like this:

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

现在您将处理程序代码添加到 Page 的代码隐藏文件(假设您使用代码隐藏)，如下所示:

Now you add your handler code to the Page's codebehind file (assuming your using codebehind) like this:

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

应该这样做.希望这篇文章对你有所帮助.

That should do it. I hope this post helps you.

这篇关于C# ASP.NET 用户控件 如何处理一个 div 点击服务器端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！