تاکنون و در طي شش مقاله با مواردي نظير شي XMLHttpRequest ، برخي الگوهاي Ajax استفاده شده در زمان پياده سازي برنامه هاي وب قدرتمند با توانائي ايجاد تعامل بيشتر ، معماري ASP.NET AJAX و سناريوهاي مختلف پياده سازي آشنا شديم .
در اين بخش با استناد به موارد فوق با نحوه استفاده از اين فريمورک آشنا خواهيم شد و صفحات وب مبتني بر Ajax را با تبعيت از مدل پياده سازي با محوريت سرويس دهنده ايجاد خواهيم کرد .
مدل پياده سازي با محوريت سرويس دهنده
همانگونه که در بخش ششم اشاره گرديد ، در اين مدل ، منطق برنامه و اكثر عناصر بخش رابط كاربر بر روي سرويس دهنده باقي مي مانند و در ادامه ، تغييرات مورد نياز رابط کاربر براي برنامه مرورگر ارسال مي گردد ( در مقابل اين که تغييرات از طريق اجراي اسکريپت هاي سمت سرويس گيرنده ايجاد شوند) .
براي آشنائي عملي با مدل فوق ، در ادامه يک نمونه مثال ساده و در عين حال کاربردي را با يکديگر دنبال مي نمائيم .
مثال : ايجاد يک صفحه مبتني بر Ajax با تمرکز بر روي پتانسيل هاي سمت سرويس دهنده فريمورک ASP. NET Ajax
در اين مثال مي خواهيم تعداد مقالاتي را که بر روي سايت سخا روش و در هر يک از گروه هاي مختلف منتشر شده است ، به اطلاع ملاقات کنندگان سايت برسانيم .براي سادگي کار ، فرض مي شود که تعداد مقالات منشتر شده بر روي سايت از طريق بانک اطلاعاتي بازيابي نخواهد شد و در مقابل از يک کلاس با نام Maghalat براي بازيابي تعداد مقالات منشتر شده در هر گروه استفاده خواهيم کرد . کلاس فوق داراي صرفا" يک متد با GetNumberOfMaghalat است که وظيفه آن برگرداندن تعداد مقالات منتشر شده در هر گروه است .
پس از آشنائي اوليه با صورت مسئله ، مراحل زير را براي پياده سازي يک صفحه وب مبتني بر Ajax با محوريت سرويس دهنده ، دنبال مي نمائيم .
مرحله اول : ايجاد سايت
اولين مرحله در پياده سازي هر نوع برنامه وب مبتني بر ASP. NET ، ايجاد وب سايت اوليه است . بدين منظور از برنامه ويژوال استوديو نسخه هاي 2005 و يا 2008 استفاده کرده ( و يا نسخه Visual Web Developer ) و براي وب سايت خود تمپليت ASP.NET AJAX-Enabled Web Site را انتخاب مي کنيم . بدين ترتيب ، يک وب سايت با قابليت استفاده از اسمبلي ASP. NET AJAX ( با نام System.Web.Extensions.dll ) از طريق GAC ( برگرفته شده از Global Assembly Cache ) ايجاد مي گردد . اين کار همچنين باعث ايجاد يک فايل web.config پيچيده مي گردد که شامل تنظيمات اضافه ديگر براي ارتباط با فريمورک ASP. NET AJAX است .
شکل 1 ، نحوه انتخاب تمپليت ASP.NET AJAX-Enabled Web Site را در زمان ايجاد يک وب سايت نشان مي دهد .
شکل 1 : انتخاب تمپليت ASP.NET AJAX-Enabled Web Site
در زمان ايجاد يک وب سايت
مرحله دوم : طراحي و پياده سازي کلاس Maghalat
Maghalat يک کلاس ساده است که داراي صرفا" يک متد با نام GetNumberOfMaghalat است که گروه مقاله را به عنوان پارامتر ورودي گرفته و تعداد مقالات منشتر شده در آن گروه را برمي گرداند . بدين منظور از يک ساختار Select Case استفاده شده است تا بر اساس مقدار پارامتر ورودي ، يک عدد را بطور ايستا برگرداند ( براي سادگي کار نام گروه مقاله و تعداد آن مستقيما" در کد درج شده اند ) .
شکل 2 ، ساختار کلاس Maghalat را نشان مي دهد .
شکل 2 : ساختار کلاس Maghalat
کد زير ، کلاس فوق به همراه متد مربوطه را نشان مي دهد .
|
کلاس Maghalat.VB |
Public Class Maghalat
Public Shared Function GetNumberOfMaghalat(ByVal ArticleGroup As String) As Integer
Dim Count As Integer = 0
Select Case ArticleGroup
Case "Software"
Count = 11
Case "Hardware"
Count = 12
Case "Security"
Count = 13
Case "Network"
Count = 14
Case "other"
Count = 15
End Select
GetNumberOfMaghalat = Count
End Function
End Class |
مرحله سوم : ايجاد يک صفحه وب ASP.NET
در زمان ايجاد وب سايت ، بطور اتوماتيک يک صفحه Default.aspx نيز ايجاد مي گردد . کد اوليه اين صفحه به صورت زير است .
<%@ Page Language="VB" AutoEventWireup="true" %>
<!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" dir="rtl">
<head runat="server">
<title>تست شماره يک /title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html> |
تنها تفاوت صفحه فوق با ساير صفحات Default.aspx ايجاد شده توسط ويژوال استوديو ، اضافه شدن کنترل ScriptManager است . همانگونه که قبلا" اشاره گرديد ، کنترل فوق به عنوان مغز متفکر يک صفحه مبتني بر Ajax ايفاي وظيفه مي نمايد . کنترل فوق ، مسئوليت توزيع کدهاي سمت سرويس گيرنده براي مرورگر و مديريت بهنگام سازي جزئي ( نه تمامي صفحه ) صفحه را برعهده دارد .
پس از ايجاد اوليه صفحه وب ، از کنترل هاي ديگري براي طراحي بخش رابط کاربر متناسب با خواسته هاي موجود استفاده مي کنيم . در اين مثال خاص از يک کنترل ListBox جهت نمايش گروه مقاله با قابليت AutoPostBack و يک کنترل Label به منظور نمايش نتايج استفاده شده است .
<%@ Page Language="VB" AutoEventWireup="true" %>
<!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" dir="rtl">
<head runat="server">
<title>تست شماره يک </title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<table>
<tr>
<td colspan="3">
<strong> ايجاد يک صفحه وب مبتني بر Ajax<br />
(( پياده سازي با محوريت پتانسيل هاي سمت سرويس دهنده فريمورک ASP.NET Ajax )) </strong>
<br />
</td>
</tr>
<tr>
<td style="width: 150px">
لطفا" يک گروه مقاله را انتخاب نمائيد
</td>
<td align="right" colspan="2" dir="rtl">
<asp:ListBox ID="ArticleGroup" runat="server" AutoPostBack="True" Font-Names="Tahoma"
Font-Size="Small" ForeColor="#C04000">
<asp:ListItem> نرم افزار </asp:ListItem>
<asp:ListItem> سخت افزار </asp:ListItem>
<asp:ListItem> امنيت اطلاعات </asp:ListItem>
<asp:ListItem> شبکه </asp:ListItem>
<asp:ListItem> ساير </asp:ListItem>
</asp:ListBox></td>
</tr>
<tr>
<td style="width: 150px"> </td>
<td style="width: 100px"> </td>
<td style="width: 131px"> </td>
</tr>
<tr>
<td colspan="3" style="height: 18px">
<asp:Label ID="LblFinalResult" runat="server" Font-Names="Tahoma" Font-Size="Small"
ForeColor="Black" Text="Label"></asp:Label></td>
</tr>
</table>
</span>
</div>
</form>
</body>
</html> |
از ListBox براي نمايش ليست گروه مقالات استفاده شده است . مقدار خصلت AutoPostBack کنترل فوق ، True در نظر گرفته شده است تا بلافاصله پس از انتخاب يکي از آيتم هاي موجود در ليست ، يک PostBack به سمت سرويس دهنده تحقق يابد . اين کار از طريق رويداد SelectedIndexChanged محقق خواهد شد که متعاقب آن روتين ArticleGroup_SelectedIndexChanged فراخوانده مي شود . در انتهاي صفحه از يک کنترل Label استفاده شده است تا به کمک آن بتوان نتايج را در خروجي نمايش داد .
از طريق کد نوشته شده در روتين ArticleGroup_SelectedIndexChanged ، انتخاب کاربر تشخيص و متد مربوط به کلاس maghalat صدا زده مي شود تا پس از برگرداندن نتايج ، ماحصل کار از طريق کنترل Label نمايش داده شود .
کد روتين ArticleGroup_SelectedIndexChanged در جدول زير نشان داده شده است .
Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.SelectedValue)
LblFinalResult.Text += " "
LblFinalResult.Text += "مقاله تاکنون در گروه "
LblFinalResult.Text += " "
LblFinalResult.Text += ArticleGroup.SelectedValue
LblFinalResult.Text += " "
LblFinalResult.Text += "برروي سايت سخا روش منشتر شده است "
End Sub |
مررحله چهارم : اجراي برنامه و بررسي نتايج
پس از اجراي برنامه فوق از طريق مرورگر و انتخاب يک گروه مقاله ، خروجي آن به صورت زير نمايش داده مي شود .
شکل 3 : نمايش تعداد مقالات منتشر شده در هر گروه
عملکرد برنامه فوق متناسب با انتظار ما است : با انتخاب يک گروه مقاله ، تعداد مقالات منتشر شده در آن گروه در قسمت پائين صفحه نمايش داده مي شود . تنها مسئله مهم و قابل توجه بازخواني مجدد تمامي صفحه پس از هر مرتبه اي است که کاربر يک گروه مقاله را انتخاب مي نمايد . براي حل اين موضوع مي توان از کنترل جادوئي UpdatePanel استفاده کرد . شکل زير نحوه استفاده از کنترل فوق در مثال اشاره شده را نشان مي دهد .
...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:ListBox ID="ArticleGroup" runat="server" AutoPostBack="True" Font-Names="Tahoma"
Font-Size="Small" ForeColor="#C04000">
<asp:ListItem> نرم افزار </asp:ListItem>
<asp:ListItem> سخت افزار </asp:ListItem>
<asp:ListItem> امنيت اطلاعات </asp:ListItem>
<asp:ListItem> شبکه </asp:ListItem>
<asp:ListItem> ساير </asp:ListItem>
</asp:ListBox></td>
</tr>
<tr>
<td style="width: 150px"> </td>
<td style="width: 100px"> </td>
<td style="width: 131px"> </td>
</tr>
<tr>
<td colspan="3" style="height: 18px">
<asp:Label ID="LblFinalResult" runat="server" Font-Names="Tahoma" Font-Size="Small"
ForeColor="Black" Text="Label"></asp:Label></td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
... |
به صورت پيش فرض ، محتويات موجود بين تگ ContentTemplate مربوط به کنترل UpdatePanel در زمان بروز يک postback غيرهمزمان بطور اتوماتيک بهنگام خواهند شد. Postback فوق بطور غيرهمزمان اتفاق مي افتد و رفتار آن با postback عادي متفاوت است . ( در postback عادي ، يک درخواست براي سرويس دهنده ارسال مي گردد تا پس از انجام پردازش هاي ضروري در سمت سرويس دهنده ، رابط کاربر جديد براي مرورگر ارسال گردد ) .
و اما يک سوال مهم که ممکن است در ذهن شما مطرح شده باشد . يک postback غيرهمزمان چيست ؟ اکثر پياده کنندگان برنامه هاي وب به کمک فناوري ASP.NET صرفا" با يک نوع postback آشنا مي باشند . با بکارگيري UpdatePanel ، صفحه روال طبيعي حيات خود را طي مي نمايد ، ولي PostBack به عنوان يک postBack غيرهمزمان شناخته مي شود . که در آن از روش هاي هوشمندانه تري استفاده مي گردد و صفحه با مدلي متفاوت تر در حين چرخه حيات خود پردازش مي گردد .
در ادامه ، همزمان با اجراي صفحه و انتخاب يک گروه مقاله ، بخش رابط کاربر بطور اتوماتيک و بدون نياز به بازخواني کامل صفحه بهنگام خواهد شد . بطور خلاصه ، با اضافه کردن يک مجموعه اندک از کنترل هاي سرويس دهنده بر روي صفحه ، از بازخواني مجدد تمامي صفحه ممانعت بعمل آمده و همچنين در تعامل کاربر با برنامه وقفه اي ايجاد نخواهد شد .
مرحله پنجم : بهينه سازي خروجي و ضرورت استفاده از کنترل UpdateProgress
در صورتي که با يک خط سرعت پائين برنامه فوق اجراء گردد ، مشاهده خواهيم کرد که زمان نسبتا" زيادي بطول خواهد انجاميد تا نتايج نمايش داده شود . اين موضوع ( تاخير محسوس در مشاهده خروجي کار ) باعث مي شود کاربري که برنامه را اجراء کرده است ، نگران عملکرد صحيح برنامه باشد و اينگونه برداشت کند که برنامه دچار اختلال شده است .
قبل از معرفي Ajax ، براي صفحاتي که بازخواني مجدد مي گرديدند از علامتي استفاده مي شد که کاربران متوجه اين موضوع مي شدند که فرآيندي در حال انجام است و يا درخواست آنان مورد پذيرش قرار گرفته شده است . هم اينک با توقف postback طبيعي ، کاربران متوجه اين موضوع نمي شوند که عملياتي در شرف انجام است تا اين که فرآيند مورد نظر به اتمام برسد ( از علامتي براي نشان دادن اين که فرآيندي در حال انجام است ، استفاده نمي شود ) . در چنين مواردي ، کاربران نيازمند يک فيدبک ديداري ( ويژوال ) هستند تا نسبت به انجام يک فرآيند در پس زمينه آگاه گردند .
کنترل UpdateProgress يک راه حل جهت مشکل فوق را ارائه مي نمايد . هدف کنترل فوق ، نشان دادن يک نشانه ديداري به کاربران در زمان بروز يک postback غيرهمزمان است . بدين منظور مي توان کد زير را به انتهاي صفحه اضافه نمود .
|
< asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate >
<img src=" images/ajax1.gif " /> در حال بارگذاري ...
</ProgressTemplate>
</asp:UpdateProgress> |
پس از اجراي برنامه ( با لحاظ کردن کنترل UpdateProgress ) ، پس از انتخاب يک گروه مقاله توسط کاربر يک نشانه ديداري نمايش داده خواهد شد . شکل 4 ، خروجي برنامه را به همراه نشانه ديداري نشان مي دهد .
شکل 4 : ارائه يک نشانه ديداري در زمان تحقق يک postback غيرهمزمان
در صورت اجراي برنامه فوق بر روي ماشين محلي ، به احتمال فراوان فرآيند بهنگام سازي صفحه به سرعت انجام خواهد شد و عملکرد کنترل UpdateProgress مشاهده نخواهد شد . براي کاهش سرعت و مشاهده نشانه ديداري مي توان سرعت آن را به صورت زير کاهش داد .
Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.SelectedValue)
LblFinalResult.Text += " "
LblFinalResult.Text += "مقاله تاکنون در گروه "
LblFinalResult.Text += " "
LblFinalResult.Text += ArticleGroup.SelectedValue
LblFinalResult.Text += " "
LblFinalResult.Text += "برروي سايت سخا روش منشتر شده است "
System.Threading.Thread.Sleep(2000)
End Sub |
توجه داشته باشيد که نمي بايست از متد Sleep در کد توليد شده نهائي استفاده کرد . در مثال فوق با فرض اين که برنامه بر روي يک ماشين محلي اجراء شده است و هدف مشاهده عملکرد کنترل UpdateProgress است ، از کنترل فوق استفاده شده است .
خلاصه
در اين مقاله با نحوه ايجاد يک صفحه مبتني بر Ajax با تمرکز بر روي پتانسيل هاي سمت سرويس دهنده فريمورک ASP. NET Ajax آشنا شديم . بدين منظور يک نمونه مثال ساده را بررسي کرديم که در آن از کنترل هاي UpdatePanel و UpdateProgress به منظور نشان دادن قابليت Ajax در صفحات ASP.NET استفاده شده بود .
در بخش بعد با نحوه ايجاد يک صفحه مبتني بر Ajax با تمرکز بر روي پتانسيل هاي سمت سرويس گيرنده فريمورک ASP. NET Ajax ، آشنا خواهيم شد .
برگرفته از سايت سخا روش