ساخت یک برنامه داده ای با قابلیت ایجکس /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 را دارد . اگر هم با این کار آشنا نیستید ، ایجاد یک پایگاه داده جدید 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 را انتخاب نمایید . طراحی نمایه کلی Database و اضافه کردن اطلاعات اولیه به آن : می توانید از ابزارها و امکانات ویژوال استودیو برای طراحی نمایه کلی و وارد نمودن اطلاعات اولیه به پایگاه داده خود استفاده نمایید . برای این منظور مراحل زیر را انجام دهید : در منوی Solution Explorer ، پوشه App_Data را باز کرده و بر روی پایگاه داده Tasks.mdf ، دابل کلیک نمایید . برنامه پایگاه داده را به صورت درختی در منوی Server Explorer باز می کند . بر روی پوشه Tables کلیک راست کرده و گزینه Add New Item را انتخاب نمایید . در ویرایشگر جدول پایگاه داده ، فیلدهای زیر را با مشخصات داده شده ایجاد نمایید : [TABLE="class: ex, width: 600"] [TR] [TD="class: prdes"] آیا می تواند خالی باشد ؟ [/TD] [TD="class: prname"] نوع داده ای [/TD] [TD="class: prname"] نام فیلد یا ستون [/TD] [/TR] [TR] [TD="class: prbody, align: center"] Allow Nulls: No [/TD] [TD="class: prname"] int [/TD] [TD="class: prname"] taskId [/TD] [/TR] [TR] [TD="class: prbody, align: center"] Allow Nulls: No [/TD] [TD="class: prname"] nvarchar(50) [/TD] [TD="class: prname"] taskName [/TD] [/TR] [TR] [TD="class: prbody, align: center"] Allow Nulls: No [/TD] [TD="class: prname"] datetime [/TD] [TD="class: prname"] dateCreated [/TD] [/TR] [TR] [TD="class: prbody, align: center"] Allow Nulls: No [/TD] [TD="class: prname"] bit [/TD] [TD="class: prname"] isComplete [/TD] [/TR] [/TABLE] بر روی ردیفی که شامل فیلد taskid می باشد ، کلیک راست کرده و با انتخاب گزینه Set Primary Key ، آن فیلد را به عنوان فیلد اصلی انتخاب نمایید . همانطور که ردیف taskid را در حال انتخاب دارید ، در بخش Columnes Properties ، بخش Identity Specification را باز کرده و مقدار گزینه Is Identity را به Yes تغییر دهید . جدول را ذخیره کرده و نام آن را TaskList قرار دهید . بر روی نام جدول در Server Explorer کلیک راست کرده و گزینه Show Table Data را انتخاب نمایید . پنجره ای باز می شود که در آن می توانید اطلاعات جدول را مشاهده کرده و یا اطلاعات مورد نظر خود را به آن بیفزایید . چهار یا پنج رکورد را با اطلاعات دلخواه برای نمایش در صفحه ، به جدول اضافه کرده و سپس آن را ببندید . دقت داشته باشید که لزومی ندارد برای فیلد taskid ، مقداری تعیین نمایید ، زیرا آن فیلد به صورت اتوماتیک مقداردهی می شود . همچنین برای فیلد isComplete ، باید مقدار True یا False را وارد نمایید . ایجاد کنترل های دسترسی و کار با داده در 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 ، کد زیر را قرار دهید : [TABLE="class: ex"] [TR] [TD="class: prname"] کد [/TD] [TD="class: prdes, align: left"] <span id="filter"> Current List Filter: <aspropDownList ID="DropDownList1" AutoPostBack="true" runat="server"> <asp:ListItem Text="Active" Value="False" /> <asp:ListItem Text="Completed" Value="True" /> </aspropDownList> </span> <hr id="separator" /> [/TD] [/TR] [/TABLE] درون کد کنترل LinqDataSource ، مقدار خاصیت AutoGenerateWhereClause آن را بر روی مقدار true تنظیم نمایید . کد زیر را درون تگ باز و بسته کنترل LinqDataSource اضافه نمایید . این کد تعیین می کند که در هر لحظه چه اطلاعاتی نمایش داده شود . به آن دقت نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] کد [/TD] [TD="class: prdes, align: left"] <WhereParameters> <asp:ControlParameter Name="isComplete" ControlID="DropDownList1" Type="Boolean" /> </WhereParameters> [/TD] [/TR] [/TABLE] صفحه را ذخیره نمایید . اکنون شما می توانید صفحه را تست کرده و مطمئن شوید که اطلاعات مورد نظرتان بر روی صفحه نمایش داده خواهد شد . برای تست صفحه کلیدهای 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> قرار دهید : [TABLE="class: ex"] [TR] [TD="class: prname"] کد [/TD] [TD="class: prdes, align: left"] <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> [/TD] [/TR] [/TABLE] همچنین کد زیر نیز دقیقا قبل از تگ انتهایی <form/> قرار دهید : [TABLE="class: ex"] [TR] [TD="class: prname"] کد [/TD] [TD="class: prdes, align: left"] </ContentTemplate> </asp:UpdatePanel> [/TD] [/TR] [/TABLE] این کار باعث می شود تا کنترل های ListView و DropDownList درون کنترل UpdatePannel قرار بگیرند . مرحله نهایی : پس از ذخیره صفحه ، برای اجرای آن ، کنترل های Ctrl + F5 را همزمان فشار دهید . سپس آیتم های موجود در کنترل DropDownList را تغییر دهید . مشاهده می کنید که بدون رفرش شدن صفحه ، اطلاعات کنترل ListView ، به روز رسانی می شود . منبع: developer1