ASP.NET

Various Ways To InjectJS Into ASP.NET Controls

There are various ways to inject JavaScript to the ASP.NET Controls. In this post we are going to discuss those techniques.

For simple illustrative purpose, normally in an ASP.NET Webform, in the controls like Text box, whenever you press enter key it will submit the page. In other words, it will post the page back to the server. In this post, we are going to see how to avoid this by using JavaScript.

Technique 1: Inject JavaScript directly to the markup.

In this way, you need to include the “onkeydown” event on each text box control.

Markup:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         Enter First Name:   
  12.          <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>  
  13.         <br />  
  14.         Enter Last Name:   
  15.          <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>  
  16.         <br />  
  17.   
  18.         <asp:Button runat="server" ID="btnSubmit" Text="Submit" />  
  19.     </form>  
  20. </body>  
  21. </html> 
 Technique 2: Inject JavaScript through server side code.

If you want to achieve the above one in server side, that is you loop through the controls and inject the same javascript snippet. For this, you can use the following markup and code behind:

Markup:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         Enter First Name:   
  12.          <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" ></asp:TextBox>  
  13.         <br />  
  14.         Enter Last Name:   
  15.          <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" ></asp:TextBox>  
  16.         <br />  
  17.   
  18.         <asp:Button runat="server" ID="btnSubmit" Text="Submit" />  
  19.     </form>  
  20. </body>  
  21. </html> 
 Code behind: 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace DemoWebForm  
  9. {  
  10.     public partial class WebForm1 : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             DisableEnterKey(Page.Controls);  
  15.   
  16.         }  
  17.   
  18.         public void DisableEnterKey(ControlCollection ctrls)  
  19.         {  
  20.             foreach (Control c in ctrls)  
  21.             {  
  22.                 foreach (Control ctrl in c.Controls)  
  23.                 {  
  24.                     if (ctrl is TextBox)  
  25.                         ((TextBox)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");  
  26.                     else if (ctrl is DropDownList)  
  27.                         ((DropDownList)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");  
  28.                 }              
  29.             }  
  30.         }  
  31.     }  
  32. } 
Technique 3: Using JQuery.

In the above two techniques, either we need to include the same line in each control or we need to loop through the controls and inject the JS. In some cases you may want to achieve the same using jQuery.

Markup:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="Scripts/jquery-1.10.2.js"></script>  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function(){   
  11.             $('input[type=text]').on("keydown", "", function () { return (event.keyCode != 13); });  
  12.         });  
  13.     </script>  
  14. </head>  
  15. <body>  
  16.     <form id="form1" runat="server">  
  17.         Enter First Name:   
  18.          <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false"></asp:TextBox>  
  19.         <br />  
  20.         Enter Last Name:   
  21.          <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false"></asp:TextBox>  
  22.         <br />  
  23.         <asp:Button runat="server" ID="btnSubmit" Text="Submit" />  
  24.     </form>  
  25. </body>  
  26. </html>  

The above one is so simple, that is no repetition of code.

Readers, let me know your thoughts as comment! 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs