Blog

  • 30 Oca 2009

Silverlight DataGrid Kontrolü – Web Servisten Gelen Verinin Listelenmesi

Merhaba arkadaşlar bu makalemiz de DataGrid kontrolüne web servisten gelen verileri bağlayıp DataGrid’in kolonlarını özelleştireceğiz.

Konuya başlamadan önce eğer Silverlight’ta web servisleri ile uğraşmadıysanız Silverlight ile Web Servislerinin Kullanılması isimli makaleyi okumanızı öneririm.

Örneğimizde AdventureWorks veritabanına bağlanıp, ProductionProduct tablosuna web servisi ile bağlanıp verileri gridimiz üzerinde görüntüleyeceğiz. İlk olarak yeni bir silverlight projesi oluşturalım. Oluşturduğumuz projeye bir web servis dosyası ekleyip içerisinde Product isimli bir sınıf yazalım. İçerisinde 5 adet property yer alacak. Web servisinde de veritabanından ürünleri getirecek bir List döndüren bir metot yazalım.

publicclass Product
{
    public int ProductID { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
    public bool MakeFlag { get; set; }
    public DateTime SellStartDate { get; set; }
}

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
public class WebService1 : System.Web.Services.WebService
{

[WebMethod]
public List<Product> GetProducts()
{
    List<Product> productList = new List<Product>();
    SqlConnection cnn = new SqlConnection("server=.; database=AdventureWorks; uid=sa; pwd=sa12345");
    SqlCommand cmd = new SqlCommand("Select ProductID, Name, Color, MakeFlag,SellStartDate from Production.Product", cnn);
    cnn.Open();
    SqlDataReader dr = cmd.ExecuteReader();
    while (dr.Read())
    {
        productList.Add(new Product()
        {
            ProductID = dr.GetInt32(0),
            Name = dr.GetString(1),
            Color = dr.GetString(2),
            MakeFlag = dr.GetBoolean(3),
            SellStartDate= dr.GetDateTime(4)
         });
    }
    return productList;
    }
}

Data tarafımız hazır. Şimdi de page.xaml’ı Expression Blend ile açalım ve bir DataGrid ekleyelim ve DataGrid üzerinde göstereceğimiz kolonları ayarlayalım.

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightToolkits.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="700" Height="400">
<Gridx:Name="LayoutRoot" Background="White">
    <data:DataGrid Margin="8,8,8,8" x:Name="grid" AutoGenerateColumns="False">
        <data:DataGrid.Columns>
            <data:DataGridTextColumn IsReadOnly="True" CanUserResize="False" CanUserSort="True" CanUserReorder="False" Binding="{Binding ProductID}" Header="Ürün ID"/>
            <data:DataGridTextColumn Binding="{Binding Name}" Header="Ürün Adı"/>
            <data:DataGridTextColumn Binding="{Binding Color}" Header="Renk"/>
            <data:DataGridCheckBoxColumn Binding="{Binding MakeFlag}" Header="MageFlag"></data:DataGridCheckBoxColumn>
            <data:DataGridTemplateColumn Header="Tarih">
                <data:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding SellStartDate}"></TextBlock>
                    </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
                <data:DataGridTemplateColumn.CellEditingTemplate>
                    <DataTemplate>
                        <basics:DatePicker SelectedDate="{Binding SellStartDate, Mode=TwoWay}"></basics:DatePicker>
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellEditingTemplate>
            </data:DataGridTemplateColumn>
        </data:DataGrid.Columns>
    </data:DataGrid>
</Grid>

</UserControl>

DataGrid’in dizayn kısmını hallettik, şimdi de datayı getirecek kodları yazalım. İlk olarak servisin bir örneğini oluşturacağız. Sonrasında uygulama’nın Loaded event listenerini oluşturup servisten veriyi çekeceğiz. Son olarak da servisten gelen metodun completed even listenerini oluşturup gelen veriyi gride bağlayacağız.

using SilverlightToolkits.ServiceReference1; // Eklemeyi unutmayalım

WebService1SoapClient s = new WebService1SoapClient();
public Page()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded); // yüklendiğinde çalışacak olan event
    s.GetProductsCompleted += new EventHandler<SilverlightToolkits.ServiceReference1.GetProductsCompletedEventArgs>(s_GetProductsCompleted); // Serviste kullandığımız metodun sonucu geldiğinde çalışacak olan event
}

void s_GetProductsCompleted(object sender, SilverlightToolkits.ServiceReference1.GetProductsCompletedEventArgs e)
{
    grid.ItemsSource = e.Result; // Sonucu gride bağladık
} 

void Page_Loaded(object sender, RoutedEventArgs e)
{
    s.GetProductsAsync(); // Servise çağrıda bulunduk
}

Test edelim

Verilerimizi gride çektik. Tarih alanında herhangi bir yere tıklarsak takvimin çıktığını görüyoruz.

Makalenin sonuna geldik, başka bir makalede görüşmek dileğiyle. .NET ve Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

Yorum (2)

  • Ali EROĞLU / 18.2.2009 14:24:27

    Güzelmiş :)

  • Duygu / 30.8.2010 03:55:40

    grid.ItemsSource = e.Result; bu satırda şöyle bir hata alıyorum : Error 1 Cannot implicitly convert type 'object' to 'System.Collections.IEnumerable'. An explicit conversion exists (are you missing a cast?) Lütfen yardımcı olur musunuz ?

Yorum Yaz