5. برنامه cation [SimuPaie] – نسخه 2 – AJAX / ASP.NET

5.1. Introduction

فناوری AJAX (جاوااسکریپت و XML غیرهمزمان) مجموعه‌ای از فناوری‌ها را گرد هم می‌آورد:

• جاوااسکریپت: یک صفحه HTML که در مرورگر نمایش داده می‌شود ممکن است حاوی کد جاوااسکریپت باشد. این کد توسط مرورگر اجرا می‌شود، مگر اینکه کاربر اجرای جاوااسکریپت را در مرورگر خود غیرفعال کرده باشد. این فناوری از روزهای اولیه وب وجود داشته و از سال ۲۰۰۵ به لطف AJAX شاهد احیای دوباره علاقه به آن بوده است.
• DOM: مدل شیء مستندات (Document Object Model). کد جاوااسکریپت جاسازی‌شده در یک صفحه HTML به مستندات در قالب یک درخت شیء، یعنی DOM، دسترسی دارد. هر عنصر سند (یک فیلد ورودی، یک تگ با نام، یک تگ <select> و غیره) با یک گره در این درخت نمایش داده می‌شود. کد جاوااسکریپت می‌تواند با تغییر DOM، سند نمایش‌داده‌شده را تغییر دهد. برای مثال، می‌تواند متن نمایش‌داده‌شده در یک فیلد ورودی را از طریق گره‌ای در DOM که آن فیلد را نشان می‌دهد، تغییر دهد.

AJAX از جاوااسکریپت برای انجام تبادل‌های مرورگر/سرور در پس‌زمینه استفاده می‌کند. در پاسخ به رویدادی مانند کلیک روی دکمه، کد جاوااسکریپت توسط مرورگر اجرا می‌شود تا یک درخواست HTTP را به سرور ارسال کند. این درخواست شامل پارامترهایی خواهد بود که به سرور دستور می‌دهند چه عملی را انجام دهد. سپس سرور اقدام درخواستی را انجام خواهد داد. در پاسخ، یک جریان HTTP را به مرورگر ارسال می‌کند که حاوی داده‌هایی است که امکان به‌روزرسانی جزئی صفحهٔ در حال نمایش را فراهم می‌آورد. این کار از طریق عنصر DOM در سند و اجرای کد جاوااسکریپت جاسازی‌شده در سند انجام می‌شود. داده‌های بازگشتی از سرور می‌تواند در قالب‌های مختلفی باشد: XML، HTML، JSON، متن بدون قالب‌بندی، و غیره.

مزیت این فناوری در به‌روزرسانی جزئی سند نمایش‌داده‌شده نهفته است. این بدان معناست که:

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

در یک اینترانت که ارتباطات شبکه‌ای در آن سریع است، AJAX امکان ایجاد برنامه‌های وبی را فراهم می‌کند که رفتاری مشابه رابط‌های کاربری سنتی ویندوز دارند. می‌توان رویدادهایی مانند تغییر در انتخاب درون یک لیست را مدیریت کرد و بلافاصله بخشی از صفحه را برای منعکس کردن این تغییر تازهسازی کرد. اینکه صفحه به طور کامل دوباره بارگذاری نمی‌شود، همان حس روانی را به کاربر می‌دهد که در برنامه‌های ویندوز تجربه می‌کند. برای برنامه‌های وب، که در آن‌ها زمان پاسخ‌دهی می‌تواند طولانی باشد، فناوری AJAX همچنان قابل استفاده است، اما حس روانی به عملکرد شبکه بستگی دارد.

دشواری اصلی در AJAX، زبان جاوااسکریپت است. این زبان که در روزهای اولیه وب ایجاد شد،

• این موضوع برای برنامه‌نویسی شیءگرا چندان عملی نیست. برای مثال، این یک زبان تایپ‌شده نیست؛ نوع داده‌هایی که با آن‌ها کار می‌شود، اعلام نمی‌شود. از این نظر، مشابه زبان‌هایی مانند پرل یا PHP است.
• این زبان استاندارد مشترکی که توسط همه مرورگرها پذیرفته شده باشد، ندارد. هر مرورگر افزونه‌های اختصاصی «جاوااسکریپت» خود را دارد، به این معنی که کدی که برای IE نوشته شده ممکن است در موزیلا فایرفاکس کار نکند و بالعکس.
• عیب‌یابی آن دشوار است، زیرا مرورگرها ابزارهای مؤثری برای عیب‌یابی کد جاوااسکریپتی که اجرا می‌کنند، ارائه نمی‌دهند.

تمام این کاستی‌های جاوااسکریپت باعث شد که پیش از ورود AJAX به ندرت از آن استفاده شود. وقتی مزایای اجرای کد جاوااسکریپت در پس‌زمینه درک شد – برای ارسال درخواست‌های HTTP به سرور وب و استفاده از پاسخ آن برای، با استفاده از DOM، یک به‌روزرسانی جزئی از سند نمایش‌داده‌شده، تیم‌های توسعه به کار پرداختند و چارچوب‌هایی تولید کردند که امکان AJAX را بدون نیاز به نوشتن هیچ‌گونه کد JavaScript برای توسعه‌دهنده فراهم می‌کنند. برای این منظور، کتابخانه‌های جاوااسکریپتی که قادر به تطبیق با مرورگر کلاینت هستند، توسعه یافته‌اند. درج کد جاوااسکریپت در صفحه HTML که به مرورگر ارسال می‌شود، در سمت سرور و با استفاده از تکنیک‌هایی انجام می‌گیرد که بسته به چارچوب AJAX به کار رفته، متفاوت است. چارچوب‌های Ajax برای جاوا، .NET، PHP، روبی و غیره در دسترس هستند. AJAX در Visual Web Developer 2008 یکپارچه شده است.

5.2. پروژه Visual Web Developer برای لایه [web-ui-ajax]

نسخه جدید با کپی کردن نسخه قبلی ایجاد می‌شود. تنها صفحه [Default.aspx] تغییر خواهد کرد.

• در [1]، با استفاده از Windows Explorer، پوشه پروژه [pam-v1-adonet] را کپی کرده و نام آن را به [pam-v2-adonet-ajax] تغییر دهید. سپس، با استفاده از Visual Web Developer، پروژه را از این پوشه جدید، [2]، باز کنید (File / Open Project)
• به‌عنوان [3]، و نام آن را تغییر دهید

• و در ویژگی‌های پروژه جدید، نام assembly را به [4] و namespace پیش‌فرض را به [5] تغییر دهید.

پس از انجام این کار، در فایل‌های [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs]، فضای نام [pam_v1] را با فضای نام [pam_v2] جایگزین کنید تا با فضای نام پیش‌فرض سازگار باشد. برای مثال، [Default.aspx] [6] به صورت زیر درمی‌آید:

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

صفحه [Default.aspx] به شرح زیر اصلاح خواهد شد:

• کامپوننت‌های Ajax به فرم [Default.aspx] اضافه شده‌اند (به [2] بالا مراجعه کنید).
  • 2A: کامپوننت <asp:ScriptManager> برای هر پروژه AJAX الزامی است
  • 2B: کامپوننت <asp:UpdatePanel> برای تعریف ناحیه‌ای که هنگام انجام عملی POST توسط کاربر، باید تازه شود، استفاده می‌شود. این کامپوننت از بارگذاری مجدد کامل صفحه جلوگیری می‌کند.
  • 2C: کامپوننت <asp:UpdateProgress> برای نمایش متن یا تصویری در حین انجام به‌روزرسانی استفاده می‌شود تا کاربر را مطلع سازد، همانطور که در زیر نشان داده شده است:

• (ادامه)
  • 2D: یک نوع Label به نام LabelHeureLoad که زمان اجرای رویداد Load صفحه را نمایش می‌دهد.
  • 2E: یک نوع Label به نام LabelHeureSalaire، که زمان اجرای رویداد Click را روی دکمه [Salaire] نمایش می‌دهد. ما می‌خواهیم نشان دهیم که وقتی دکمه [Salaire] کلیک می‌شود، Ajax کل صفحه را دوباره بارگذاری نمی‌کند. این موضوع در اسکرین‌شات قبلی نشان داده شده است، جایی که دو زمان متفاوت را می‌توان در دو عنصر Labels مشاهده کرد.

اجاکسیفیکیشن قبلی فرم را می‌توان مستقیماً در کد منبع [Default.aspx] با افزودن تگ‌های افزونه Ajax انجام داد:

...
<body style="text-align: left" bgcolor="#ffccff">
  <h3>
    Feuille de salaire
    <asp:Label ID="LabelHeureLoad" runat="server" BackColor="#C0C000"></asp:Label></h3>
  <hr />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel runat="server" ID="UpdatePanelPam" UpdateMode="Conditional">
      <ContentTemplate>
        <div>
          <table>
            <tr>
...
            <tr>
              <td>
                <asp:DropDownList ID="ComboBoxEmployes" runat="server">
                </asp:DropDownList></td>
              <td>
                <asp:TextBox ID="TextBoxHeures" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:TextBox ID="TextBoxJours" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:Button ID="ButtonSalaire" runat="server" Text="Salaire" CausesValidation="False" /></td>
                <td>   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                  <ProgressTemplate>
                    <img src="images/indicator.gif" />
                    <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                      Text="Calcul en cours. Patientez ...."></asp:Label>
                  </ProgressTemplate>
                </asp:UpdateProgress>
          <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label></td>
            </tr>
            <tr>
...
            </tr>
          </table>
        </div>
        <br />
....
          <table>
            <tr>
              <td>
                Salaire net à payer :
              </td>
              <td align="center" bgcolor="#C0C000" height="20px">
                <asp:Label ID="LabelSN" runat="server" EnableViewState="False"></asp:Label></td>
            </tr>
          </table>
          &nbsp;</asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>

• خط ۸: هر فرم مجهز به Ajax باید تگ <asp:ScriptManager> را شامل شود. این تگ است که استفاده از کامپوننت‌های جدید Ajax را ممکن می‌سازد:

• برچسب <asp:ScriptManager> را می‌توان با دوبار کلیک بر روی کامپوننت [ScriptManager] در بالا به دست آورد. باید دقت شود که این تگ در کد منبع، درون تگ <form> قرار داشته باشد. ویژگی [EnablePartialRendering= "true "] در خط ۸ به طور پیش‌فرض وجود ندارد. از آنجایی که مقدار پیش‌فرض آن «true» است، ضروری نیست.

• خط ۹: تگ <asp:UpdatePanel> برای جدا کردن بخش‌های صفحه که نیاز به به‌روزرسانی در هنگام تازه‌سازی جزئی صفحه دارند، استفاده می‌شود. ویژگی [UpdateMode="Conditional"] مشخص می‌کند که این ناحیه باید فقط در پاسخ به یک رویداد AJAX از یک کامپوننت درون همان ناحیه به‌روزرسانی شود. مقدار دیگر [UpdateMode="Always"] است که مقدار پیش‌فرض می‌باشد. با این ویژگی، ناحیه UpdatePanel به طور سیستماتیک به‌روزرسانی می‌شود، حتی اگر رویداد Ajax رخ‌داده از یک کامپوننت در ناحیه UpdatePanel دیگر منشأ گرفته باشد. به طور کلی، این رفتار نامطلوب است.

تگ <asp:UpdatePanel> از دو تگ فرزند پشتیبانی می‌کند: <ContentTemplate> و <Triggers>.

• برچسب‌های <asp:ContentTemplate> در خطوط ۱۰ و ۵۳، ناحیه‌ای از صفحه را که قرار است به‌طور جزئی به‌روزرسانی شود، مشخص می‌کنند.
• خطوط 27–33: یک کامپوننت Ajax به نام <asp:UpdateProgress> که برای نمایش متن در حین به‌روزرسانی صفحه استفاده می‌شود. برای مثال، کلیک روی دکمه [Salaire] یک POST را در پس‌زمینه فعال می‌کند. مرورگر آیکون ساعت شنی را نمایش نمی‌دهد، بنابراین ممکن است کاربر وسوسه شود که به استفاده از فرم ادامه دهد. تگ <asp:UpdateProgress> متنی را نمایش می‌دهد که هشدار می‌دهد صفحه در حال تازه‌سازی است. همچنین می‌توان یک تصویر را نمایش داد. در اینجا، یک تصویر متحرک (خط ۲۹) و مقداری متن (خطوط ۳۰–۳۱) نمایش داده می‌شوند:

• خطوط ۲۸–۳۲: تگ <ProgressTemplate> محتوایی را که در تمام مدت به‌روزرسانی ناحیه UpdatePanel نمایش داده می‌شود، مشخص می‌کند، که تگ UpdateProgress در آن قرار دارد.
• خطوط ۲۹–۳۱: تصویر متحرک و متنی که در حین به‌روزرسانی ناحیه UpdatePanel نمایش داده می‌شود.
• خط ۵: برچسب LabelHeureLoad خارج از ناحیهٔ فعال‌شده با AJAX قرار می‌گیرد
• خط ۳۴: برچسب LabelHeureSalaire در داخل ناحیهٔ فعال‌شده با AJAX قرار می‌گیرد

کد صفحه [Default.aspx.cs] به شرح زیر تغییر می‌کند:

    protected void Page_Load(object sender, System.EventArgs e)
    {
        //زمان هر بار بارگذاری صفحه
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        //پردازش درخواست اولیه
        if (!IsPostBack)
        {
....
}

• خط ۴: زمان بارگذاری صفحه به‌روزرسانی می‌شود

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        //زمان محاسبه حقوق
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // داده‌ها در حال بررسی هستند
....
}

• خط ۴: به‌روزرسانی زمان محاسبه حقوق

برای تکمیل صفحه [Default.aspx]، باید تصویر متحرکی را که در خط ۴ کد منبع زیر برای صفحه ارجاع شده است، وارد کنیم:

            <td>
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  <img src="images/indicator.gif" />
                  <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                    Text="Calcul en cours. Patientez ...."></asp:Label>
                </ProgressTemplate>
              </asp:UpdateProgress>
              <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label>
</td>

با استفاده از Windows Explorer، فایل [images/indicator.gif] را به پوشه پروژه [1] اضافه می‌کنیم:

• در [2]، تمام فایل‌های پروژه را نمایش دهید
• در [3]، پوشه [images]
• در [4]، پوشه [images] در پروژه گنجانده شده است

• در [5]، پوشه [images] به پروژه اضافه شده است
• در [6]، فایل‌هایی که جزئی از پروژه نیستند پنهان شده‌اند
• در [7]، پروژه جدید

5.3. آزمایش راه‌حل Ajax

وقتی پروژه اجرا می‌شود (CTRL-F5)، صفحه زیر نمایش داده می‌شود:

• در [1]، زمان بارگذاری صفحه

چندین آزمایش انجام دهید و بررسی کنید که دکمه [Salaire] باعث بارگذاری مجدد کامل صفحه نمی‌شود. شما می‌توانید این را از زمان نمایش‌داده‌شده برای پردازش کلیک روی دکمه [Salaire] [2] مشاهده کنید، که با زمان بارگذاری اولیه صفحه ([3]) یکسان نیست:

تست‌ها را با تنظیم خاصیت EnablePartialRendering از کامپوننت ScriptManager1 روی False تکرار کنید:

توجه داشته باشید که در این حالت رفتار یک صفحه غیر-AJAX مشاهده می‌شود. صفحه هنگام کلیک روی دکمه [Salaire] به‌طور کامل دوباره بارگذاری می‌شود. آزمایش‌ها را با استفاده از یک مرورگر دیگر تکرار کنید. هدف از تست بین‌مرورگری این است که نشان دهد جاوااسکریپتی که توسط کامپوننت‌های سمت سرور ASP / AJAX تولید می‌شود، توسط مرورگرهای مختلف به درستی تفسیر می‌شود.

در نهایت، بیایید نقش تگ <asp:UpdateProgress> را برجسته کنیم. در کد مربوط به رویه [ButtonSalaire_Click] در داخل [Default.aspx.cs]، بیایید یک دستور اضافه کنیم که رویه را برای ۳ ثانیه متوقف می‌کند:

using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        //زمان محاسبه حقوق
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // در حال انتظار 
        Thread.Sleep(3000);
        // داده‌ها در حال بررسی هستند
....
}

خط ۸ باعث می‌شود تا نخ (thread) در حال اجرای رویه [ButtonSalaire_Click] به مدت ۵ ثانیه منتظر بماند. پس از انجام این کار، بیایید تست‌ها را دوباره اجرا کنیم (پس از اینکه ویژگی EnablePartialRendering از کامپوننت ScriptManager1 را دوباره روی True تنظیم کردیم). این بار، می‌توانیم متن مربوط به [UpdateProgress] و همچنین تصویر متحرک را در حین محاسبه حقوق مشاهده کنیم:

5.4. Conclusion

مطالعه قبلی به ما نشان داد که می‌توان AJAX را در برنامه‌های موجود ASP.NET پیاده‌سازی کرد. توسعه‌های AJAX برای ASP.NET فراتر از آنچه تاکنون بحث شد، می‌روند. از خوانندگان دعوت می‌شود تا از وب‌سایت [http://ajax.asp.net] بازدید کنند.