---

آموزش Ajax > مایکروسافت Ajax > ساخت یک برنامه داده ای با قابلیت ایجکس

ساخت یک برنامه داده ای با قابلیت 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 به پروژه :

1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
2. از کادر باز شده ، گزینه SQL Database را انتخاب کرده و نام آن را به Tasks.mdf تغییر داده و گزینه Ok را بزنید .
3. هنگامی که نرم افزار ویژوال استودیو از شما پرسید ، که Database باید در پوشه App_Data نگهداری شود ، گزینه Yes را انتخاب نمایید .

طراحی نمایه کلی Database و اضافه کردن اطلاعات اولیه به آن :

می توانید از ابزارها و امکانات ویژوال استودیو برای طراحی نمایه کلی و وارد نمودن اطلاعات اولیه به پایگاه داده خود استفاده نمایید . برای این منظور مراحل زیر را انجام دهید :

1. در منوی Solution Explorer ، پوشه App_Data را باز کرده و بر روی پایگاه داده Tasks.mdf ، دابل کلیک نمایید .
   برنامه پایگاه داده را به صورت درختی در منوی Server Explorer باز می کند .
2. بر روی پوشه Tables کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
3. در ویرایشگر جدول پایگاه داده ، فیلدهای زیر را با مشخصات داده شده ایجاد نمایید :
   

   آیا می تواند خالی باشد ؟	نوع داده ای	نام فیلد یا ستون
   Allow Nulls: No	int	taskId
   Allow Nulls: No	nvarchar(50)	taskName
   Allow Nulls: No	datetime	dateCreated
   Allow Nulls: No	bit	isComplete

   
   
4. بر روی ردیفی که شامل فیلد taskid می باشد ، کلیک راست کرده و با انتخاب گزینه Set Primary Key ، آن فیلد را به عنوان فیلد اصلی انتخاب نمایید .
5. همانطور که ردیف taskid را در حال انتخاب دارید ، در بخش Columnes Properties ، بخش Identity Specification را باز کرده و مقدار گزینه Is Identity را به Yes تغییر دهید .
6. جدول را ذخیره کرده و نام آن را TaskList قرار دهید .
7. بر روی نام جدول در Server Explorer کلیک راست کرده و گزینه Show Table Data را انتخاب نمایید .
   پنجره ای باز می شود که در آن می توانید اطلاعات جدول را مشاهده کرده و یا اطلاعات مورد نظر خود را به آن بیفزایید .
8. چهار یا پنج رکورد را با اطلاعات دلخواه برای نمایش در صفحه ، به جدول اضافه کرده و سپس آن را ببندید .
   دقت داشته باشید که لزومی ندارد برای فیلد taskid ، مقداری تعیین نمایید ، زیرا آن فیلد به صورت اتوماتیک مقداردهی می شود .
   همچنین برای فیلد isComplete ، باید مقدار True یا False را وارد نمایید .

ایجاد کنترل های دسترسی و کار با داده در ASP.Net :

در این بخش ، از یک کنترل LinqDataSource استفاده خواهید کرد و به وسیله آن کلاس هایی را طراحی می کنید ، که به جای موجودیت های مختلف پایگاه داده ( مثل جدول ، خود پایگاه داده و ... ) عمل خواهند کرد .
کنترل LinqDataSource و کلاس های طراحی شده برای آن ، لایه دسترسی به داده ها هستند ، که در این راهکار باید از آنها استفاده نمایید .
کنترل LinqDataSource ، زبان LINQ را به توسعه دهندگان وب از طریق سیستم دیتای ASP.Net ، معرفی کرد . کنترل LinqDataSource کدهای لازم برای انتخاب کردن ، وارد نمودن ، به روز رسانی و یا حذف اشیا و اطلاعات را در پایگاه داده ایجاد می کند . LINQ ویژگی های برنامه نویسی شی گرا را به زبان پایگاه داده اضافه کرده است .
این زبان یک مدل برنامه نویسی منحصر به فرد را برای جستجو و به روز رسانی اطلاعات برای منابع داده ای مختلف فراهم کرده و قابلیت های خود را مستقیما به #C یا VB اضافه می کند .

اتصال پایگاه داده Tasks به یک شی داده ای SQL :

برای شروع ساخت لایه داده ای برنامه ، باید یک شی dataset را به پروژه اضافه نماییم .

نحوه ایجاد یک کلاس برای جدول TaskList :

1. اگر وب سایتی که ایجاد نموده اید ، از قبل دارای پوشه App_Code نیست ، در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add ASP.Net Folder را انتخاب نموده و سپس پوشه APP_Code را اضافه نمایید .
2. بر روی پوشه App_Code کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
3. از پنجره باز شده ، نوع فایل LINQ to SQL Classes را انتخاب کرده و نام آن را به Tasks.dbml تغییر داده و سپس گزینه Add را بزنید .
4. از منوی Server Explorer ، جدول TaskList را درگ کرده و آن را بر روی پنجره Object Relational Designer بندازید .
5. فایل Tasks.dbml را ذخیره نمایید .
   هنگامی که فایل فوق را ذخیره می نمایید ، ویژوال استودیو به صورت اتوماتیک دو فایل را در پوشه App_Code و در زیر فایل Tasks.dbml اضافه می کند . فایل اول Tasks.dbml.layout بوده و فایل دوم Tasks.designer.cs یا Tasks.designer.vb می باشد ، بر حسب زبان برنامه نویسی که برای پروژه خود انتخاب کرده اید .
6. در منوی Solution Explorer ، فایل Tasks.designer.cs یا Tasks.designer.vb را باز کنید .
   اگر به آن دقت نمایید ، مشاهده می کنید که دارای 2 کلاس به نام های TasksDataContext و TasksList می باشد . کلاس TasksDataContext به جای خود پایگاه داده و کلاس TasksList به جای جدول آن عمل می کند .
   کلاس TasksDataContext که فاقد هر گونه پارامتر است ، اطلاعات اتصال به پایگاه داده ( Connection String ) را از فایل web.config می خواند .
7. فایل web.config را باز کنید .
   دقت نمایید که یک رشته ارتباطی ( Connection String ) برای پایگاه داده Tasks.mdf به المنت connectionStrings اضافه شده است .
8. تمامی فایل های که باز کرده را ببندید .

ایجاد و تنظیم کردن کنترل LinqDataSource :

اکنون که شما یک جدول پایگاه داده و کلاس هایی که جانشین اجزای درونی آن هستند ، را در اختیار دارید ، می توانید از یک کنترل ListView برای اتصال به Database بر روی صفحات ASP.Net استفاده کنید . برای این منظور مراحل زیر را انجام دهید :

1. صفحه Default.aspx سایت را باز کرده و به نمای Design بروید .
2. یک کنترل LinqDataSource را از بخش کنترل های داده منوی Toolbox درگ کرده و بر روی صفحه قرار دهید . Id آن را نیز برابر با LinqDataSource1 قرار دهید .
3. از بخش LinqDataSource Tasks ، که به صورت یک فلش بر روی کنترل LinqDataSource  مشاهده می شود ، گزینه Configure Data Source را انتخاب نمایید .
4. از بخش Choose your context object ، گزینه TasksDataContext را انتخاب کرده و گزینه Next را بزنید .
5. از لیست Table ، گزینه ( TasksLists ( Table را انتخاب کرده و سپس دکمه Finish را بزنید .
6. مجددا از قسمت LinqDataSource Tasks ، گزینه های Enable Delete , Enable Insert و Enable Update را علامت بزنید .
   توجه داشته باشید که شما نیازی به هیچ گونه کدنویسی برای انجام این عملیات ها نداشته و خود کنترل ها آنها را برایتان انجام می دهند .
7. صفحه را ذخیره نمایید .

استفاده از کنترل های سرور داده :

در این قسمت ، شما کنترل هایی را به صفحه اضافه خواهید کرد که از کنترل LinqDataSource و کلاس های آن ، برای اتصال به پایگاه داده و نمایش اطلاعات مورد نظر استفاده خواهند کرد .
برای این منظور ، یک کنترل ListView را برای نمایش اطلاعات از پایگاه داده SQL اضافه خواهیم کرد . سپس یک کنترل DropDownList را برای فیلتر کردن و گزینش اطلاعات خروجی در کنترل ListView به کار خواهید برد .
در نهایت نیز از یک کنترل UpdatePannel برای افزودن قابلیت های Ajax و به روز رسانی فقط بخش مورد نظرتان در صفحه به جای رفرش شدن کل آن ، استفاده خواهید نمود .

نمایش اطلاعات توسط یک کنترل ListView :

کنترل ListView ، برای نمایش اطلاعات ساختار بندی شده، همانند کنترل های Repeater و DataList بسیار مناسب است . همچنین این کنترل بر خلاف دو کنترل ذکر شده ، از قابلیت های ویرایش ، وارد نمودن ، پاک کردن ، صفحه بندی و مرتب سازی اطلاعات به راحتی پشتیبانی می کند .
اکنون شما یک کنترل ListView را به صفحه اضافه خواهید کرد ، که تمامی اطلاعات جدول Tasks را نمایش خواهد داد. در مرحله بعدی یک کنترل DropDownList را نیز به صفحه اضافه خواهیم کرد ، تا فقط اطلاعات مورد نظر خود را نشان داده و بقیه را فیلتر نماید .
کنترل ListView ، اطلاعات جدول بانک اطلاعاتی را در جداول مرتب و با ویرایش کاربر پسند نمایش داده و همچنین دارای دکمه هایی برای ویرایش ، حذف ، به روز رسانی و یا وارد نمودن اطلاعات جدید به پایگاه داده است .
برای اضافه کردن یک کنترل ListView به صفحه ، مراحل زیر را انجام دهید :

1. به صفحه ای که می خواهید کنترل ListView را به آن اضافه نمایید ، بروید .
2. از بخش Data منوی Toolbox ، یک کنترل ListView را برداشته و بر روی صفحه قرار دهید .
3. از منوی ListView Tasks ، که به صورت یک فلش بر روی کنترل دیده می شود ، کادر Choose Data Source list را انتخاب کرده و گزینه LinqDataSource1 را کلیک نمایید .
   این کار ، کنترل ListView را به کنترل LinqDataSource متصل می کند .
4. مجددا در منوی ListView Tasks ، بر روی گزینه Configure ListView کلیک نمایید .
   سپس از پنجره باز شده ، گزینه های Enable Editing, Enable Inserting, Enable Deleting و Enable Paging را علامت بزنید .
5. دکمه Ok را زده و صفحه را ذخیره نمایید .

اضافه کردن یک کنترل DropDownList برای فیلتر کردن اطلاعات :

شما می توانید ، اطلاعاتی که توسط کنترل ListView نمایش داده می شود را به وسیله قرار دادن یک کادر انتخابی DropDownList ، فیلتر کرده و در هر لحظه ، اطلاعات مورد نظر خود را بر حسب گزینه ای که کاربر در لیست انتخاب کرده ، تغییر دهید .
برای اضافه کردن یک کنترل DropDownList به صفحه مراحل زیر را انجام دهید :

1. صفحه Default.aspx را باز کرده و به نمای source کد بروید .
2. درون تگ <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" />

3. درون کد کنترل LinqDataSource ، مقدار خاصیت AutoGenerateWhereClause آن را بر روی مقدار true تنظیم نمایید .
4. کد زیر را درون تگ باز و بسته کنترل LinqDataSource اضافه نمایید . این کد تعیین می کند که در هر لحظه چه اطلاعاتی نمایش داده شود . به آن دقت نمایید :
   

   کد	<WhereParameters>      <asp:ControlParameter        Name="isComplete"        ControlID="DropDownList1"        Type="Boolean" /> </WhereParameters>

5. صفحه را ذخیره نمایید .

اکنون شما می توانید صفحه را تست کرده و مطمئن شوید که اطلاعات مورد نظرتان بر روی صفحه نمایش داده خواهد شد .
برای تست صفحه کلیدهای Ctrl + F5 را همزمان فشار دهید .
سپس از کنترل DropDownList ، گزینه Completed را انتخاب نمایید . مشاهده خواهید کرد فقط اطلاعات ، رکوردهای از جدول Tasks در کنترل ListView نمایش داده می شود که مقدار فیلد isComplete آنها برابر با True است .

اضافه کردن قابلیت Ajax به صفحه :

در این بخش از راهکار ، که بخش پایانی است ، یک کنترل ScriptManager را به صفحه اضافه خواهیم کرد ، که قابلیت های Ajax را بر روی صفحات ASP.Net فعال می کند .
سپس نیز یک کنترل UpdatePannel را بر روی صفحه قرار خواهیم داد ، که این امکان را به ما می دهد تا به روز رسانی و تغییر اطلاعات در کنترل ListView ، بدون Postback شدن و رفرش کل صفحه انجام گیرد .

اضافه کردن یک کنترل ScriptManager به صفحه :

برای استفاده از هر گونه قابلیت Ajax و کنترل های مرتبط با آن بر روی صفحات ASP.Net ، بایستی یک کنترل ScriptManager را به روش زیر ، بر روی صفحه قرار دهید :

1. صفحه Default.aspx را باز کرده و به نمایه source کد بروید .
2. از بخش AJAX Extensions منوی Toolbox ، یک کنترل ScriptManager را انتخاب کرده و در میان تگ <form> قرار دهید .

قرار دادن کنترل ListView درون کنترل UpdatePannel :

در این مثال ، کنترل ListView را درون کنترل UpdatePannel قرار می دهیم . انجام این کار باعث می شود تا انجام هر گونه تغییر و به روز رسانی در کنترل ListView ، بدون لود شدن و رفرش کل صفحه انجام شود .
برای این منظور مراحل زیر را انجام دهید :

1. در صفحه Default.aspx ، کد زیر را مستقیما پس از تگ ابتدایی <form> قرار دهید :
   

   کد	<asp:UpdatePanel ID="UpdatePanel1" runat="server">    <ContentTemplate>

2. همچنین کد زیر نیز دقیقا قبل از تگ انتهایی <form/> قرار دهید :
   

   کد	</ContentTemplate> </asp:UpdatePanel>

این کار باعث می شود تا کنترل های ListView و DropDownList درون کنترل UpdatePannel قرار بگیرند .

مرحله نهایی :

پس از ذخیره صفحه ، برای اجرای آن ، کنترل های Ctrl + F5 را همزمان فشار دهید .
سپس آیتم های موجود در کنترل DropDownList را تغییر دهید . مشاهده می کنید که بدون رفرش شدن صفحه ، اطلاعات کنترل ListView ، به روز رسانی می شود .

---

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

---

نطر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است : بله خیر نام :                لطفا نام را وارد نمایید آدرس Email :   لطفا آدرس ایمیل را به صورت صحیح وارد نمایید لطفا ایمیل خود را وارد نمایید نظر شما :       لطفا متن پیام را وارد نمایید سوال امنیتی : پایتخت ایران ؟   لطفا به سوال امنیتی جواب دهید جواب اشتباه است