Read, With the Name of Your Lord Who Created

Calling Client Script Events in ASP.NET Server Controls

Posted by triaslama on April 25, 2008

ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).

For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:

<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />

The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.

But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).

In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):

    <%@ Page Language=”C#” %>

    <html>
    <head>
    <title>Calling Client Script Events in ASP.NET Server Controls</title>
    <script language=”C#” runat=”server”>
    void Page_Load()
    {
    this.btn2.Attributes.Add(“onclick”,”showAlertMessage()”);
    }

    void btn1_Click(object sender, EventArgs e)
    {
    this.lblShow.Text = “<b>Server script executed!</b>”;
    }
    </script>
    <script lang=”javascript” type=”text/javascript”>
    function showAlertMessage()
    {
    window.alert(“Client script executed!”);
    }
    </script>
    </head>
    <body>
    <form runat=”server”>
    <asp:Button id=”btn1″ text=”Calling server script” onclick=”btn1_Click” runat=”server” />

    <asp:Button id=”btn2″ text=”Calling client script” runat=”server” />
    <p />
    <asp:Label id=”lblShow” runat=”server” />
    </form>
    </body>
    </html>

The important portion of source code that make calling client script events possible is the following lines of code:

void Page_Load()
{
this.btn2.Attributes.Add("onclick","showAlertMessage()");
}

Page_Load called when a page loads. Inside Page_Load method we add an attribute to btn2 control (btn2.Attributes.Add([param1],[param2])). First parameter of Add method specify what event will be handled (onclick for click event, onkeydown for keydown event, onmouseover for mouseover event, etc.). Second parameter of Add method specifies function associated with specified event. With this we can put any of Javascript events in ASP.NET server controls. I hope I can more realize how interesting it could be! Here screenshots of expage.aspx:

expage.aspx

Click event of ASP.NET server controls handled using server script and client script.

As an additon maybe we need this: If we include an attribute that does not map to a property of ASP.NET controls, the attribute will be ignored in server side processing and will be passed as an attribute of HTML control (rendered in client side).
Look at the following example (expage2.aspx):

    <%@ Page Language=”C#” %>

    <html>
    <head>
    <title>Client Script in ASP.NET</title>
    <script language=”C#” runat=”server”>
    </script>
    <script lang=”javascript”>
    function showText(elm)
    {
    var displayDiv = document.getElementById(“displayDiv”);
    displayDiv.innerHTML = elm.value;
    }
    </script>
    </head>
    <body>
    <form runat=”server”>
    <asp:TextBox id=”txtSample” onkeydown=”showText(this)” runat=”server” />
    <p />
    <div id=”displayDiv”>
    </div>
    </form>
    </body>
    </html>

Inside expage2.aspx, I put onkeydown as an attribute of ASP.NET TextBox server control. But because keydown not exists as TextBox event (please refers to .NET documentation for complete members of TextBox server control) so onkeydown just passed as a HTML control attribute.

This is result of expage2.aspx:

keydown is not a TextBox event, so onkeydown just passed and rendered as HTML control attribute.

20 Responses to “Calling Client Script Events in ASP.NET Server Controls”

  1. Ameer said

    Good.. In Asp.net we use the responds.Attributes in the application load event.. if it is possible??? reply me..

  2. Sascha said

    Hi there,
    how about client side access to server controls that do not map 1:1 to an ordinary HTML as shown in your example using the button? I’e got controls like the Calendar or the TreeView in mind.
    Is there a client side “object model” available for the more advanced ASP.NET sercer controls?

    Thanks

    • triaslama said

      I am sorry for the delay of my reply. I can’t say for sure to server controls that do not map 1:1 to corresponding HTML control, but what I mean in this post is I want to utilize client side events from ASP.NET controls.
      So in this case we will always map ASP.NET control to HTML control and get the possible events of that HTML control.

  3. Rahul said

    Hi,
    For executing clientside script from server side .Net supports
    some other methods like RegisterStartupScript. If you simply need to execute client side script you can use onclientclick()..

    Then why this?
    Rahul.

  4. My site. said

    Look at this….

    Sweet site dude, check out mine when you get a min……

  5. […] assumes I have a textbox with id txtAddress, and i want to add an "onchange" event. References: https://triaslama.wordpress.com/2008/04/25/calling-client-script-events-in-aspnet-server-controls/&nb… Labels: ASP.NET, […]

  6. anand singh sengar said

    thanx for sugesting me this event

  7. geoge said

    KLsFh2 http://fnYwlOpd2n9t4Vx6A3lbk.com

  8. Free mrr information and ebooks…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  9. scriptmafia…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  10. erotic masseuse…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  11. market research…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  12. free download…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  13. Free Facebook App And Viral App…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  14. Alicia said

    Alicia…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  15. Stage 4 Brain Cancer…

    […]Calling Client Script Events in ASP.NET Server Controls « Read, With the Name of Your Lord Who Created[…]…

  16. I really like what you guys tend to be up too.

    This sort of clever work and coverage! Keep up the terrific works guys I’ve you guys to my blogroll.

  17. Its such as you learn my mind! You appear to grasp a lot about this, like you wrote the book in it or something.

    I believe that you could do with a few p.c. to drive
    the message house a bit, however instead of that, this is magnificent blog.
    An excellent read. I will certainly be back.

  18. Kristopher said

    Fantastic beat ! I wish to apprentice while you amend your web site, how could i subscribe for a blog website?
    The account aided me a appropriate deal. I have been a
    little bit familiar of this your broadcast offered vivid transparent
    idea

  19. Rk said

    nice 1. Here I have found another example to add client script events to asp.net using Attributes.Add

    just have a look on this example visit http://www.etechpulse.com/2013/07/c-how-to-add-event-handler-on-server.html%5B^]

    Thanks

    Regards,
    Ravi Kumar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: