Learn ASP.NET Core 2 and Angular 6 in October 2018. Instructor-led online courses by Bipin Joshi. Read more...
Instructor-led Online Courses by Bipin Joshi : ASP.NET Core | Angular | Design Patterns
Registration open for October 2018 batches. Read more here.

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 and spiritual yoga mentor having 23+ years of experience in software development. He teaches private online courses in ASP.NET Core and Angular to 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.

He will be teaching ASP.NET Core 2.1 and Angular 6.1 in October 2018. Click here for his online course schedule and more details.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 24 November 2001

Tags : ASP.NET Server Controls JavaScript