قصد دارم در سلسله مقالاتي به معرفي کنترل ها و تکنيک هاي موجود در MS Ajax بپردازم که قسمت اول و شروع بحث را در اين مقاله مشاهده خواهيد کرد.
MS Ajax يا به بيان کامل تر Microsoft Ajax کتابخانه اي از توابع مي باشد که توسط شرکت مايکروسافت به منظور بهره گيري از تکنولوژي آژاکس (Ajax) در برنامه هاي تحت وب در VS 2005 ايجاد شده است.
لازم به ذکر است که نام سابق آن Atlas بوده و هم اکنون به صورت منبع باز (Open Source) در دسترس مي باشد.
براي دريافت MS Ajax به سايت
http://Ajax.Asp.net مراجعه کنيد. روي دکمه Download ASP.NET Ajax کليک کنيد و فايل مربوطه که ASP.NET 2 Ajax Extensions مي باشد را دانلود کنيد. پس از دانلود فايل، آن را نصب کنيد. با نصب اين فايل ، در حقيقت بستري براي توسعه برنامه هاي کاربردي تحت وب با قابليت استفاده از امکانات آژاکس به وجود مي آيد.
اکنون برنامه VS 2005 را اجرا نموده و يک وب سايت جديد ايجاد کنيد. خواهيد ديد که علاوه بر گزينه هايي که قبلا و به طور پيش فرض در VS 2005 وجود دارد مانند ASP.NET Web Site و ASP.NET Web Service و ....... ، گزينه جديدي به نام ASP.NET Ajax-Enabled Web Site اضافه شده است.
گزينه ASP.NET Ajax-Enabled Web Site را انتخاب نموده و تاييد نماييد.
اکنون اگر به صفحه اول وب سايت دقت کنيد ، مي بينيد که بر خلاف وب سايت هايي که قبلا ايجاد نموده ايد، يک کنترل به نام Script Manager روي صفحه اول وب سايت وجود دارد. و اگر به Toolbox سمت چپ دقت کنيد مي بينيد که تب جديدي به نام Ajax Extensions اضافه شده است که حاوي کنترل هاي اصلي MS Ajax مي باشد.
به ياد داشته باشيد که براي استفاده از امکانات MS Ajax در يک صفحه وب سايت فقط نياز به يک Script Manager در صفحه داريد.
يک کنترل از نوع Update Panel از تب مربوطه انتخاب نموده و به صفحه اضافه کنيد.
Update Panel کنترلي است که براي به روزرساني جزئي (Partial Updating) در صفحه استفاده مي شود. يعني کنترل هايي که در داخل Update Panel قرار مي گيرند ، بدون نياز به اينکه کل صفحه به روز رساني شود ، مي توانند خود را به روز رساني نمايند.
مطابق شکل زير يک کنترل ليبل و يک دکمه به داخل Update Panel ، و يک کنترل ليبل نيز به خارج از Update Panel اضافه نماييد.
اکنون در رويداد لود برنامه قطعه کد زير را بنويسيد.
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
|
و در رويداد کليک مربوط به دکمه ، قطعه کد زير را بنويسيد.
Label1.Text = DateTime.Now.ToString();
|
صفحه را اجرا کنيد. خواهيد ديد که هر دوي ليبل ها ، زمان اجراي صفحه را نشان مي دهند. روي دکمه کليک کنيد. اکنون مشاهده مي کنيد که با هربار کليک کردن دکمه ، زماني که ليبل اول يعني ليبلي که داخل Update Panel قرار دارد به روز رساني مي شود در حاليکه هنوز ليبل دوم زماني اجراي صفحه براي اولين بار را نشان مي دهد. در ضمن عمل Post Back نيز انجام نشده است.
شما مي توانيد براي تمرين بيشتر ساير کنترل ها را نيز به داخل Update Panel اضافه نموده و رفتار آن ها را مشاهده کنيد.
به علت اينکه همواره قرار دادن دکمه در محل Update Panel امکان پذير نمي باشد و ما نياز داريم که دکمه را در نقاط مختلف صفحه و محل مخصوص خود قرار دهيم . اين امکان وجود دارد که دکمه را خارج از Update Panel قرار دهيم . براي انجام اين کار ابتدا دکمه را از Update Panel خارج نماييد.
سپس به قسمت کدهاي HTML صفحه برويد و داخل تگ UpdatePanel ، يک تگ Triggers اضافه کنيد. و داخل تگ Triggers ، يک تگ AsyncPostBackTrigger اضافه کنيد.
تغييرات مربوطه را در زير مشاهده مي کنيد.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel> |
همانطور که مشاهده مي کنيد صفت ControlID نام دکمه و صفت EventName نام رويدادي از دکمه است که با به وجود آمدن آن ، محتواي Update Panel به روز رساني خواهد شد.
اکنون دوباره صفحه را اجرا کنيد. خواهيد ديد با اينکه ما دکمه را از داخل Update Panel خارج نموده ايم ولي باز هم عمل بروز رساني بدون انجام عمل PostBack انجام خواهد شد.
در مقالات بعدي کنترل ها و تکنيک هاي ديگر MS Ajax را معرفي خواهم کرد.
فايل مربوط به مقاله از لينک بالاي صفحه قابل دانلود مي باشد.