hadafeayandeh
دوشنبه 17 مهر 1391, 17:13 عصر
آموزش ajax
(http://articles.tahlildadeh.com/post/Learn-Ajax.aspx)
مقدمه
ASP.NET AJAX، که قبلا "atlas" نامیده میشد، پیاده سازی مایکروسافت از قالب کاری بر اساس AJAX است که برای ASP.NET ایجاد شده است (گرچه می تواند در platformهای دیگر نیز مورد استفاده قرار گیرد). AJAX، مخفف عبارت Asynchronous JavaScript and XML است، که گرچه بسیار ساده است، ولی روشی برای انتقال داده ها بین سرور و کلاینت بدون ارسال کل صفحه است، و بدین طریق postback کاملی را ایجاد می کند. این کار به کاربر اجازه تجربه ای بهتر را می دهد، از آنجاییکه بارگذاری محتوای دینامیک را می توان در پشت زمینه بدون refresh یا redraw کردن نیز انجام داد. اگر تا بحال از gmail یا Outlook Web Access استفاده کرده باشید، پس حتما از یک webapplication با قابلیت Ajax استفاده کرده اید؛ بویژه اینکه گوگل Ajax را بسیار معروف کرده است.
در حالیکه استفاده از Ajax، بدون Microsoft ASP.NET AJAX کاملا امکانپذیر است، خیلی چیزها بسیار آسانتر هستند، زیرا مایکروسافت بعضی از کسل کننده ترین بخش های Ajax را در پیاده سازی شان جا داده است. مثلاً، 3 مرورگر معروف به روش های مختلفی برای استفاده از Ajax احتیاج دارند و دارای پیاده سازی های جاواسکریپت مختلفی هستند. ASP.NET AJAX، این کار را بسیار ساده کرده است، و به شما اجازه نوشتن یک کد برای هر سه مرورگر معروف را می دهد.
شروع کار
قبل از هر چیز، باید با ASP.NET آشنایی داشته باشید. اگر شما دارای IDE مناسب باشید، استفاده از ASP.NET AJAX بسیار آسان خواهد شد. توصیه می شود از Visual Web Developer 2008 Express اسنتفاده کنید.
بعد از اینکه آخرین نسخه را نصب کردید، Visual Web Developer 2008 Express را باز کنید، و هنگامی که "New Web Site..." را از منوی File انتخاب کردید، از تمپلیت "ASP.NET website" استفاده کنید.
طبق معمول، از مثال "Hello, world!" به عنوان مثال اول استفاده می کنیم. ابتدا با کد شروع می کنیم و. سپس آن را توضیح خواهیم داد. اگر قبلاً این کار را نکرده اید، باید یک پروژه وب سایت جدید در Visual Web Developer ایجاد کنید. IDE یک فایل جدید Default.aspx و Default.aspx.cs برای شما ایجاد خواهد کرد، که شیه همه صفحات دیگر ASP.NET خواهد بود. بیایید کمی AJAX به آن اضافه کنیم:
<%@ 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>Hello, world!</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lblHelloWorld" Text="Click the button!" />
<br /><br />
<asp:Button runat="server" ID="btnHelloWorld" OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
در CodeBehind، چیز جدیدی غیر از این رویداد که باید اضافه کنید وجود ندارد:
protected void btnHelloWorld_Click(object sender, EventArgs e)
{
lblHelloWorld.Text = "Hello, world - this is a fresh message from ASP.NET AJAX! The time right now is:
" + DateTime.Now.ToLongTimeString();
}
در قسمت markup، در مقایسه با ASP.NET معمولی، از دو چیز جدید استفاده می کنیم، کنترل ScriptManager و کنترل UpdatePanel. کنترل ScriptManager چک می کند آیا فایل های ASP.NET AJAX شامل شده اند و اینکه AJAX support اضافه شده است، و باید به هر صفحه ای که دوست دارید از قابلیت AJAX استفاده کنید، اضافه شود. بعد از manager، یکی دیگر از پرکاربردترین کنترل ها هنگام کار با AJAX، کنترل UpdatePanel است. این کنترل به شما اجازه می دهد markupیی را که دوست دارید به طور جزیی آپدیت شود، wrap کنید، بدین معنی که بدون ایجاد یک postback واقعی در سرور، آپدیت شود. توضیحات بیشتر در مورد کنترل UpdatePanel در فصل بعد خواهد آمد. علاوه بر این دو کنترل، هر چیز دیگری، کنترل های استاندارد هستند، بدون هیچ تغییری که رفتار جایگزین را نشان می دهد.
سعی کنید سایت مثال را اجرا کنید، و روی دکمه کلیک کنید. لیبل با متن Hello world، و زمان کنونی آپدیت می شود. به طور مکرر، روی دکمه کلیک کنید، و خواهید دید که لیبل هر دفعه timestamp کنونی را بدست خواهد آورد. به غیبت عجیب پنجره چشمک زن و نوار وضعیت در حال اجرا توجه داشته باشید – هر کاری بدون آپدیت کردن هیچ چیز جز لیبل انجام نمی شود. ما اولین صفحه AJAX را ایجاد کرده ایم. اگر دوست دارید بدانید این صفحه چگونه کار می کند، "enablepartialrendering" کنترل ScriptManager را روی false تنظیم کنید:
<asp:ScriptManager ID="MainScriptManager" runat="server" enablepartialrendering="false" />
این کار جلوی استفاده از rendering جزیی را روی صفحه می گیرد، و به شما نشان می دهد بدون AJAX چگونه کار می کند.
در قسمت بعدی، نگاهی به کنترل های دیگر AJAX و چگونگی استفاده از آنها خواهیم انداخت.
کنترل UpdatePanel
احتمالاً این کنترل، مهم ترین کنترل در بسته ASP.NET AJAX است. این کنترل، اجازه render جزیی ناحیه ای را می دهد. قبلا از آن در مثال Hello world استفاده کردیم، در ادامه نگاهی عمیق تر به جنبه های دیگر این کنترل خواهیم انداخت.
تگ <asp:UpdatePanel> دارای دو زیرتگ (childtags) است: ContentTemplate و Triggers. تگ ContentTemplate ضروری است زیرا دربرگیرنده محتویات پنل است. این محتویات می تواند هر چیزی که معمولاً در صفحه گذاشته می شود، باشد،؛ از متن گرفته تا کنترل های وب. تگ trigger به شما اجازه تعریف بعضی triggerها را می دهد که پنل را وادار به آپدیت کردن محتویاتش می کند. مثال زیر، نحوه استفاد ه از این دو childtag را نشان می دهد.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UpdatePanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
در زیر CodeBehind آورده شده است. کافیست متد زیر را به فایل اضافه کنید:
protected void UpdateButton_Click(object sender, EventArgs e)
{
DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();
}
خوب، این مثال چه می خواهد بگوید؟ بیایید امتحانش کنیم، و روی آن دو دکمه کلیک کنیم. متوجه خواهید شد که دکمه اول، فقط datestamp اول را آپدیت می کند، در حالیکه دکمه دوم، هر دو را آپدیت می کند؛ چرا؟ چون ما پنل ها راطوری تنظیم کرده ایم که به طور شرطی آپدیت کنند، بدین معنا که محتویاتشان فقط در صورتی آپدیت می شوند که چیزی درون آنها یک postback ایجاد کند، یا یکی از triggerهای تعریف شده، اجرا شود. همانطور که می بینید، UpdatePanel اول حامل تریگری است که دکمه دوم را reference می کند. این کار تضمین می کند که پنل اول، حتی وقتی هم که کنترلی در UpdatePanel دیگر استفاده می شود، آپدیت می شود. تگ AsyncPostBackTrigger بسیار ساده است- فقط دارای دو صفت (attribute) است؛ یکی controlid که مرجعی به کنترلی است که می تواند آن را trigger کند، و دیگری eventname، که می گوید کدام enettype می تواند باعث اجرا شدن تریگر شود. اگر دوست دارید محتویات یک UpdatePanel آپدیت شوند، می توانید پراپرتی updatemode را به Always تغییر دهید.
در کل، UpdatePanel فقط باید در مناطقی باشد که باشند که دوست دارید آپدیت جزیی را انجام دهید. کل صفحه را در یک UpdatePanel، wrap نکنید، و از استفاده از چندین UpdatePanel نترسید، زیرا این کار به شما امکان کنترل بیشتری روی این می دهد که کدام ناحیه ها چه زمانی آپدیت کنند.
ادامه دارد....
برای یادگیری کامل آژاکس لطفا به لینک روبرو رجوع کنید: آموزش AJAX (http://www.tahlildadeh.com/CourseDetails/25/Elementary-ASP.NET.aspx)
(http://articles.tahlildadeh.com/post/Learn-Ajax.aspx)
مقدمه
ASP.NET AJAX، که قبلا "atlas" نامیده میشد، پیاده سازی مایکروسافت از قالب کاری بر اساس AJAX است که برای ASP.NET ایجاد شده است (گرچه می تواند در platformهای دیگر نیز مورد استفاده قرار گیرد). AJAX، مخفف عبارت Asynchronous JavaScript and XML است، که گرچه بسیار ساده است، ولی روشی برای انتقال داده ها بین سرور و کلاینت بدون ارسال کل صفحه است، و بدین طریق postback کاملی را ایجاد می کند. این کار به کاربر اجازه تجربه ای بهتر را می دهد، از آنجاییکه بارگذاری محتوای دینامیک را می توان در پشت زمینه بدون refresh یا redraw کردن نیز انجام داد. اگر تا بحال از gmail یا Outlook Web Access استفاده کرده باشید، پس حتما از یک webapplication با قابلیت Ajax استفاده کرده اید؛ بویژه اینکه گوگل Ajax را بسیار معروف کرده است.
در حالیکه استفاده از Ajax، بدون Microsoft ASP.NET AJAX کاملا امکانپذیر است، خیلی چیزها بسیار آسانتر هستند، زیرا مایکروسافت بعضی از کسل کننده ترین بخش های Ajax را در پیاده سازی شان جا داده است. مثلاً، 3 مرورگر معروف به روش های مختلفی برای استفاده از Ajax احتیاج دارند و دارای پیاده سازی های جاواسکریپت مختلفی هستند. ASP.NET AJAX، این کار را بسیار ساده کرده است، و به شما اجازه نوشتن یک کد برای هر سه مرورگر معروف را می دهد.
شروع کار
قبل از هر چیز، باید با ASP.NET آشنایی داشته باشید. اگر شما دارای IDE مناسب باشید، استفاده از ASP.NET AJAX بسیار آسان خواهد شد. توصیه می شود از Visual Web Developer 2008 Express اسنتفاده کنید.
بعد از اینکه آخرین نسخه را نصب کردید، Visual Web Developer 2008 Express را باز کنید، و هنگامی که "New Web Site..." را از منوی File انتخاب کردید، از تمپلیت "ASP.NET website" استفاده کنید.
طبق معمول، از مثال "Hello, world!" به عنوان مثال اول استفاده می کنیم. ابتدا با کد شروع می کنیم و. سپس آن را توضیح خواهیم داد. اگر قبلاً این کار را نکرده اید، باید یک پروژه وب سایت جدید در Visual Web Developer ایجاد کنید. IDE یک فایل جدید Default.aspx و Default.aspx.cs برای شما ایجاد خواهد کرد، که شیه همه صفحات دیگر ASP.NET خواهد بود. بیایید کمی AJAX به آن اضافه کنیم:
<%@ 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>Hello, world!</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lblHelloWorld" Text="Click the button!" />
<br /><br />
<asp:Button runat="server" ID="btnHelloWorld" OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
در CodeBehind، چیز جدیدی غیر از این رویداد که باید اضافه کنید وجود ندارد:
protected void btnHelloWorld_Click(object sender, EventArgs e)
{
lblHelloWorld.Text = "Hello, world - this is a fresh message from ASP.NET AJAX! The time right now is:
" + DateTime.Now.ToLongTimeString();
}
در قسمت markup، در مقایسه با ASP.NET معمولی، از دو چیز جدید استفاده می کنیم، کنترل ScriptManager و کنترل UpdatePanel. کنترل ScriptManager چک می کند آیا فایل های ASP.NET AJAX شامل شده اند و اینکه AJAX support اضافه شده است، و باید به هر صفحه ای که دوست دارید از قابلیت AJAX استفاده کنید، اضافه شود. بعد از manager، یکی دیگر از پرکاربردترین کنترل ها هنگام کار با AJAX، کنترل UpdatePanel است. این کنترل به شما اجازه می دهد markupیی را که دوست دارید به طور جزیی آپدیت شود، wrap کنید، بدین معنی که بدون ایجاد یک postback واقعی در سرور، آپدیت شود. توضیحات بیشتر در مورد کنترل UpdatePanel در فصل بعد خواهد آمد. علاوه بر این دو کنترل، هر چیز دیگری، کنترل های استاندارد هستند، بدون هیچ تغییری که رفتار جایگزین را نشان می دهد.
سعی کنید سایت مثال را اجرا کنید، و روی دکمه کلیک کنید. لیبل با متن Hello world، و زمان کنونی آپدیت می شود. به طور مکرر، روی دکمه کلیک کنید، و خواهید دید که لیبل هر دفعه timestamp کنونی را بدست خواهد آورد. به غیبت عجیب پنجره چشمک زن و نوار وضعیت در حال اجرا توجه داشته باشید – هر کاری بدون آپدیت کردن هیچ چیز جز لیبل انجام نمی شود. ما اولین صفحه AJAX را ایجاد کرده ایم. اگر دوست دارید بدانید این صفحه چگونه کار می کند، "enablepartialrendering" کنترل ScriptManager را روی false تنظیم کنید:
<asp:ScriptManager ID="MainScriptManager" runat="server" enablepartialrendering="false" />
این کار جلوی استفاده از rendering جزیی را روی صفحه می گیرد، و به شما نشان می دهد بدون AJAX چگونه کار می کند.
در قسمت بعدی، نگاهی به کنترل های دیگر AJAX و چگونگی استفاده از آنها خواهیم انداخت.
کنترل UpdatePanel
احتمالاً این کنترل، مهم ترین کنترل در بسته ASP.NET AJAX است. این کنترل، اجازه render جزیی ناحیه ای را می دهد. قبلا از آن در مثال Hello world استفاده کردیم، در ادامه نگاهی عمیق تر به جنبه های دیگر این کنترل خواهیم انداخت.
تگ <asp:UpdatePanel> دارای دو زیرتگ (childtags) است: ContentTemplate و Triggers. تگ ContentTemplate ضروری است زیرا دربرگیرنده محتویات پنل است. این محتویات می تواند هر چیزی که معمولاً در صفحه گذاشته می شود، باشد،؛ از متن گرفته تا کنترل های وب. تگ trigger به شما اجازه تعریف بعضی triggerها را می دهد که پنل را وادار به آپدیت کردن محتویاتش می کند. مثال زیر، نحوه استفاد ه از این دو childtag را نشان می دهد.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UpdatePanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
در زیر CodeBehind آورده شده است. کافیست متد زیر را به فایل اضافه کنید:
protected void UpdateButton_Click(object sender, EventArgs e)
{
DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();
}
خوب، این مثال چه می خواهد بگوید؟ بیایید امتحانش کنیم، و روی آن دو دکمه کلیک کنیم. متوجه خواهید شد که دکمه اول، فقط datestamp اول را آپدیت می کند، در حالیکه دکمه دوم، هر دو را آپدیت می کند؛ چرا؟ چون ما پنل ها راطوری تنظیم کرده ایم که به طور شرطی آپدیت کنند، بدین معنا که محتویاتشان فقط در صورتی آپدیت می شوند که چیزی درون آنها یک postback ایجاد کند، یا یکی از triggerهای تعریف شده، اجرا شود. همانطور که می بینید، UpdatePanel اول حامل تریگری است که دکمه دوم را reference می کند. این کار تضمین می کند که پنل اول، حتی وقتی هم که کنترلی در UpdatePanel دیگر استفاده می شود، آپدیت می شود. تگ AsyncPostBackTrigger بسیار ساده است- فقط دارای دو صفت (attribute) است؛ یکی controlid که مرجعی به کنترلی است که می تواند آن را trigger کند، و دیگری eventname، که می گوید کدام enettype می تواند باعث اجرا شدن تریگر شود. اگر دوست دارید محتویات یک UpdatePanel آپدیت شوند، می توانید پراپرتی updatemode را به Always تغییر دهید.
در کل، UpdatePanel فقط باید در مناطقی باشد که باشند که دوست دارید آپدیت جزیی را انجام دهید. کل صفحه را در یک UpdatePanel، wrap نکنید، و از استفاده از چندین UpdatePanel نترسید، زیرا این کار به شما امکان کنترل بیشتری روی این می دهد که کدام ناحیه ها چه زمانی آپدیت کنند.
ادامه دارد....
برای یادگیری کامل آژاکس لطفا به لینک روبرو رجوع کنید: آموزش AJAX (http://www.tahlildadeh.com/CourseDetails/25/Elementary-ASP.NET.aspx)