Silverlight 4 + RIA Services – Ready for Business: Sử dụng dữ liệu trong Silverlight Client


Để tiếp tục loạt bài của chúng ta, hãy xem cách sử dụng dữ liệu của server từ client dễ dàng thế nào. Đầu tiên để giúp bạn hiểu những gì xảy ra phía sau, chúng ta sẽ cùng xem qua code-behind. Trong View\Home.xaml đặt một DataGrid đơn giản lên form.

 <sdk:DataGrid Name="dataGrid1" Height="152" Width="692" />

Sau đó thêm 3 dòng sau vào file  Home.xaml.cs:

  1: var context = new DishViewDomainContext();
  2: this.dataGrid1.ItemsSource = context.Restaurants;
  3:
  4: context.Load(context.GetRestaurantsQuery());
  5:

Ở dòng 1, chúng ta thêm vào một DishViewDomainContext… chú ý đây là lớp được sinh tự động (thông qua một MSBuild task) từ DishViewDomainService trên server.

Dòng, để ý chúng ta có một thuộc tính là Restaurants – chúng tôi cung cấp nó bởi vì có ít nhất một phương thức truy vấn trả về các restaurant. Chú ý khả năng gắn nối tuyệt vời của nó, chúng ta chưa đưa dữ liệu vào từ server, nhưng chúng ta đã dùng và gắn nối. Điều này giúp tránh các kiểu gọi lại (callback) phức tạp.

Dòng 4, chúng ta thực hiện việc nạp dữ liệu… đây là một lời gọi qua mạng, vậy nên chúng tôi muốn đảm bảo nó xuất hiện một cách rõ ràng đối với người phát triển. Chúng ta truyền chính xác phương thức mà chúng ta muốn dùng (và cả các tham số nếu có) vào cho hàm nạp như một tham số.

Giờ chạy lại, chúng ta sẽ có dữ liệu mong muốn…

image_thumb[20]

Cực kỳ dễ dàng, nhưng chúng ta còn có thể làm cho nó đơn giản hơn😉

Bạn hãy xóa các dòng vừa rồi và cả đoạn Xaml, sau đó mở của sổ DataSources:

image_thumb[80]

image_thumb[22]

Chú ý là điều này thực ra chính là các biểu diễn trực quan của những gì chúng ta vừa làm trong code.

image_thumb[23]

Giờ tôi có thể thay đổi giao diện được dinh ra mặc nhiên và phương thức truy vấn mà tôi muốn dùng.

Kéo Restaurants vào form, chúng ta đã có dữ liệu.

image_thumb[26]

Chạy và có dữ liệu, còn gì dễ dàng hơn?

image_thumb[28]

Nhấp vào header của cột để xem tính năng sắp xếp làm việc. Bạn chưa hề phải viết bất kỳ câu lệnh nào trên cả client và server để làm điều đó, nó sẽ tự có nhờ vào việc trả về một IQuerable.

Giờ thêm khả năng phân trang…

Đầu tiên ta kéo thả DataPager control vào form, sau đó chỉnh sửa giao diện lại một chút cho đẹp hơn.

image_thumb[29]

Nhưng ta vẫn cần nối DataPager vào cùng DataSource bên dưới. Bạn có thể làm điều này dễ dàng bằng việc kéo thả cùng thành phần Restaurant từ cửa sổ DataSources và DataPager, nếu làm đúng thì control DataPager sẽ được enable.

image_thumb[32]

image_thumb[34]

Phần phân trang giờ đã hoạt động rất tốt! Và vẫn không cần gõ bất kỳ câu lệnh nào trên client và server, tất cả đểu được làm thông qua câu lệnh Linq đơn giản ta đã viết trên server. Vậy còn việc phân trang và sắp xếp… liệu chúng có thể làm việc tốt với nhau không? Có phải nó chỉ sắp xếp các trang dữ liệu được nạp đã được nạp về client? Câu trả lời là tất nhiên chúng hoàn toàn có thể làm việc tốt với nhau, và dữ liệu thực sự được sắp xếp trên tầng dữ liệu theo một cách cực kỳ hiệu quả.

Giờ hãy thêm một bộ lọc. Với một chút công sức, bạn có thể thêm một chỗ trên giao diện để lọc bởi mã bưu chính.

<sdk:Label Name="label1" Content="Postal Code:" FontSize="14" Margin="0,0,462,13" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="110,12,0,0" Name="postalCodeTextbox" VerticalAlignment="Top" Width="120" />

image_thumb[36]

Sau đó ta cần kết nối nó vào với câu truy vấn. Tất nhiên bạn muốn bộ lọc được áp dụng ở nơi càng gần với dữ liệu càng tốt. Chúng ta không muốn tải tất cả các thực thể về client, hay middle-tier, rồi mới áp dụng bộ lọc. Cái mà chúng ta muốn là bộ lọc phải được áp dụng ngay từ CSDL. Và điều này, may mắn là có thể làm rất dễ dàng với LINQ.

Đầu tiên ta chọn DomainDataSource trong cửa sổ Document Outline.

image_thumb[37]

image_thumb[38]

image_thumb[40]

Operator – thông thường bạn nên đặt là “Contains”. Nếu bạn dùng giá trị mặc nhiên là “IsEqualTo” thì trong lần nạp đầu tiên (khi bộ lọc là chuỗi rỗng) sẽ chẳng có dữ liệu nào được trả về.

PropertyPath – đây là thuộc tính của thực thể mà bạn muốn áp dụng bộ lọc, nhập vào một cái tên.

Value – chứa giá trị mà bạn muốn so sánh. Bạn có thể gắn nối dễ dàng với thuộc tính Text của TextBox chứa dữ liệu cần lọc.

image_thumb[42]

Sau khi hoàn thành ta sẽ có giống như sau:

image_thumb[44]

Và chuỗi Xaml kết quả:

        <riaControls:DomainDataSource Name="restaurantDomainDataSource" AutoLoad="True"
                                      d:DesignData="{d:DesignInstance my:Restaurant,
                                                     CreateList=true}"
                                      Height="0"  Width="0"
                                      LoadedData="restaurantDomainDataSource_LoadedData_1"
                                      QueryName="GetRestaurantsQuery">
            <riaControls:DomainDataSource.FilterDescriptors>
                <riaControls:FilterDescriptor Operator="Contains"
                                              PropertyPath="PostalCode"
                                              Value="{Binding ElementName=postalCodeTextbox, Path=Text}" />
            </riaControls:DomainDataSource.FilterDescriptors>
            <riaControls:DomainDataSource.DomainContext>
                <my:DishViewDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

image_thumb[47]

Bạn không phải sửa bất kỳ đoạn lệnh nào, và cũng không phải thay đổi bất kỳ thứ gì trên DomainService.

One thought on “Silverlight 4 + RIA Services – Ready for Business: Sử dụng dữ liệu trong Silverlight Client

  1. Anh (Nam) ơi cho em hỏi tí:

    -Nếu sử dụng RIA Service thì nó có gì khác so với dùng WCF Service hay không (về tốc độ và bảo mật)?
    – Trong phiên bản SilverLight 3 Tool for Visual2008 thì hình như chưa có tích hợp sẵn RIA Serivice phải không anh?

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s