January 2018 : Instructor-led Online Course in ASP.NET Core 2.0. Conducted by Bipin Joshi. Read more...
Registration for January 2018 batch of ASP.NET Core 2.0 instructor-led online course has already started. Conducted by Bipin Joshi. Register today ! Click here for more details.

Can I use JavaScript with ASP.NET web controls? How?

Recently one of the visitor of the site asked me how to use JavaScript with web controls. He believed that this is either not possible or is very difficult. So, I decided to write this small article.

Yes. You can use JavaScript with ASP.NET web controls. However, there are some points to be considered. As you must have noticed many web controls have event names exactly matching JavaScript/DHTML events e.g. OnClick.

Consider a case where you are using a button Web Controls i.e. <asp:Button>. You can not write OnClick DHTML event handler for this control because it already has one that will be processed at server side. We will now see two ways of overcoming this situation :

  • Using HTML controls marked to run at server
    ASP.NET has two versions of server controls. Web controls and HTML controls. Web control provide a new syntax but have consistent usage. On the other hand HTML controls match traditional HTML syntax. In places where you want to use both events (client side as well as server side) you can use HTML controls. The event names of HTML controls are of type OnServerxxxx where xxxx stands for the event e.g. OnServerClick. You can write DHTML event handlers using JavaScript as before. Following example will make it clear.

    <form id="Form1" method="post" runat="server">
    <INPUT id="Button1" type="button" value="Button"
    name="Button1" runat="server"
    onclick="alert('hello world');">
    </form>
    
    Private Sub Button1_ServerClick
    (ByVal sender As System.Object,
    ByVal e As System.EventArgs)
    Handles Button1.ServerClick
    Response.Write("ServerClick fired...")
    End Sub
    

  • Using Attributes collection
    If you want to stick to web controls then there is another way you can overcome this situation. All web controls have a collection called Attributes. This collection is designed for downlevel browsers and you can put javascript event handlers in it. Following example will make it clear.
    <form id="Form1" method="post" runat="server">
    <asp:Button id="Button1" runat="server" Text="Button">
    </asp:Button> </form>
    
    Private Sub Page_Load
    (ByVal sender As System.Object,
    ByVal e As System.EventArgs)
    Handles MyBase.Load
    Button1.Attributes.Add
    ("onclick", "javascript:alert('hello world')")
    End Sub
    
    Private Sub Button1_Click
    (ByVal sender As System.Object,
    ByVal e As System.EventArgs)
    Handles Button1.Click
    Response.Write("Click fired...")
    End Sub 

I hope this must have answered your question.

Keep coding !


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 24 November 2001


Tags : ASP.NET Server Controls JavaScript