1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

ساخت یک برنامه داده ای با قابلیت ایجکس /ajax

شروع موضوع توسط Amon Amarth ‏22/4/13 در انجمن Ajax

  1. کاربر ارشد

    تاریخ عضویت:
    ‏7/6/12
    ارسال ها:
    12,082
    تشکر شده:
    28,151
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    ساخت یک برنامه داده ای با قابلیت ایجکس /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 به پروژه :


    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. در ویرایشگر جدول پایگاه داده ، فیلدهای زیر را با مشخصات داده شده ایجاد نمایید :
      [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]

    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 ، کد زیر را قرار دهید :
      [TABLE="class: ex"]
      [TR]
      [TD="class: prname"] کد [/TD]
      [TD="class: prdes, align: left"] <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" />
      [/TD]
      [/TR]
      [/TABLE]
    3. درون کد کنترل LinqDataSource ، مقدار خاصیت AutoGenerateWhereClause آن را بر روی مقدار true تنظیم نمایید .
    4. کد زیر را درون تگ باز و بسته کنترل 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]
    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> قرار دهید :
      [TABLE="class: ex"]
      [TR]
      [TD="class: prname"] کد [/TD]
      [TD="class: prdes, align: left"] <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
      [/TD]
      [/TR]
      [/TABLE]
    2. همچنین کد زیر نیز دقیقا قبل از تگ انتهایی <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
     
    یک شخص از این تشکر کرد.