Hands-On ASP.NET Core 3.1 : Learn MVC, Razor Pages, Web API, Entity Framework Core, and Blazor. Private online coaching for software developers. Click here to know 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');">
    </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 an independent software consultant, trainer, author, yoga mentor, and meditation teacher. He has been programming, meditating, and teaching for 24+ years. He conducts instructor-led online training courses in ASP.NET family of technologies 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 connected : Facebook  Twitter  LinkedIn  YouTube

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