Post
Ask Question

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! 


Similar Articles