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 posted 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:
Technique 2: Inject Javascript thru server side code.
If you want to achieve the above one in server side, that is you loop thru the controls and inject the same javascript snippet. For this, you can use the following markup and code behind:
Markup:
Codebehind:
Technique 3: Using JQuery
In the above 2 techniques, either we need to include the same line in each controls or we need to loop thru the controls and inject the JS. In some cases you may want to achieve the same using the JQuery
Markup:
The above one is so simple, that is no repetition of code.
Hope this helps!
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 posted 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:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
Enter First Name:
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>
<br />
Enter Last Name:
<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" onkeydown="return (event.keyCode!=13);"></asp:TextBox>
<br />
<asp:Button runat="server" ID="btnSubmit" Text="Submit" />
</form>
</body>
</html>
Technique 2: Inject Javascript thru server side code.
If you want to achieve the above one in server side, that is you loop thru the controls and inject the same javascript snippet. For this, you can use the following markup and code behind:
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
Enter First Name:
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false" ></asp:TextBox>
<br />
Enter Last Name:
<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false" ></asp:TextBox>
<br />
<asp:Button runat="server" ID="btnSubmit" Text="Submit" />
</form>
</body>
</html>
Codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DemoWebForm
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DisableEnterKey(Page.Controls);
}
public void DisableEnterKey(ControlCollection ctrls)
{
foreach (Control c in ctrls)
{
foreach (Control ctrl in c.Controls)
{
if (ctrl is TextBox)
((TextBox)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");
else if (ctrl is DropDownList)
((DropDownList)ctrl).Attributes.Add("onkeydown", "return (event.keyCode!=13);");
}
}
}
}
}
Technique 3: Using JQuery
In the above 2 techniques, either we need to include the same line in each controls or we need to loop thru the controls and inject the JS. In some cases you may want to achieve the same using the JQuery
Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DemoWebForm.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=text]').on("keydown", "", function () { return (event.keyCode != 13); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
Enter First Name:
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="false"></asp:TextBox>
<br />
Enter Last Name:
<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="false"></asp:TextBox>
<br />
<asp:Button runat="server" ID="btnSubmit" Text="Submit" />
</form>
</body>
</html>
The above one is so simple, that is no repetition of code.
Hope this helps!
