دریافت مقاله 
 

 

خلاصه : در حال حاضر با روی کار آمدن تکنولوژی Ajax نیاز به دانستن java script برای یک برنامه نویس ASP.NET کار نسبت به گذشته بیشتر احساس می شود.لذا در این مقاله سعی بر آن شده است که اطلاعات بسیار مفیدی را در ارتباط با استفاده از javascript برای برنامه نویسان ASP.NET فراهم کنیم.


نکته :

این مقاله از آدرس (و آدرس گرفتن سورس برنامه) زیر گرفته شده است :

http://www.karamasoft.com/WhitePapers/WhitePapers.aspx




با نظرات و پیشنهادات خود ما را در ارائه هر چه بهتر این مقاله ، ما را یاری بفرمایید.


با تشکر

عبدالله زاده

این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید


تابستان 86


فهرست مطالب :


  1. گرفتن اطلاعات عناصر DOM با استفاده از یک متد ساده

  2. اضافه / خذف کردن event handler ها

  3. مشاهده وضعیت اخیر HTML صفحتان

  4. غیرفعال کردن یک دکمه بعد از کلیک کردن بر روی آن ، جهت جلوگیری از ارسال postback های متوالی به سرور

  5. ارجاع به اشیا تودرتو با عمق زیاد

  6. تولید یک watermark textbox

  7. قرار دادن پنجره در وسط صفحه نمایش

  8. اعتبارسنجی ماکزیمم طول کاراکتر دریک text area

  9. نمایش دادن پنجره confirmation قبل از بسته شدن پنجره

10. فرمت بندی اعداد



مقدمه


هیچ شکی نیست که کنترل های ASP.NET می توانند تمامی نیاز شما را در سمت سرور به خوبی انجام دهند. اما با این وجود ، شما ممکن است که برای تولید یک user interface خوب برای کاربران سایتتان نیاز به برنامه نویسی client-side داشته باشید.

Javascript یک زبان پراستفاده و قوی برای برنامه نویسی client-side است که معمولا در محیط های برنامه نویسی server-side استفاده می شود. در این مقاله سعی شده است که مهمترین کدهایی که یک برنامه نویس بویژه کسانی با C# کار می کنند برای کار با java script ، گفته شود.




1- گرفتن اطلاعات عناصر DOM با استفاده از یک متد ساده


در javascript متدی با نام getElementById وجود دارد که ، یک ارجاع از شی با مقدار ID مشخص شده را برمی گرداند.

برای مثال به قطعه کد زیر توجه کنید : در این مثال مقدار وارد شده در کنترلی با ID ، txtMessage گرفته و نمایش داده می شود.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

<script language="javascript" type="text/javascript">

function showAlert()

{

var s = document.getElementById("txtMessage").value;

alert(s);

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtMessage" runat="server"></asp:TextBox>

<br />

<asp:Button ID="btnAlert" runat="server" Text="show alart" OnClientClick="showAlert();" />

</div>

</form>

</body>

</html>







2- اضافه / حذف کردن event handler ها


شما به آسانی می توانید یک تابع را به یک رویداد اضافه و یا از آن حذف کنید ، بنابراین آن متد هر زمان که رویداد مورد نظر اتفاق بیفتد ، اجرا خواهد شد.

Internet Explorer DOM (Document Object Model) متدهای attachEvent

و detachEvent را برای این منظور فراهم کرده است ، در حالیکه Mozilla DOM متدهای addEventListener و removeEventListener را فراهم کرده است.


شما می توانید از کدهای زیر برای اضافه/حذف کردن event handler ها برای cross-browser استفاده نمایید:


function AddEventHandler(obj, eventName, functionNotify)

{

RemoveEventHandler(obj, eventName, functionNotify);

 

if (obj.attachEvent)

{

obj.attachEvent('on' + eventName, functionNotify);

}

else if (obj.addEventListener)

{

obj.addEventListener(eventName, functionNotify, true);

}

else

{

obj['on' + eventName] = functionNotify;

}

}

 

function RemoveEventHandler(obj, eventName, functionNotify)

{

if (obj.detachEvent)

{

obj.detachEvent('on' + eventName, functionNotify);

}

else if (obj.removeEventListener)

{

obj.removeEventListener(eventName, functionNotify, true);

}

else

{

obj['on' + eventName] = null;

}

}



برای مثال ، شما می توانید از متدهای بالا بصورت زیر استفاده نمایید :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

<script language="javascript" type="text/javascript">


function AddEventHandler(obj, eventName, functionNotify)

{

RemoveEventHandler(obj, eventName, functionNotify);

 

if (obj.attachEvent)

{

obj.attachEvent('on' + eventName, functionNotify);

}

else if (obj.addEventListener)

{

obj.addEventListener(eventName, functionNotify, true);

}

else

{

obj['on' + eventName] = functionNotify;

}

}

 

function RemoveEventHandler(obj, eventName, functionNotify)

{

if (obj.detachEvent)

{

obj.detachEvent('on' + eventName, functionNotify);

}

else if (obj.removeEventListener)

{

obj.removeEventListener(eventName, functionNotify, true);

}

else

{

obj['on' + eventName] = null;

}

}



function AddKeyDownEventHandler(obj) {

AddEventHandler(obj, 'keydown', KeyDownEventHandler);

}


function KeyDownEventHandler(evnt) {

alert('Event key code: ' + GetEventKeyCode(evnt));

}



function GetEventKeyCode(evnt) {

return evnt.keyCode ? evnt.keyCode : evnt.charCode ? evnt.charCode :

evnt.which ? evnt.which : void 0;

}

</script>

 

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtKeyDown" runat="server"></asp:TextBox>

</div>

</form>

</body>

</html>


C#


protected void Page_Load(object sender, EventArgs e)

{

txtKeyDown.Attributes.Add("onkeydown", "AddKeyDownEventHandler(this)");

}


همانطور که در کدهای بالا مشاهده می کنید، در زمان load شدن رویداد onkeydown به کنترل txtKeyDown اضافه می شود و به محض اینکه کاربر کاراکتری را در کنترل txtKeyDown وارد می کند ، کد آن نشان داده می شود.



3- مشاهده وضعیت اخیر HTML صفحه


زمانیکه شما گزینه View Source را در مرورگرتان انتخاب می کنید، می توانید وضعیت (کدهای HTML) صفحه را در زمانی که صفحهload می شود را مشاهده نمایید. با وجود این ، شما زمانیکه در صفحتان قسمت های dynamic دارید، بویژه در محیط AJAX، ممکن است که نیاز داشته باشید کد جاری صفحه تان را بخواهید در زمان خاصی مشاهده نمایید .

برای این منظور، کدهای زیر را در قسمت address bar صفحه تان قرار دهید تا به این هدف برسید .

Internet Explorer

javascript:'<xmp>'+window.document.body.outerHTML+'</xmp>'


Firefox

javascript:'<xmp>'+document.getElementsByTagName('html')[0].innerHTML+'</xmp>'


البته شما می توانید این دو کد جاوا اسکریپت را بصورت زیر برای عمل کردن در هر دو مرورگر (cross-browser) با هم ترکیب کنید :

javascript:'<xmp>'+((document.all) ? window.document.body.outerHTML :

document.getElementsByTagName('html')[0].innerHTML)+'</xmp>'



4- غیرفعال کردن یک دکمه بعد از کلیک کردن بر روی آن ، جهت جلوگیری از ارسال postback های متوالی به سرور


به عنوان یک برنامه نویس شما ممکن است که هرگز دکمه submit را دوبار پشت سر هم کلیک نکنید ، اما کاربران سایتتان ممکن است که این عمل را انجام دهند و باعث شود که کد مربوط به دکمه دوبار اجرا شود. یا به عبارتی زمانیکه مرورگر در حال انجام کاری است چند بار کلیک شود. حال اگر شما در این بخش عملیات مهمی را انجام دهید، برای مثال عملیاتی را بر روی دیتایس انجام دهید و یا ایمیلی را بخواهید ارسال نمایید، با چند بار کلیک کردن، ممکن موجب کارهای ناخواسته ای (مضر) شود. حتی زمانی هم که کار حیاتی هم انجام نشود ، باعث انجام سربار غیرضروری بر روی سرور خواهد شد.


برای جلوگیری از postback های پشت سر هم به سرور ، شما می توانید به محض اینکه کاربر دکمه مورد نظر را کلیک زد ، در رویداد کلیک دکمه آن را غیر فعال نماید (و یک عبارت مناسب بر روی دکمه نشان دهید).

برای این منظور می توان کد زیر را نوشت :


JavaScript

function DisableButton(buttonElem) {

buttonElem.value = 'Please Wait...';

buttonElem.disabled = true;

}


ASPX

<asp:button id="btnSubmit" runat="server" Text="Submit" />


C#

protected void Page_Load(object sender, EventArgs e)

{

btnSubmit.Attributes.Add("onclick", "DisableButton(this);" +

Page.ClientScript.GetPostBackEventReference(this,

btnSubmit.ID.ToString()));

}




5- ارجاع به اشیا تودرتو با عمق زیاد


اشیاء را در جاوا اسکریپت می توان بصورت تودرتو و با استفاده از عملگر dot (نقطه) بصورت زیر فراخوانی کرد :

tableElem.rows[0].cells[0]


اگر شما می خواهید که عملیات زیادی را بر روی عباراتی همانند بالا انجام دهید، بهتر است که متغیری که به آن اشاره می کند ، را تعریف کنید. برای مثال ، اگر شما نیاز دارید که در قسمتی از برنامه تان به سلول های داخل جدول دسترسی داشته باشید ، بهتر است که بصورت زیر عمل نمایید :

var cellsColl = tableElem.rows[0].cells;

for (var i = 0; i < cellsColl.length; i++) {

cellsColl[i].style.backgroundColor = '#FF0000';

}






6- تولید یک watermark textbox


هدف اصلی از یک watermark (متن سایه دار) فراهم کردن اطلاعاتی برای کاربر درباره textbox بدون به هم ریختن ظاهر صفحه است. شما ممکن است که موارد زیادی از این قبیل را در search textboxes ، در سایت ها دیده باشید. زمانی که یک watermarked textbox خالی باشد ، آن عبارتی را به کاربر نشان می دهد و زمانی که کاربر متنی را در textbox وارد می کند ، آن عبارت ناپدید می شود. زمانی که کابر این نوع از textbox ها را خالی رها می کند ، آن عبارت دوباره برخواهد گشت.


شما می توانید به راحتی این رفتارها را به یک textbox با استفاده از اضافه کردن دو رویداد onfocuse و onblur ، اضافه کنید. در رویداد focus باید مقدار داخل textbox را اگر با مقدار متن watermark ، یکی باشد پاک می کند و در رویداد blur ، اگر مقدار داخل textbox خالی باشد ، مقدار داخل آن باید با مقدار watermark پر شود.


javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="waterMark.aspx.cs" Inherits="waterMark" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

<script language="javascript" type="text/javascript">

function WatermarkFocus(txtElem, strWatermark) {

if (txtElem.value == strWatermark) txtElem.value = '';

}

function WatermarkBlur(txtElem, strWatermark) {

if (txtElem.value == '') txtElem.value = strWatermark;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<br />

<asp:TextBox ID="txtWatermark" runat="server"></asp:TextBox>

<br />

<br />

<asp:Button ID="Button1" runat="server" Text="Button" /></div>

</form>

</body>

</html>


C#

protected void Page_Load(object sender, EventArgs e)

{

string strWatermark = "Search Karamasoft.com";

txtWatermark.Text = strWatermark;

txtWatermark.Attributes.Add("onfocus", "WatermarkFocus(this, '" + strWatermark + "');");

txtWatermark.Attributes.Add("onblur", "WatermarkBlur(this, '" +

strWatermark + "');");

}




7- قرار دادن پنجره در وسط صفحه نمایش


شما می توانید محل باز شدن پنجره ها را با استفاده از متد window.open در وسط صفحه مانیتور قرار دهید. هر دو مرورگر Internet Explorer و Mozila DOM شی بنام window فراهم کرده اند که خصوصیاتی با نام های availWidth و availHeight برای بدست آوردن عرض و ارتفاع صفحه مانیتور کاربر را به شما می دهد. تنها کاری که شما باید انجام دهید ، بدست آوردن اختلاف بین ارتفاع (عرض) مانیتور و ارتفاع (عرض) پنجره و تقسیم آن به 2 است.


آرگومان features مربوط به شئ window بطور عادی چیزی شبیه زیر است :

'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,st

atus=yes,toolbars=no'


ابتدا ، ما به متدی نیاز داریم که بتواند از این رشته مقادیر عرض و ارتفاع را بدست آورد. از آنجایی که ممکن است بخواهیم از این متد در جاهای دیگر به منظور جدا کردن مقادیر دوتایی name/value استفاده کنیم ، بهتر است که آن را بصورت کلی پیاده سازی نماییم.


function GetAttributeValue(attribList, attribName, firstDelim,

secondDelim)

{

var attribNameLowerCase = attribName.toLowerCase();

if (attribList) {

var attribArr = attribList.split(firstDelim);

for (var i = 0, loopCnt = attribArr.length; i < loopCnt; i++) {

var nameValueArr = attribArr[i].split(secondDelim);

for (var j = 0, loopCnt2 = nameValueArr.length; j < loopCnt2;

j++) {

if (nameValueArr[0].toLowerCase().replace(/\s/g, '') ==

attribNameLowerCase && loopCnt2 > 1) {

return nameValueArr[1];

}

}

}

}

}


سپس باید متدهایی برای بدست آوردن مقادیر عرض و ارتفاع صفحه بصورت زیر به آن اضافه کرد.

function GetScreenWidth()

{

return window.screen.availWidth;

}

function GetScreenHeight()

{

return window.screen.availHeight;

}



حال ما می توانیم متدی برای قرار دادن صفحه مان در وسط مانیتور با استفاده از این متدها بصورت زیر بنویسیم .

function WindowOpenHelper(sURL, sName, sFeatures, centerWindow) {

var windowLeft = '';

var windowTop = '';

if (centerWindow) {

var windowWidth = GetAttributeValue(sFeatures, 'width', ',', '=');

windowLeft = (typeof(windowWidth) != 'undefined') ? ',left=' +

((GetScreenWidth() - windowWidth) / 2) : '';

var windowHeight = GetAttributeValue(sFeatures, 'height', ',', '=');

windowTop = (typeof(windowHeight) != 'undefined') ? ',top=' +

((GetScreenHeight() - windowHeight) / 2) : '';

}

window.open(sURL, sName, sFeatures + windowLeft + windowTop);

}



این متد چهار پارامتر می گیرد که عبارتند از : URL صفحه ای که باید نشان داده شود، نام پنجره ، لیستی از آیتم های feature ، و یک مقدار بولین که تعیین می کند صفحه در مرکز قرار گیرد یا خیر.

حال شما می توانید متد WindowOpenHelper را در صفحه مورد نظر فراخوانی کنید.


JavaScript

function OpenWindowCentered(windowWidth, windowHeight) {

WindowOpenHelper('http://www.karamasoft.com', 'WindowCentered',

'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,st

atus=yes,toolbars=no', true);

}


ASPX

<asp:LinkButton ID="lbOpenWindowCentered" runat="server"

OnClientClick="OpenWindowCentered(); return false;">Open window

centered</asp:LinkButton>





8- اعتبارسنجی ماکزیمم طول کاراکتر دریک text area


عنصر input از نوع text در html خصوصیتی بنام MaxLength دارد که برای تنظیم کردن ماکزیمم کاراکتر قابل نوشتن در آن بکار می رود. در صورتیکه عنصر TextArea ویژگی برای تنظیم کردن محدودیت کاراکتر های قابل نوشتن در آن را ندارد. زمانی که شما از کنترل TextBox درASP.NET با تنظیم کردن TextMode=”MultiLine” در یک صفحه استفاده می نمایید، به یک کنترل TextArea در HTML تبدیل می شود و شما نمی توانید از خصوصیت MaxLength آن استفاده نمایید.


کاری که شما می توانید انجام دهید این است که یک Keypress event handler برای کنترل TextBox ایجاد نمایید. بوسیله این رویداد شما می توانید طول رشته وارد شده در آن را چک نمایید و زمانیکه طول رشته برابر MaxLength شد آن را cancel نمایید.


Java script

function ValidateMaxLength(evnt, str, maxLength) {

var evntKeyCode = GetEventKeyCode(evnt);

// Ignore keys such as Delete, Backspace, Shift, Ctrl, Alt, Insert, Delete, Home, End, Page Up, Page Down and arrow keys

var escChars = ",8,17,18,19,33,34,35,36,37,38,39,40,45,46,";

if (escChars.indexOf(',' + evntKeyCode + ',') == -1) {

if (str.length >= maxLength) {

alert("You cannot enter more than " + maxLength + " characters.");

return false;

}

}

return true;

}


ASP.NET

<asp:TextBox ID="txtValidateMaxLength" runat="server" TextMode="MultiLine"></asp:TextBox>


C#

protected void Page_Load(object sender, EventArgs e)

{

txtValidateMaxLength.Attributes.Add("onkeypress", "return

ValidateMaxLength((window.event) ? window.event : arguments[0],

this.value, 5)");

}




9- نمایش دادن پنجره confirmation قبل از بسته شدن پنجره


اگر شما نیاز دارید که یک پنجره confirmation قبل از اینکه کاربر صفحه تان را ببندد نشان دهید ، می توانید از رویداد beforeunload شی window برای نشان دادن پیغام مورد نظرتان استفاده نمایید.


JavaScript

function AddUnloadHandler()

{

AddEventHandler(window, 'beforeunload', HandleUnload);

}


function HandleUnload()

{

var strConfirm = 'Please make sure you saved your changes before

closing the page.';

if (document.all) {

window.event.returnValue = strConfirm;

}

else {

alert(strConfirm);

var evnt = arguments[0];

evnt.stopPropagation();

evnt.preventDefault();

}

}


ASPX

<body onload="AddUnloadHandler()">



10- فرمت عدد


شما می توانید از متد زیر برای تنظیم کردن فرمت اعداد استفاده نمایید. این متد چهار پارامتر دارد : عددی برای فرمت بندی ، عددی برای تعیین تعداد ارقام اعشار، یک مقدار Boolean برای تعیین اینکه صفر به عدد اضافه شود یا خیر، یک مقدار Boolean برای تعیین اینکه کاراکتر کاما برای جدا سازی بین اعداد استفاده شود یا خیر.



function FormatNumber(num, decimalPlaces, appendZeros, insertCommas)

{

var powerOfTen = Math.pow(10, decimalPlaces);

var num = Math.round(num * powerOfTen) / powerOfTen;

if (!appendZeros && !insertCommas) {

return num;

}

else

{

var strNum = num.toString();

var posDecimal = strNum.indexOf(".");

if (appendZeros) {

var zeroToAppendCnt = 0;

if (posDecimal < 0) {

strNum += ".";

zeroToAppendCnt = decimalPlaces;

}

else {

zeroToAppendCnt = decimalPlaces - (strNum.length - posDecimal

- 1);

}

for (var i = 0; i < zeroToAppendCnt; i++) {

strNum += "0";

}

}

if (insertCommas && (Math.abs(num) >= 1000)) {

var i = posDecimal;

if (i < 0) {

i = strNum.length;

}

i -= 3;

while (i >= 1) {

strNum = strNum.substring(0, i) + ',' + strNum.substring(i,

strNum.length);

i -= 3;

}

}

return strNum;

}

}



ASP.NET


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="formatNumber.aspx.cs" Inherits="formatNumber" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

 

<script language="javascript" type="text/javascript">

 

function FormatNumber(num, decimalPlaces, appendZeros, insertCommas)

{…}


function testFormatNumber(num)

{

var n = FormatNumber(num,0,false,true);

document.getElementById('txt2').value = n;

}

 

</script>

 

</head>

<body>

<form id="form1" runat="server">

<div>

<input id="Text2" type="text" onkeyup="testFormatNumber(this.value)" />

<br />

<input id="txt2" type="text" />

</div>

</form>

</body>

</html>


JavaScript Tips for ASP JavaScript Tips for ASP