در این قسمت از طراحی سایت به ساخت یک برنامه داده ای با قابلیت Ajax می پردازیم . در این راهکار شما با نحوه ایجاد یک برنامه وب با قابلیت Ajax ، که برای نمایش لیستی از آیتم ها و کارهای در حال اجرا به کار می رود ، آشنا خواهید شد .
این برنامه به شما کمک می کند تا یک رابط کاربری را برای ایجاد ، مدیریت ، پاک کردن لیست ها و آیتم های موجود در آنها بسازید . تمامی اعمال به روز رسانی، وارد کردن ، پاک کردن و صفحه بندی اطلاعات درون یک کنترل UpadatePanel انجام می شود ، که از تکنولوژی Ajax استفاده می کند .
کارهایی که در این راهکار به شما آموزش داده خواهد شد ، عبارتند از :
√ ایجاد یک پایگاه داده SQL و اضافه کردن اطلاعات .
√ اضافه کردن یک کنترل LinqDataSource به صفحه .
√ اضافه کردن کلاس LINQ به کلاس های SQL .
√ استفاده از کنترل ListView برای نمایش ، ویرایش و پاک کردن اطلاعات در پایگاه داده .
√ استفاده از کنترل LinqDataSource برای اتصال به پایگاه داده با استفاده از زبان LINQ .
√ استفاده از کنترل UpdatePannel برای اضافه کردن قابلیت های Ajax به صفحه .
نرم افزار های پیش نیاز :
برای اجرای این راهکار بایستی نرم افزار های زیر بر روی سیستم شما نصب شده باشند :
√ نرم افزار Microsoft Visual Studio or Visual Web Developer 2010 Express یا ورژن های مشابه .
√ SQL Server Express که همراه با ویژوال استودیو نصب می شود .
ایجاد یک وب سایت جدید ASP.Net :
در مرحله اول ، باید سایت ASP.Net خود را ایجاد نمایید که در واقع همان طراحی سایت است. فرض بر این است که کاربر آشنایی کافی برای ایجاد یک وب سایت جدید ASP.Net را دارد . اگر هم با این کار آشنا نیستید ، برای دریافت اطلاعات بیشتر به راهکار ساخت یک وب سایت ساده در ASP.Net بروید .
ایجاد یک پایگاه داده جدید SQL Server :
اکنون که سایت جدید ASP.Net خود را ساخته اید ، قدم بعدی ایجاد یک پایگاه داده و اضافه کردن یک مسیر دسترسی به آن در Server Explorer است . هنگامی که یک پایگاه داده را به Server Explorer ، اضافه می کنید ، می توانید به راحتی از نرم افزار ویژوال استودیو برای اضافه کردن جداول ، stored procedures ، views و ... به آن ، استفاده نمایید .
همچنین می توانید از طریق این ابزار اطلاعات موجود در جداول پایگاه داده را مشاهده کرده و یا اینکه Query مورد نظر خود را به راحتی با استفاده از پنجره Query Builder ایجاد نمایید .
نحوه اضافه کردن یک Database به پروژه :
√ در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
√ از کادر باز شده ، گزینه SQL Database را انتخاب کرده و نام آن را به Tasks.mdf تغییر داده و گزینه Ok را بزنید .
√ هنگامی که نرم افزار ویژوال استودیو از شما پرسید ، که Database باید در پوشه App_Data نگهداری شود ، گزینه Yes را انتخاب نمایید .
ایجاد کنترل های دسترسی و کار با داده در ASP.Net :
در این بخش ، از یک کنترل LinqDataSource استفاده خواهید کرد و به وسیله آن کلاس هایی را طراحی می کنید ، که به جای موجودیت های مختلف پایگاه داده ( مثل جدول ، خود پایگاه داده و ... ) عمل خواهند کرد .
کنترل LinqDataSource و کلاس های طراحی شده برای آن ، لایه دسترسی به داده ها هستند ، که در این راهکار باید از آنها استفاده نمایید .
کنترل LinqDataSource ، زبان LINQ را به توسعه دهندگان وب از طریق سیستم دیتای ASP.Net ، معرفی کرد . کنترل LinqDataSource کدهای لازم برای انتخاب کردن ، وارد نمودن ، به روز رسانی و یا حذف اشیا و اطلاعات را در پایگاه داده ایجاد می کند . LINQ ویژگی های برنامه نویسی شی گرا را به زبان پایگاه داده اضافه کرده است .
این زبان یک مدل برنامه نویسی منحصر به فرد را برای جستجو و به روز رسانی اطلاعات برای منابع داده ای مختلف فراهم کرده و قابلیت های خود را مستقیما به #C یا VB اضافه می کند .
اتصال پایگاه داده Tasks به یک شی داده ای SQL :
برای شروع ساخت لایه داده ای برنامه ، باید یک شی dataset را به پروژه اضافه نماییم .
نحوه ایجاد یک کلاس برای جدول TaskList :
√ اگر وب سایتی که ایجاد نموده اید ، از قبل دارای پوشه App_Code نیست ، در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add ASP.Net Folder را انتخاب نموده و سپس پوشه APP_Code را اضافه نمایید .
√ بر روی پوشه App_Code کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
√ از پنجره باز شده ، نوع فایل LINQ to SQL Classes را انتخاب کرده و نام آن را به Tasks.dbml تغییر داده و سپس گزینه Add را بزنید .
√ از منوی Server Explorer ، جدول TaskList را درگ کرده و آن را بر روی پنجره Object Relational Designer بندازید .
√ فایل Tasks.dbml را ذخیره نمایید .
هنگامی که فایل فوق را ذخیره می نمایید ، ویژوال استودیو به صورت اتوماتیک دو فایل را در پوشه App_Code و در زیر فایل Tasks.dbml اضافه می کند . فایل اول Tasks.dbml.layout بوده و فایل دوم Tasks.designer.cs یا Tasks.designer.vb می باشد ، بر حسب زبان برنامه نویسی که برای پروژه خود انتخاب کرده اید .
√ در منوی Solution Explorer ، فایل Tasks.designer.cs یا Tasks.designer.vb را باز کنید .
اگر به آن دقت نمایید ، مشاهده می کنید که دارای 2 کلاس به نام های TasksDataContext و TasksList می باشد . کلاس TasksDataContext به جای خود پایگاه داده و کلاس TasksList به جای جدول آن عمل می کند .
کلاس TasksDataContext که فاقد هر گونه پارامتر است ، اطلاعات اتصال به پایگاه داده ( Connection String ) را از فایل web.config می خواند .
√ فایل web.config را باز کنید .
دقت نمایید که یک رشته ارتباطی ( Connection String ) برای پایگاه داده Tasks.mdf به المنت connectionStrings اضافه شده است .
√ تمامی فایل های که باز کرده را ببندید .
ایجاد و تنظیم کردن کنترل LinqDataSource :
اکنون که شما یک جدول پایگاه داده و کلاس هایی که جانشین اجزای درونی آن هستند ، را در اختیار دارید ، می توانید از یک کنترل ListView برای اتصال به Database بر روی صفحات ASP.Net استفاده کنید . برای این منظور مراحل زیر را انجام دهید :
√ صفحه Default.aspx سایت را باز کرده و به نمای Design بروید .
√ یک کنترل LinqDataSource را از بخش کنترل های داده منوی Toolbox درگ کرده و بر روی صفحه قرار دهید . Id آن را نیز برابر با LinqDataSource1 قرار دهید .
√ از بخش LinqDataSource Tasks ، که به صورت یک فلش بر روی کنترل LinqDataSource مشاهده می شود ، گزینه Configure Data Source را انتخاب نمایید .
√ از بخش Choose your context object ، گزینه TasksDataContext را انتخاب کرده و گزینه Next را بزنید .
√ از لیست Table ، گزینه ( TasksLists ( Table را انتخاب کرده و سپس دکمه Finish را بزنید .
√ مجددا از قسمت LinqDataSource Tasks ، گزینه های Enable Delete , Enable Insert و Enable Update را علامت بزنید .
توجه داشته باشید که شما نیازی به هیچ گونه کدنویسی برای انجام این عملیات ها نداشته و خود کنترل ها آنها را برایتان انجام می دهند .
√ صفحه را ذخیره نمایید .
استفاده از کنترل های سرور داده :
در این قسمت ، شما کنترل هایی را به صفحه اضافه خواهید کرد که از کنترل LinqDataSource و کلاس های آن ، برای اتصال به پایگاه داده و نمایش اطلاعات مورد نظر استفاده خواهند کرد .
برای این منظور ، یک کنترل ListView را برای نمایش اطلاعات از پایگاه داده SQL اضافه خواهیم کرد . سپس یک کنترل DropDownList را برای فیلتر کردن و گزینش اطلاعات خروجی در کنترل ListView به کار خواهید برد .
در نهایت نیز از یک کنترل UpdatePannel برای افزودن قابلیت های Ajax و به روز رسانی فقط بخش مورد نظرتان در صفحه به جای رفرش شدن کل آن ، استفاده خواهید نمود .
نمایش اطلاعات توسط یک کنترل ListView :
کنترل ListView ، برای نمایش اطلاعات ساختار بندی شده، همانند کنترل های Repeater و DataList بسیار مناسب است . همچنین این کنترل بر خلاف دو کنترل ذکر شده ، از قابلیت های ویرایش ، وارد نمودن ، پاک کردن ، صفحه بندی و مرتب سازی اطلاعات به راحتی پشتیبانی می کند .
اکنون شما یک کنترل ListView را به صفحه اضافه خواهید کرد ، که تمامی اطلاعات جدول Tasks را نمایش خواهد داد. در مرحله بعدی یک کنترل DropDownList را نیز به صفحه اضافه خواهیم کرد ، تا فقط اطلاعات مورد نظر خود را نشان داده و بقیه را فیلتر نماید .
کنترل ListView ، اطلاعات جدول بانک اطلاعاتی را در جداول مرتب و با ویرایش کاربر پسند نمایش داده و همچنین دارای دکمه هایی برای ویرایش ، حذف ، به روز رسانی و یا وارد نمودن اطلاعات جدید به پایگاه داده است .
برای اضافه کردن یک کنترل ListView به صفحه ، مراحل زیر را انجام دهید :
√ به صفحه ای که می خواهید کنترل ListView را به آن اضافه نمایید ، بروید .
√ از بخش Data منوی Toolbox ، یک کنترل ListView را برداشته و بر روی صفحه قرار دهید .
√ از منوی ListView Tasks ، که به صورت یک فلش بر روی کنترل دیده می شود ، کادر Choose Data Source list را انتخاب کرده و گزینه LinqDataSource1 را کلیک نمایید .
این کار ، کنترل ListView را به کنترل LinqDataSource متصل می کند .
√ مجددا در منوی ListView Tasks ، بر روی گزینه Configure ListView کلیک نمایید .
سپس از پنجره باز شده ، گزینه های Enable Editing, Enable Inserting, Enable Deleting و Enable Paging را علامت بزنید .
√ دکمه Ok را زده و صفحه را ذخیره نمایید .
اضافه کردن یک کنترل DropDownList برای فیلتر کردن اطلاعات :
شما می توانید ، اطلاعاتی که توسط کنترل ListView نمایش داده می شود را به وسیله قرار دادن یک کادر انتخابی DropDownList ، فیلتر کرده و در هر لحظه ، اطلاعات مورد نظر خود را بر حسب گزینه ای که کاربر در لیست انتخاب کرده ، تغییر دهید .
برای اضافه کردن یک کنترل DropDownList به صفحه مراحل زیر را انجام دهید :
√ صفحه Default.aspx را باز کرده و به نمای source کد بروید .
√ درون تگ <form> صفحه و در بالای کد کنترل ListView ، کد زیر را قرار دهید :
<span id="filter">
Current List Filter:
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server">
<asp:ListItem Text="Active" Value="False" />
<asp:ListItem Text="Completed" Value="True" />
</asp:DropDownList>
</span>
<hr id="separator" />
√ درون کد کنترل LinqDataSource ، مقدار خاصیت AutoGenerateWhereClause آن را بر روی مقدار true تنظیم نمایید .
√ کد زیر را درون تگ باز و بسته کنترل LinqDataSource اضافه نمایید . این کد تعیین می کند که در هر لحظه چه اطلاعاتی نمایش داده شود . به آن دقت نمایید :
<WhereParameters>
<asp:ControlParameter
Name="isComplete"
ControlID="DropDownList1"
Type="Boolean" />
</WhereParameters>
√ صفحه را ذخیره نمایید .
اکنون شما می توانید صفحه را تست کرده و مطمئن شوید که اطلاعات مورد نظرتان بر روی صفحه نمایش داده خواهد شد .
برای تست صفحه کلیدهای Ctrl + F5 را همزمان فشار دهید .
سپس از کنترل DropDownList ، گزینه Completed را انتخاب نمایید . مشاهده خواهید کرد فقط اطلاعات ، رکوردهای از جدول Tasks در کنترل ListView نمایش داده می شود که مقدار فیلد isComplete آنها برابر با True است .
اضافه کردن قابلیت Ajax به صفحه :
در این بخش از راهکار ، که بخش پایانی است ، یک کنترل ScriptManager را به صفحه اضافه خواهیم کرد ، که قابلیت های Ajax را بر روی صفحات ASP.Net فعال می کند .
سپس نیز یک کنترل UpdatePannel را بر روی صفحه قرار خواهیم داد ، که این امکان را به ما می دهد تا به روز رسانی و تغییر اطلاعات در کنترل ListView ، بدون Postback شدن و رفرش کل صفحه انجام گیرد .
اضافه کردن یک کنترل ScriptManager به صفحه :
برای استفاده از هر گونه قابلیت Ajax و کنترل های مرتبط با آن بر روی صفحات ASP.Net ، بایستی یک کنترل ScriptManager را به روش زیر ، بر روی صفحه قرار دهید :
√ صفحه Default.aspx را باز کرده و به نمایه source کد بروید .
√ از بخش AJAX Extensions منوی Toolbox ، یک کنترل ScriptManager را انتخاب کرده و در میان تگ <form> قرار دهید .
قرار دادن کنترل ListView درون کنترل UpdatePannel :
در این مثال ، کنترل ListView را درون کنترل UpdatePannel قرار می دهیم . انجام این کار باعث می شود تا انجام هر گونه تغییر و به روز رسانی در کنترل ListView ، بدون لود شدن و رفرش کل صفحه انجام شود .
برای این منظور مراحل زیر را انجام دهید :
√ در صفحه Default.aspx ، کد زیر را مستقیما پس از تگ ابتدایی <form> قرار دهید :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
همچنین کد زیر نیز دقیقا قبل از تگ انتهایی <form/> قرار دهید :
</ContentTemplate>
</asp:UpdatePanel>
این کار باعث می شود تا کنترل های ListView و DropDownList درون کنترل UpdatePannel قرار بگیرند .
مرحله نهایی :
پس از ذخیره صفحه ، برای اجرای آن ، کنترل های Ctrl + F5 را همزمان فشار دهید .
سپس آیتم های موجود در کنترل DropDownList را تغییر دهید . مشاهده می کنید که بدون رفرش شدن صفحه ، اطلاعات کنترل ListView ، به روز رسانی می شود .