استفاده از کنترل Silverlight DataGrid در الگویMVVM-قسمت اول

استفاده از کنترل Silverlight DataGrid در الگویMVVM-قسمت اول محمد محمدی پیروز 93/1/29:: 8:12 ع

View Model و کنترل Silverlight Datagrid

Silverlight Datagrid کنترلی قدرتمند است که به شما اجازه ویرایش درون خطی (inline editing)، صفحه بندی (paging)، مرتب سازی (sorting) و چینش (جابجایی) مجدد ستونها (drop re-ordering columns) را می دهد. درک چگونگی استفاده از این کنترل با تکنیک های معمول code-behind می تواند چالش برانگیز باشد، اما گاهی اوقات استفاده از این کنترل با استفاده از سبک برنامه نویسی View Model / MVVM بسیار گیج کننده خواهد بود.
در این مثال، در View Model ارجاع مستقیمی به DataGrid نخواهیم داشت. کدهای ارائه شده را می توانید برای هر یک از کنترلهای Collection دیگر مانند ListBox به کار برده و آنها را استفاده کنید.
MVVM logo

نکته: اگر با سبک برنامه نویسی View Model آشنا نیستید، پیشنهاد می شود به صفحه Silverlight View Model Style: An (Overly) Simplified Explanation مراجعه کنید.
در اصل عملیاتهای خود را روی DataGrid انجام نمی دهید، بلکه Collection متصل به دیتاگرید را دستکاری می کنید.
یکی از نکات اولیه جهت شناخت کنترل Silverlight Datagrid این است که این کنترل از "View of the Data" استفاده می کند که یک ICollectionView را پیاده سازی می کند. طبق نظر شرکت مایکروسافت در لینک زیر
http://msdn.microsoft.com/en-us/library/system.componentmodel.icollectionview(VS.95).aspx
"کنترل دیتاگرید از رابط ICollectionView برای نمایش داده های (indicated functionality ) موجود در منبع داده تخصیصی به ItemsSource Property استفاده می کند. اگر خصیصه ItemsSource، Ilist را پیاده سازی کند اما ICollectionView را پیاده سازی نکند، دیتاگرید ItemsSource را در یک ICollectionView قرار می دهد.”
در مثالهای اولیه، صرفاً یک مجموعه را به DataGrid متصل کرده و اجازه می دهیم CollectionView به طور خودکار ایجاد شود. در مثال Sorting، ما CollectionViewSource را پیاده سازی می کنیم، طوری که بتوانیم رویدادها را به تله انداخته و آنها را شناسایی کنیم.
متوجه خواهید شد که وقتی کنترلی روی مجموعه دیتاگرید به View Model متصل می شود، تمامی کنترلهای مورد نیاز جهت پیاده سازی قابلیت مورد انتظار به ما ارائه خواهد شد.
برای آشنایی با تمامی متدها و خواص DataGrid به صفحه زیر مراجعه کنید.
http://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid_methods(v=VS.95).aspx
در این آموزش از Visual Studio 2010 (یا بالاتر) و Expression Blend 4 (یا بالاتر) استفاده کنید.

برنامه کاربردی

Silverllight DataGrid Control In Application
برنامه کاربری این اجازه را می دهد که با کلیک روی سر ستون ها (column headers) عملیات مرتب سازی صورت پذیرد و صفحه بندی با استفاده از دکمه هایی در پایین DataGrid پیاده سازی شده است.
Reorder Silverllight DataGrid Control
می توانید با جابجا کردن سر ستون ها چینش آنها را تغییر دهید.
Editing inline Silverllight DataGrid Control
فیلد Comment فقط 25 کاراکتر اول را نشان می دهد مگر اینکه بخواهید آنرا ویرایش کنید.
با دبل کلیک کردن روی یکی از فیلهای Comment خواهید توانست آنرا ویرایش کنید. با کلیک در هر قسمت از برنامه کاربردی به غیر از جعبه متن در حال ویرایش، توضیحات ورودی شما ذخیره خواهد شد.
Clear Comment Field in Silverlight DataGrid Control
با کلیک روی دکمه Clear محتویات فیلد Comment همان ردیف به **** تغییر پیدا خواهد کرد.

نمایش آیتم ها در یک DataGrid

حال نمایش ساده ی آیتم ها در یک DataGrid آغاز می کنیم.

ابتدا یک پروژه Silverlight همراه با یک website ایجاد کنید.
سپس دیتابیسی با نام RIATasks ایجاد کرده و جدول RIAComments را به آن اضافه کنید.

USE [RIATasks]
GO
CREATE TABLE [dbo].[RIAComments](
    [CommentID] [int] IDENTITY(1,1) NOT NULL,
    [Comment] [nvarchar](max) NOT NULL,
    [CommentUpdateDate] [datetime] NOT NULL,
CONSTRAINT [PK_RIAComments] PRIMARY KEY CLUSTERED
(
    [CommentID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF,
       IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
       ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

یک کلاس LINQ to SQL به سایت RIADataGrid.Web با نام RIATasksDB.dbml اضافه کنید.

روی لینک ServerExplorer کلیک کنید.

یک ارتباط به پایگاه داده RIATasks ایجاد کرده و جدول RIAComment را روی سطح Object Relational Designer بکشید.

فایل را ذخیره کرده و ببندید.

ساخت وب سرویس

اکنون یک متد Web Service که ایتم های موجود در جدول را با استفاده از کدهای زیر برمی گرداند ایجاد کنید.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Microsoft.VisualBasic;
namespace RIADataGrid.Web
{
    [WebService(Namespace = "http://OpenLightGroup.net/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    public class WebService : System.Web.Services.WebService
    {
        // Web Methods
        #region GetRIAComments
        [WebMethod]
        public List<RIAComment> GetRIAComments()
        {
            RIATasksDBDataContext DB = new RIATasksDBDataContext();
            var colRIAComments = (from RIAComments in DB.RIAComments
                                  select RIAComments).ToList();
            return colRIAComments;
        }
        #endregion
    }
}

در پروژه Silverlight یک Service Reference با نام wsRIARIAComments اضافه کنید.
همچنین به این پروژه یک ارجاع به اسمبلی Microsoft.VisualBasic نیز باید اضافه شود.
به منظور فراخوانی متد موجود در Web Service می بایست یک Model در پروژه کاربردی Silverlight ایجاد کرد. برای مطالعه ادامه مقاله به قسمت دوم مراجعه کنید.

اولین دیدگاه را شما بگذارید