آموزش تخصصی آژاکس

آموزش ASP.NET


آموزش تخصصی Ajax

مقدمه

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 نترسید، زیرا این کار به شما امکان کنترل بیشتری روی این می دهد که کدام ناحیه ها چه زمانی آپدیت کنند.

کنترل UpdateProgress

یکی از مشکلات AJAX، این است که چون غیر همزمان و در پیش زمینه است، مرورگر هیچ statusیی به شما نشان نخواهد داد. اما با سرورهای و متدهای سریع، این مشکل زیاد هم بزرگ نیست، اما هروقت شما متدی دارید که زمان زیادی طول می کشد، احتمال دارد کاربر خسته شود. خوشبختانه، ASP.NET AJAX این مشکل را نیز با کنترلی بنام UpdateProgress حل می کند. این کنترل از template خودتان استفاده می کند تا نشان دهد یک متد غیر همزمان در حال کار کردن است. نگاهی به مثال زیر بیاندازید، که کنترلی را که در حال فعالیت است، نشان می دهد.

<%@ 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>UpdateProgress control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdateProgress runat="server" id="PageUpdateProgress">
            <ProgressTemplate>
                Loading...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel runat="server" id="Panel">
            <ContentTemplate>
                <asp:Button runat="server" id="UpdateButton" onclick="UpdateButton_Click" text="Update" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

متد زیر باید به فایل CodeBehind اضافه شود:

protected void UpdateButton_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

این مثال ساده به شما نشان خواهد داد استفاده از کنترل UpdateProgress چقدر آسان است. وقتی روی این دکمه کلیک می شود، script بمدت پنج ثانیه از standby می شود، و متن "Loading..." روی صفحه تان نمایش داده می شود. می توانید از هر چیزی در ProgressTemplate، شامل markup معمولی و کنترل های دیگر استفاده کنید. یکی از استفاده های رایج، GIF متحرک است، که با استفاده از موقعیت یابی CSS روی صفحه قرار داده شده است.

می توانید روی صفحه کنترل های چندگانه UpdateProgress داشته باشید، و با استفاده از پراپرتی AssociatedUpdatePanelID می توانید مطمئن شوید که UpdateProgress فقط هنگامی نمایش داده می شود که یک UpdatePanel ، آپدیت شده است.

آشنایی با پراپرتی DynamicLayout نیز جالب است. این پراپرتی می گوید آیا یک صفحه باید فضایی را برای کنترل progress رزرو کند یا خیر. اگر روی true تنظیم شود، که پیش فزض است، فضا دینامیک است، پس رزرو نمی شود، اما وقتی کنترل نشان داده می شود، فضا گرفته می شود. اگر دوست دارید فضا را رزر کنید، این پراپرتی را روی false تنضیم کنید. برای دیدن تفاوت، می توانید این پراپرتی را به مثال ما اضافه کنید و آن را تغییر دهید.

اگر تعدادی از postbackها سریع باشند، UpdateProgress، مدتی کوتاه نمایش داده خواهد شد، و منجر به رفتار چشمک زدن خواهد شد، که ممکن است کاربرانتان را گیج کند. به همین دلیل، می توانید حداقل زمان روی دادن را قبل از نشان دادن کنترل progress، تعیین کنید. این کار را می توان با اتریبیوت DisplayAfter انجام داد. باید عددی را بصورت میلی ثانیه تعیین کنید تا قبل از نمایش کنترل progress سپری شود؛ مثلاً اگر دوست دارید دو ثانیه صبر کنید عدد 2000 را تعیین کنید.

کنترل Timer

این کنترل به شما اجازه می دهد pstbackهایی را در بعضی از وقفه ها (interval) انجام دهید. اگر با UpdatePanels استفاده شود، که رایج ترین روش است، به صفحه شما اجازه آپدیت جزیی و زمان بندی شده را می دهد، اما می توان برای postback کردن کل صفحه نیز استفاده کرد. در این بخش، روی استفاده از تایمرهایی با UpdatePanels تمرکز خواهیم کرد.

در زیر مثالی ساده از نحوه استفاده از کنترل Timer آورده شده است که فقط هر پنج ثانیه یکبار timestamp را آپدیت می کند.

<%@ 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>Timers</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />
        <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label runat="server" id="DateStampLabel" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

خیلی ساده است. ما یک UpdatePanel نرمال داریم که حامل یک Trigger reference به کنترل timer جدید ماست.

این بدین معناست که هروقت Timer تیک می کند – یعنی رویداد Tick را اجرا می کند – پنل آپدیت می شود. همانطور که در لیست کد CodeBehind می بینید، هر بار که Timer اجرا می شود، DateStampLabelرا اجرا می کنیم. این کار را می توان با JavaScript موثرتر انجام داد، که زمان را روی clientside آپدیت می کند بجای اینکه سرور را درگیر کند. از این مثال فقط برای نشان دادن پتانسیل کنترل Timer استفاده می شود.

روش دیگر، شامل کردن Timer درون است. انجام این کار، ما را از تعریف یک trigger بی نیاز می کند، اما باید بدانید که رفتار، بسته به اینکه آیا Timer درون است یا بیرون آن، متفاوت خواهد بود. وقتی Timer درون UpdatePanel باشد، تا وقتی که UpdatePanel کاملاً آپدیت می شود، Timer دوباره ساخته نمی شود. این بدین معناست که اگر یک تایمری با وقفه شصت ثانیه ای داشته باشیم، و آپدیت پنج ثانیه طول بکشد، رویداد بعدی شصت ثانیه بعد از رویداد قبلی اجرا نمی شود، بلکه شصت و پنج ثانیه بعد اجرا می شود. از سوی دیگر، اگر تایمر خارج از UpdatePanel باشد، کاربر می تواند فقط پنجاه و پنج ثانیه به محتویات پنل نگاه خواهد کرد، قبل از اینکه دوباره آپدیت شود.

همیشه بیاد داشته باشید که گرچه آپدیت های جزیی روی سرور به سنگینی postbackهای واقعی نیستند، اما سرور هنوز contact می شود، و ممکن است هنگام استفاده از تایمرها، ostbackهای جزیی زیادی بدست آورید؛ که می تواند سرعت را کم کند. تا جاییکه می توانید همیشه از وقفه های طولانی استفاده کنید، و دقت کنید آیا contact کردن با سرور واقعاً ضروری است یا خیر.

برای یادگیری کامل ASP.NET به لینک زیر رجوع کنید

آموزش ASP.NET








نظرات:
متن امنیتی
گزارش تخلف
بعدی