روش ها مختلف اضافه کردن JS به کنترل های ASP.Net
سه شنبه 14 مهر 1394راه های مختلفی برای تزریق JS به کنترل های ASP.Net وجود دارد . این عمل برای افزایش سرعت سایت انجام می پذیرد، چرا که JS در سمت کلاینت پردازش شده و همین امر منجر به افزایش سرعت در پردازش و نهایتا افزایش سرعت سایت می شود. در این پست چنین تکنولوژی هایی را مورد بررسی قرار می دهیم.
به طور معمول، در کنترل هایی مانند TextBox هر زمان که شما کلید Enter را فشار دهید، صفحه وب Submit (ارسال) خواهد شد. به عبارت دیگر، صفحه به سمت سرور post back می شود. در این مطلب می خواهیم روش های جلوگیری از این عمل را با استفاده از JavaScriptبررسی کنیم تا سرعت سایت افزایش یابد و اعمال پردازش در سمت کلاینت انجام شود.
روش 1: JavaScript را به طور مستقیم به صفحه HTML تزریق کنید.
در این روش شما نیاز به یک رویداد onkeydown روی هر کنترل TextBox تعریف کنید.
صفحه HTML:
<%@ 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>
روش 2: تزریق JavaScript از طریق کد سمت سرور
اگر می خواهید به موارد بالا از طریق کد سمت سرور دست پیدا کنید، Code Behind زیر را به پروژه خود اضافه کنید
صفحه HTML:
<%@ 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>
Code behind:
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);");
}
}
}
}
}
روش 3: استفاده از JQuery
در دو روش فوق، در هر صورت ما نیاز به یک خط مشابه در هر کنترل داریم در برخی موارد شما ممکن است بخواهید استفاده مشابه از JQuery را هم داشته باشید. که به صورت زیر پیاده سازی می شود.
<%@ 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>
نمونه بالا بسیار آسان است و نیاز به تکرار کد ندارد.
- ASP.net
- 2k بازدید
- 2 تشکر