Instructor-led online courses : ASP.NET Core 2.2, Angular 7, and ASP.NET Core Design Patterns. Read more...

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');">
    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
    ("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, trainer, author, yoga mentor, and spiritual guide having 24+ years of experience in software development, consulting, and training. He conducts instructor-led online training courses in ASP.NET Core, ASP.NET MVC, and Design Patterns for individuals and small groups. 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 article updates : Facebook  Twitter  LinkedIn

Posted On : 24 November 2001

Tags : ASP.NET Server Controls JavaScript

Subscribe to our newsletter

Get monthly email updates about new articles, tutorials, code samples, and how-tos getting added to our knowledge base.


Receive Weekly Updates