روش ها مختلف اضافه کردن JS به کنترل های ASP.Net

سه شنبه 14 مهر 1394

راه های مختلفی برای تزریق JS به کنترل های ASP.Net وجود دارد . این عمل برای افزایش سرعت سایت انجام می پذیرد، چرا که JS در سمت کلاینت پردازش شده و همین امر منجر به افزایش سرعت در پردازش و نهایتا افزایش سرعت سایت می شود. در این پست چنین تکنولوژی هایی را مورد بررسی قرار می دهیم.

روش ها مختلف اضافه کردن JS به کنترل های ASP.Net

به طور معمول، در کنترل هایی مانند 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> 

نمونه بالا بسیار آسان است و نیاز به تکرار کد ندارد.

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید