locked
User Control client-side events RRS feed

  • Question

  • User483438044 posted

    I have a user control with a number of webcontrols on it. I am familiar with how to expose properties and server-side events of these webcontrols as properties/server-side events of the User Control. However, I am not sure how to expose and handle the client-side events of these webcontrols as client-side events of the user control. Any ideas?

    Friday, July 17, 2009 11:53 PM

Answers

  • User-2106054853 posted

     

     Thanks fpr the suggestion, Allen. I took a look and it seems to work like I want. However, I am wondering a couple things. Could not this be made simpler using the basic method you described... that of specifying the ClientHandler as a property of the User Control? For instance, can one use the property definition to set the button handler all at once like so:

    1.  public string OnClientClick   
    2.         {   
    3.             get  
    4.             {   
    5.                 string str = (string)this.ViewState["OnClientClick"];   
    6.                 if (str == null)   
    7.                 {   
    8.                     return string.Empty;   
    9.                 }   
    10.                 return str;   
    11.             }   
    12.             set  
    13.             {   
    14.                 this.ViewState["OnClientClick"] = value;   
    15. MyButton.OnClientClick = value;   
    16.             }   
    17.         }  
     public string OnClientClick
            {
                get
                {
                    string str = (string)this.ViewState["OnClientClick"];
                    if (str == null)
                    {
                        return string.Empty;
                    }
                    return str;
                }
                set
                {
                    this.ViewState["OnClientClick"] = value;
    MyButton.OnClientClick = value;
                }
            }
    

    I'm also not quite following the need to add a panel to the user control and hook up an onclick handler to it. Will the button onclientclick handler not work on its own?

    You can do this but in my sample I mainly want to show two things:

    1. Button has the functionality to let user hook JavaScript function to the client side click event so we can assign value to Button's OnClientClick property directly. Internally Button control does what I did for Panel control, that is to add the OnClientClick as prefix of existing value of "onclick" attribute.

    2. Panel has no such kind of support so we need to do this manually. As you can see I add JavaScript for Panel's onclick in ascx. If we simply replace the value of "onclick" attribute this JavaScript will lose. Please check out the code to see how to solve this problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 21, 2009 10:04 PM

All replies

  • User1282917655 posted

    I do not know what do you mean , but I think you need to create a custom control rather than user control.

    tell me what you are trying to do, maybe I can give you a better idea .

    Saturday, July 18, 2009 7:42 AM
  • User483438044 posted

    Well, for example, let's say I have a user control that contains a hyperlink control on it. I can obviously provide javascript within the user control that handles the hyperlink click client-side. However seeing as the user control is a "component" I include within some parent page, it is often necessay to handle events that are originated in the "component" within the parent page itself. So, I would like to provide some javascript in the PARENT page, which handles the event raised from the user control.

    This is pretty straighforward when handling server-side events. I can create custom events within the user control which are handled in the parent page. However, doing this with client-side events is not as straightforward, and that is what I would like to do. I suppose creating a server control could accomplish this (though I'm not sure how to expose client-=side events out of a server control either), but I would think something like this would be pssible using a user control.

    Saturday, July 18, 2009 12:07 PM
  • User-2106054853 posted

     Hi,

    Please try following code:

    ascx.cs:

       public partial class WebUserControl1 : System.Web.UI.UserControl
        {
            public string OnClientClick
            {
                get
                {
                    string str = (string)this.ViewState["OnClientClick"];
                    if (str == null)
                    {
                        return string.Empty;
                    }
                    return str;
                }
                set
                {
                    this.ViewState["OnClientClick"] = value;
                }
            }

            string EnsureEndWithSemiColon(string value)
            {
                if (value != null)
                {
                    int length = value.Length;
                    if ((length > 0) && (value[length - 1] != ';'))
                    {
                        return (value + ";");
                    }
                }
                return value;
            }

            protected void Button1_PreRender(object sender, EventArgs e)
            {
                //Button has OnClientClick property so we can assign to it directly
                Button btn = (Button)sender;
                btn.OnClientClick = this.OnClientClick;
               
            }
         
            void HookClientClick(WebControl c)
            {
                string firstScript = string.Empty;

                firstScript = EnsureEndWithSemiColon(this.OnClientClick);
                string str = c.Attributes["onclick"];
                if (str != null&&!str.StartsWith(firstScript))
                {

                    firstScript = firstScript + EnsureEndWithSemiColon(str);
                    c.Attributes["onclick"] = firstScript;

                }
            }

            protected void Panel2_PreRender(object sender, EventArgs e)
            {
                Panel panel = (Panel)sender;
                HookClientClick(panel);
            }
       
        }

    ascx:

     <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication37.WebUserControl1" %>
    <asp:Panel ID="Panel1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" UseSubmitBehavior="false"
            onprerender="Button1_PreRender" />
        <asp:Panel ID="Panel2" runat="server" BackColor="Red"
            onprerender="Panel2_PreRender" onclick="alert('defined in user control')">Hello World!
        </asp:Panel>
    </asp:Panel>

    aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication37._Default" %>

    <%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function Test() {
                alert("Hello World!");
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <uc1:WebUserControl1 ID="WebUserControl11" OnClientClick="Test()" runat="server" />

     <div> 
        </div>
        </form>
    </body>
    </html>

    Monday, July 20, 2009 10:58 PM
  • User483438044 posted

     Thanks fpr the suggestion, Allen. I took a look and it seems to work like I want. However, I am wondering a couple things. Could not this be made simpler using the basic method you described... that of specifying the ClientHandler as a property of the User Control? For instance, can one use the property definition to set the button handler all at once like so:

     public string OnClientClick
            {
                get
                {
                    string str = (string)this.ViewState["OnClientClick"];
                    if (str == null)
                    {
                        return string.Empty;
                    }
                    return str;
                }
                set
                {
                    this.ViewState["OnClientClick"] = value;
    MyButton.OnClientClick = value;
                }
            }
    

    I'm also not quite following the need to add a panel to the user control and hook up an onclick handler to it. Will the button onclientclick handler not work on its own?

    Tuesday, July 21, 2009 10:43 AM
  • User-2106054853 posted

     

     Thanks fpr the suggestion, Allen. I took a look and it seems to work like I want. However, I am wondering a couple things. Could not this be made simpler using the basic method you described... that of specifying the ClientHandler as a property of the User Control? For instance, can one use the property definition to set the button handler all at once like so:

    1.  public string OnClientClick   
    2.         {   
    3.             get  
    4.             {   
    5.                 string str = (string)this.ViewState["OnClientClick"];   
    6.                 if (str == null)   
    7.                 {   
    8.                     return string.Empty;   
    9.                 }   
    10.                 return str;   
    11.             }   
    12.             set  
    13.             {   
    14.                 this.ViewState["OnClientClick"] = value;   
    15. MyButton.OnClientClick = value;   
    16.             }   
    17.         }  
     public string OnClientClick
            {
                get
                {
                    string str = (string)this.ViewState["OnClientClick"];
                    if (str == null)
                    {
                        return string.Empty;
                    }
                    return str;
                }
                set
                {
                    this.ViewState["OnClientClick"] = value;
    MyButton.OnClientClick = value;
                }
            }
    

    I'm also not quite following the need to add a panel to the user control and hook up an onclick handler to it. Will the button onclientclick handler not work on its own?

    You can do this but in my sample I mainly want to show two things:

    1. Button has the functionality to let user hook JavaScript function to the client side click event so we can assign value to Button's OnClientClick property directly. Internally Button control does what I did for Panel control, that is to add the OnClientClick as prefix of existing value of "onclick" attribute.

    2. Panel has no such kind of support so we need to do this manually. As you can see I add JavaScript for Panel's onclick in ascx. If we simply replace the value of "onclick" attribute this JavaScript will lose. Please check out the code to see how to solve this problem.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 21, 2009 10:04 PM