Silverlight 4 RIA Services ve Business Application -3 (Silverlight İstemci sinde Veri Göstermek)

Serinin devamı olarak bu yazımızda işin eğlenceli kısmına geldik  Verilerin gösterilmesinin ne kadar kolay olduğunu göreceğiz. Şimdi projemizdeki View klasörünün altındaki Home.xaml sayfasının code-behind kısmını açalım.

Şimdi bu kodların arasında </Grid> in hemen üzerine verileri göstereceğimiz datagrid eklemek için aşağıdaki kodu ekliyoruz.

<sdk:DataGrid AutoGenerateColumns="True" Height="134" Name="dataGrid1" Width="436" />

Bu kod eklendikten sonra şimdi  kod kısmına (Home.xmal.cs) geçelim

Bu kod kısmında Public Home metodunun altına aşağıdaki kodu ekleyelim.        

           

 var context = new DishViewDomainContext();
            this.dataGrid1.ItemsSource = context.Restaurants;
            context.Load(context.GetRestaurantsQuery());

Şimdi bu kod da ;

1.Satırda DishViewDomainContext oluşturuyoruz. Bu otomatik olarak Server da DishViewDomainService e bildirilir.

2.Satır da datagrid e bir tane Rastaurant özelliğine sahip olduğumuzu bildiriyoruz çünkü bize bir query metodu ile restaurant bilgileri geri dönecek. Dikkat edilmesi gereken şu anda serverda bizim verilerimiz yok sadece veri alacağımız özelliği bağladık.

3.Starıda görüldüğü üzere verileri yüklüyoruz. Verileri yüklerken kullanacağımız Metodu da belirtiyoruz. Yukarıdaki metod yerine GetRestaurantsWithRegionQuery de kullana biliriz.

Şimdi Projemizi çalıştıralım.

Evet gayet basit şekilde verilerimizi ekranda gösterdik.

Tabiî ki hiç kod yazmadan da biz bu işlemi yapabiliriz malum Visual Studio nun marifetleriJ.

İlk Visual Studio daki Data kısmına geliyoruz ve buradan Show Data Source ü seçiyoruz. Ekranın sol tarafına Data Sourceler geliyor.

Bu ekranda da görüldüğü üzere veri kaynağında bulunan tabloların oluşturmuş olduğumuz data model leri geldi. Bu data modellerden kullanmak istediğimiz Restaurant ın üzerine tıklıyoruz ve biz datagrid şeklinde kullanacağımız için datagrid i seçiyoruz.

 Şimdi restaurantı sürükleyip ekrana bırakıyoruz böylece bizim kod ile yazmak zorunda olduğumuz aşağıdaki kodu otomatik oluşturuyor. Ve arka taraf da (Home.xaml.cs) verileri göstermek için yazdığımız kodu da yazmıyoruz visual studio bunun yerine bir tane datasource oluşturuyor ve oluşturduğu girde bu datasource binde ediyor ve kod kısmına da veri yükleme esnasında hata olursa kontrolünü yapacak kodu ekliyor.

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Restaurants, CreateList=true}" Height="0" LoadedData="restaurantsDomainDataSource_LoadedData" Name="restaurantsDomainDataSource" QueryName="GetRestaurantsQuery" Width="0">

  <riaControls:DomainDataSource.DomainContext>

   <my:DishViewDomainContext />

  </riaControls:DomainDataSource.DomainContext>

</riaControls:DomainDataSource>

<sdk:DataGrid AutoGenerateColumns="False" Height="200" ItemsSource="{Binding ElementName=restaurantsDomainDataSource, Path=Data}" Name="restaurantsDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Width="400">

                    <sdk:DataGrid.Columns>

                        <sdk:DataGridTextColumn x:Name="addressColumn" Binding="{Binding Path=Address}" Header="Address" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="cityColumn" Binding="{Binding Path=City}" Header="City" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="contactNameColumn" Binding="{Binding Path=ContactName}" Header="Contact Name" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="contactTitleColumn" Binding="{Binding Path=ContactTitle}" Header="Contact Title" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="faxColumn" Binding="{Binding Path=Fax}" Header="Fax" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="homePageColumn" Binding="{Binding Path=HomePage}" Header="Home Page" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="iDColumn" Binding="{Binding Path=ID, Mode=OneWay}" Header="ID" IsReadOnly="True" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="imagePathColumn" Binding="{Binding Path=ImagePath}" Header="Image Path" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="nameColumn" Binding="{Binding Path=Name}" Header="Name" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="phoneColumn" Binding="{Binding Path=Phone}" Header="Phone" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="postalCodeColumn" Binding="{Binding Path=PostalCode}" Header="Postal Code" Width="SizeToHeader" />

                        <sdk:DataGridTextColumn x:Name="regionColumn" Binding="{Binding Path=Region}" Header="Region" Width="SizeToHeader" />

                    </sdk:DataGrid.Columns>

</sdk:DataGrid>

private void restaurantsDomainDataSource_LoadedData(object sender, LoadedDataEventArgs e)
        {

            if (e.HasError)
            {
                System.Windows.MessageBox.Show(e.Error.ToString(), "Load Error", System.Windows.MessageBoxButton.OK);
                e.MarkErrorAsHandled();
            }
        }

Şimdi projeyi çalıştıralım.

Görüldüğü üzere hiç kod yazmadan da verileri gösterdik.

Şimdi Gösterdiğimiz veriler üzerinde filtreleme işlemi yapalım. Bunu  için sayfamıza bir tane lable ve bir tane textbox ekleyelim.

Şimdi Filtreleme işlemi için ayarlarımızı yapalım. İlk olarak DocumentOutline dan DomainDataSource ümüzü seçelim ve F4 e basarak özelliklerine (properties) gidelim. 

Bu ekranda birçok özellik var bizim işimiz filtreleme ile olduğundan FilterDescriptions ı seçelim.

Bu ekranda yeni bir item ekleyelim. Eklediğimiz itemin özelliklerinden propertypath kısmına filtreleme yapacağımız column ismini verelim “PostalCode” ve sonra filtrelemeyi yapa bilmek için verinin geleceği yeri seçmek için value özelliğine tıklayalım. Buradan Source kısmından ElementName i seçelim çünkü biz veriyi txtbox kontrolünden alacağız buda bir element. Data sonra bizim veri gireceğimiz Textboxın ismini elementler arasında bulalım ve seçelim. İşte işlemimiz bu kadar. Filtrelemenin tipini değiştirmek isterseniz operator kısmından istediğinizi seçebilirsiniz biz Contains i seçtik.

Path kısmında da elementin hangi özelliği ile karşılaştırılacağını belirtiyoruz eğer belirtilmez ise o zaman direk elementin kendisi ile karşılaştırmaya çalışır ve hata veriri element ile string uyuşmuyor şeklinde J .

Bu işlemden domaindatasource ün son hali aşağıdaki gibi oldu.

riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Restaurants, CreateList=true}" Height="0" LoadedData="restaurantsDomainDataSource_LoadedData" Name="restaurantsDomainDataSource" QueryName="GetRestaurantsQuery" Width="0">

                    <riaControls:DomainDataSource.FilterDescriptors>

                        <riaControls:FilterDescriptor Operator="Contains" PropertyPath="PostalCode" Value="{Binding ElementName=txtBoxPostalCode, Path=Text}" />

                    </riaControls:DomainDataSource.FilterDescriptors>

                    <riaControls:DomainDataSource.DomainContext>

                        <my:DishViewDomainContext />

                    </riaControls:DomainDataSource.DomainContext>

                </riaControls:DomainDataSource>

Şimdi çalıştıralım ve görelim.

Görüldüğü gibi filtreleme çalışıyor. Bu yazımızın da sonuna geldiği şimdi siz bana kızıyorsunuz dur, yav bu projenin kaynak kodlarını niye atmıyor diye, bu yazımız da atayım bari J fazla kızdırmayalım. İyi günler, herkese yazılarımı takip ettiği için teşekkürler.

Proje kodu: http://hotfile.com/dl/70980616/4812d7f/BusinessApplication1.rar.html