( تعداد نمایش : 1158 )

JavaScript و ASP.NET

معمولاً با مشاهده عبارت ASP.NET مفهوم Server-Side (سمت سرور) در ذهن برنامه نویسان وب تداعی می شود. در مقابل، عبارت JavaScript احساس Client-Server (سمت کاربر) را برمی‎انگیزد و هر دو این تداعی کاملا درست است. اما شاید این تلقی ایجاد شود که بدلیل حوزه فعالیت هر یک پس این دو به یکدیگر اصولاً کاری ندارند! و هرکدام راه خود را می روند و ارتباطی بین این دو نیست. شاید می توانستیم بجای JavaScript بگوئیم JScript اما از آنجا که JavaScript بین اهالی وب رایج تر و شناخته شده تر است از آن جهت JavaScript را برای بحث خود برگزیده ایم. اما بحث ما بطور کلی در مورد کد برنامه سمت سرور و کد برنامه سمت کاربر است.

اما جالب است که بدانید ارتباط بسیار خوبی میان مفهوم Server-Side و Client-Side در ASP.NET وجود دارد. بعبارت دیگر بدون برقراری این پیوند عملا ASP.NET بسیار ناتوان بود. باز هم از نقطه نظر دیگر اتفاقا همین ارتباط قوی سبب افزایش کارآئی، توان و قدرت ASP.NET شده است بگونه ای که ASP.NET در پیاده سازی مفاهیم و امکانات قدرتمند خود بخوبی از کد سمت کاربر بهره برده است. شاید ذکر مختصر یکی دو مثال موضوع را برای شما روشن تر کند.

برای اولین مثال می توان مساله ارسال فرم یا همان Submit را عنوان کرد. همه فرم ها در ASP.NET توسط یک تابع سمت کاربر به زبان JavaScript و بنام doPostBack__ ارسال می شوند. همین الان در مرورگر خود کد HTML همین صفحه را ببینید و تابع مذکور را در اوایل این کد پیدا کنید. این تابع بصورت runtime هنگامی که این صفحه ابتدا بر روی سرور ایجاد یا اصطلاحا Render می شد به کد HTML این صفحه اضافه شده است.

برای مثال دوم می توان به موضوع اعتبارسنجی در ASP.NET و بهره گیری فراوان آن از کد سمت کاربر اشاره نمود. اگر با مقوله اعتبارسنجی در ASP.NET آشنا نیستید می توانید مقاله کنترلهای اعتبارسنجی در ASP.NET را مطالعه بفرمائید. اگر در سایت خود از کنترلهای اعتبارسنجی استفاده کرده باشید حتما متوجه وجود یک شاخه بنام aspnet_client شده اید که شما آن را نساخته اید. در شاخه های تودرتوی این شاخه نهایتا به سه عدد فایل محتوی کدهای JScript خواهید رسید که همان کدهای مورد نیاز ASP.NET برای انجام امور مختلف از جمله مساله اعتبارسنجی فرم ها در سمت کاربر می باشند.

شاید با ذکر این دو مثال ساده به اهمیت کدهای سمت کاربر و رابطه خوبی که ASP.NET با آن دارد پی برده باشید. در این مقاله قصد دارم شما را بیشتر با این ارتباط آشنا کنم و به شما نشان دهم که ASP.NET چه امکانات و ابزاری جهت برقراری و توسعه دلخواه این ارتباط دارد و اینکه شما چگونه می توانید کد برنامه سمت کاربر دلخواه خود را به صفحاتتان اضافه نموده و مانور بیشتری بدهید.

متدهای کلاس Page برای کدهای سمت کاربر

کلاس Page که در اصل همه فرم ها و صفحات ما در ASP.NET از آن مشتق می شوند دارای چند متد (Method) بسیار جالب و کاربردی در ارتباط با کدهای اسکریپت سمت کاربر می باشد.

RegisterClientScriptBlock: با استفاده از این متد می توان هر نوع کد JavaScript دلخواهی را جهت اجرا به صفحه مورد نظر افزود. این متد داری دو پارامتر از نوع رشته ای (string) بنام های key و script می باشد. پارامتر script همان کد JavaScript مورد نظر ماست و پارامتر key هم یک نام دلخواه ولی منحصر بفرد است که جهت شناسائی این اسکریپت تعیین می کنیم. اسکریپت مورد نظر شما دقیقاً پس از تگ آغازین <form> در کد HTML صفحه قرار خواهد گرفت. دقت داشته باشید که اسکریپت مورد نظر شما باید کامل باشد چرا که ASP.NET هیچ پردازشی برروی آن انجام نخواهد داد و چیزی را به آن اضافه نخواهد کرد. بعبارت دیگر لازم است تگ های مورد نیاز یک اسکریپت JavaScrip بهمراه تگ های توضیح (comment) در HTML را مانند مثال زیر قبلا به کد خود افزوده باشید.

<script language=”JavaScript”>
<!–
کد اسکریپت مورد نظر شما
// –>
</script>

به مثال زیر توجه فرمائید.

[C#]
<html>
<head>
<script language=”C#” runat=”server”>

public void Page_Load(Object sender, EventArgs e) {

// Form the script that is to be registered at client side.
String scriptString = “<script language=JavaScript> function DoClick() {“;
scriptString += “myForm.show.value=’Welcome to Microsoft .NET’}<”;
scriptString += “/”;
scriptString += “script>”;

if(!this.IsClientScriptBlockRegistered(“clientScript”))
this.RegisterClientScriptBlock(“clientScript”, scriptString);
}

</script>
</head>
<body topmargin=”20″ leftmargin=”10″>
<form id=”myForm” runat=”server”>
<input type=”text” id=”show” style=”width=200″> <input type=”button” value=”ClickMe” onclick=”DoClick()”>
</form>
</body>
</html>

IsClientScriptBlockRegistered: همانگونه که در مثال قبل دید این متد تعیین می کند که آیا اسکریپتی با کلید شناسائی (key) مورد نظر قبلاً توسط متد RegisterClientScriptBlock به صفحه افزوده شده است یا نه. بکارگیری این متد قبل از فراخوانی متد RegisterClientScriptBlock سبب می شود تا از تکرار یک اسکریپت در یک صفحه جلوگیری شده و منابع موجود در سرور به هدر نرود.

RegisterStartupScript: دقیقا همانند RegisterClientScriptBlock می باشد با این تفاوت که اسکریپت شما دقیقا قبل از تگ پایانی <form/> قرار خواهد گرفت. به مثال زیر توجه فرمائید.

[C#]
<html>
<head>
<script language=”C#” runat=”server”>
public void Page_Load(Object sender, EventArgs e) {
// Form the script to be registered at client side.
String scriptString = “<script language=JavaScript> function DoClick() {“;
scriptString += “showMessage2.innerHTML=’<h4>Welcome to Microsoft .NET!</h4>’}”;
scriptString += “function Page_Load(){ showMessage1.innerHTML=”;
scriptString += “‘<h4>RegisterStartupScript Example</h4>’}<”;
scriptString += “/”;
scriptString += “script>”;

if(!this.IsStartupScriptRegistered(“Startup”))
this.RegisterStartupScript(“Startup”, scriptString);
}

</script>
</head>
<body topmargin=”20″ leftmargin=”10″ onload=”Page_Load()”>
<form id=”myForm” runat=”server”>
<span id=”showMessage1″></span>
<br>
<input type=”button” value=”ClickMe” onclick=”DoClick()”>
<br>
<span id=”showMessage2″></span>
</form>
</body>
</html>

IsStartupScriptRegistered: همانگونه که در مثال قبل دید این متد تعیین می کند که آیا اسکریپتی با کلید شناسائی (key) مورد نظر قبلاً توسط متد RegisterStartupScript به صفحه افزوده شده است یا نه. بکارگیری این متد قبل از فراخوانی متد RegisterStartupScript سبب می شود تا از تکرار یک اسکریپت در یک صفحه جلوگیری شده و منابع موجود در سرور به هدر نرود.

GetPostBackClientEvent: با فراخوانی این متد می توان به نام تابع سمت کاربری که سبب ارسال (Submit) فرم شده است دست یافت.

GetPostBackEventReference: همانند متد GetPostBackClientEvent با فراخوانی این متد می توان به نام تابع سمت کاربری که سبب ارسال (Submit) فرم شده است دست یافت.

GetPostBackClientHyperlink: با فراخوانی این متد می توان به نام تابع سمت کاربری که سبب ارسال (Submit) فرم شده است و در حالیکه عبارت :javascript به ابتدای آن افزوده شده است، دست یافت.

RegisterOnSubmitStatement: با استفاده از این متد می توان به رویداد OnSubmit مربوط به فرم موجود در صفحه دسترسی داشت و کد مورد نظر خود را به آن افزود. به مثال زیر توجه فرمائید.

[C#]
void Page_Load(Object sender, EventArgs e)
{
String scriptString = “<script language=JavaScript> function doClick() {“;
scriptString += “document.write(‘<h4>’ + myForm.myHiddenField.value+ ‘</h4>’);}<”;
scriptString += “/” + “script>”;

RegisterHiddenField(“myHiddenField”, “Welcome to Microsoft .NET!”);

RegisterOnSubmitStatement(“submit”, “document.write(‘<h4>Submit button clicked.</h4>’)”);

RegisterStartupScript(“startup”, scriptString);
}

یک کلاس کوچک و ساده ولی کاربردی

در ادامه کلاس نمونه ای ارائه شده است که ممکن است برای برنامه های شما مفید باشد. متدهای موجود در این کلاس کارهای خیلی ساده ای را انجام می دهند اما استفاده از آنها سبب راحتی کار برنامه نویسی، مدیریت آسان برنامه و افزایش قابلیت خواندن کد برنامه می شود. توجه داشته باشید که متدهای این کلاس همگی بصورت static تعریف شده اند و برای استفاده از آنها نیازی به تعریف و ایجاد آبجکت مربوطه ندارید (نیازی به استفاده از عملگر new و تعریف متغیر از این نوع کلاس ندارید). در عوض باید نام نامکده (namespace) و نام کلاس را قبل از نام متد بیاورید (Common.PageUtil.MakeJavaScriptBlock). شما هم می توانید متدهای کاربردی دلخواه خود را به این کلاس نمونه اضافه نمائید.

using System;
using System.Web.UI;
using System.Text;
using System.Web.UI.WebControls;

namespace Common
{
/// <summary>
/// Utility class for ASP.NET pages
///
/// Be sure to notice that this code is provided as a technology sample
/// and ‘as is’ and no warranties are made by the author.
///
/// </summary>
public class PageUtil
{
// This static methods helps you build your JavaScript blocks easily
public static string MakeJavaScriptBlock(string strJavascript)
{
string sScript;
sScript = “\n<script language=\”javascript\”>\n”;
sScript += “<!–\n”;
sScript += strJavascript;
sScript += “// –>\n”;
sScript += “</script>\n”;
return sScript;
}

// This staic method is used in popup screens
// to close popup after doing some thing
public static void CloseCurrent(System.Web.UI.Page page)
{
string sScript = “window.close();”;
sScript = Common.PageUtil.MakeJavaScriptBlock (sScript);
page.RegisterStartupScript (“CloseCurrent”, sScript);
}

public static void ShowAlert(string msg, System.Web.UI.Page page)
{
if (page.Request.Browser.JavaScript == true)
{
string sScript = “alert(\”" + msg + “\”);\n”;
sScript = Common.PageUtil.MakeJavaScriptBlock (sScript);
page.RegisterStartupScript (“ShowAlertScript”, sScript);
}
}
}
}

دیدگاه خود را بیان کنید.

باید وارد سایت شده باشید برای دیدگاه دادن