Silverlight 之 简单的 数据筛选 例子

昨晚花了1小时，写了这么一个数据筛选的小例子，与大家分享一下。

相关技术：

　　　　使用 WebService 访问数据

　　　　ADO.NET 查询和操作数据库

　　　　使用 PagedCollectionView 类进行数据筛选

　　　　DataGrid 以及其它控件的使用

步骤：

1. 新建数据库和相应数据表，并插入数据

2. 新建SL项目，并根据提示建立相应的"ASP.NET Web 应用程序"

3. 针对数据库表，建立相应的 数据实体类

4. 在相应的"ASP.NET Web 应用程序"中，新建一个 Web 服务，并完成它

5. 完成 Silverlight 界面的设计，并添加 Web 服务引用

6. 在相应事件和方法中完成业务逻辑

下面咱们就开始完成这个小例子：

第一步：

打开 MS SQL Server 2008，在 数据库节点 上右击选择 新建数据库，数据库名为 Information。

建立好数据库之后，就建立数据表 Person，并添加相应列名，如图：

数据就由你们自己添加吧，如果 Sql 语句不会用的话，就用 SQLServer 的图形操作来添加数据吧！

第二步：

打开 Visual Studio 2010，选择 文件 -> 新建 -> 项目，然后选择 Silverlight 节点下的 Silverlight 应用程序，并命名，如图：

点击确定后，会跳出提示框，如图：

在这里我勾选了 在新网站中承载 Silverlight 应用程序 和 启用 WCF RIA 服务(A)，选择了 ASP.NET Web 应用程序项目，Silverlight 版本选择的是 Silverlight 4。

第三步：

在 ASP.NET Web 应用程序 中建立 针对数据库表的相应的 数据实体类 Person，代码如下：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 namespace DataFilter.Web
7 {
8 [Serializable]
9 public class Person
10 {
11 public int Id { get ; set ; }
12
13 public string Name { get ; set ; }
14
15 public string Sex { get ; set ; }
16
17 public int Age { get ; set ; }
18
19 public string Address { get ; set ; }
20 }
21 }

第四步：

在 ASP.NET Web 应用程序 中建立 Web 服务，如图：



PersonWebService.asmx 代码如下：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Services;
6 using System.Configuration;
7 using System.Data.SqlClient;
8
9 namespace DataFilter.Web
10 {
11 /// <summary>
12 /// PersonWebService 的摘要说明
13 /// </summary>
14 [WebService(Namespace = " http://tempuri.org/ " )]
15 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
16 [System.ComponentModel.ToolboxItem( false )]
17 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
18 // [System.Web.Script.Services.ScriptService]
19 public class PersonWebService : System.Web.Services.WebService
20 {
21
22 [WebMethod]
23 public List < Person > GetAllPersons()
24 {
25 List < Person > persons = new List < Person > ();
26 // 从 Web.config 文件中 获取数据库连接字符串
27 string connectionString = ConfigurationManager.AppSettings[ " SqlConnectionString " ].ToString();
28 // 使用 ADO.NET 对数据库进行操作
29 using (SqlConnection connection = new SqlConnection(connectionString))
30 {
31 try
32 {
33 string sql = " select * from Person " ;
34 connection.Open();
35 SqlCommand command = new SqlCommand(sql, connection);
36 SqlDataReader dataReader = command.ExecuteReader();
37 while (dataReader.Read())
38 {
39 Person person = new Person();
40 person.Id = Convert.ToInt32(dataReader[ " Id " ]);
41 person.Name = dataReader[ " Name " ].ToString();
42 person.Sex = dataReader[ " Sex " ].ToString();
43 person.Age = Convert.ToInt32(dataReader[ " Age " ]);
44 person.Address = dataReader[ " Address " ].ToString();
45 persons.Add(person);
46 }
47 return persons;
48 }
49 catch (SqlException ex)
50 {
51 string exceptionMessage = ex.Message.ToString();
52 return null ;
53 }
54 finally
55 {
56 connection.Close();
57 connection.Dispose();
58 }
59 }
60 }
61 }
62 }

第五步：

设计界面，代码如下：

1 < UserControl x:Class = " DataFilter.MainPage "
2 xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
3 xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
4 xmlns:d = " http://schemas.microsoft.com/expression/blend/2008 "
5 xmlns:mc = " http://schemas.openxmlformats.org/markup-compatibility/2006 "
6 xmlns:dataGrid = " clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data "
7 mc:Ignorable = " d " >
8
9 < Canvas x:Name = " MainCanvas " Height = " 600 " Width = " 800 " Loaded = " MainCanvas_Loaded " >
10 < Border x:Name = " MainBorder " Height = " 440 " Width = " 500 " Canvas.Top = " 75 " Canvas.Left = " 150 " Background = " Transparent " CornerRadius = " 9 " BorderThickness = " 5 " BorderBrush = " Teal " >
11 < Canvas >
12 < TextBlock x:Name = " FilterConditionsTextBlock " Text = " 筛选条件： " Canvas.Left = " 20 " Canvas.Top = " 30 " FontFamily = " Courier New " FontSize = " 16 " Foreground = " Teal " />
13 < ComboBox x:Name = " FilterConditionsComboBox " Height = " 30 " Width = " 140 " Canvas.Left = " 95 " Canvas.Top = " 22 " FontFamily = " Courier New " FontSize = " 15 " BorderBrush = " Brown " Foreground = " Purple " />
14 < TextBlock x:Name = " ConditionsValueTextBlock " Text = " 筛选值： " Canvas.Left = " 260 " Canvas.Top = " 30 " FontFamily = " Courier New " FontSize = " 16 " Foreground = " Teal " />
15 < TextBox x:Name = " ConditionsValueTextBox " Height = " 30 " Width = " 150 " Canvas.Left = " 320 " Canvas.Top = " 22 " FontFamily = " Courier New " FontSize = " 18 " BorderBrush = " Brown " Foreground = " Purple " />
16 < dataGrid:DataGrid x:Name = " MainDataGrid " Height = " 300 " Width = " 450 " Canvas.Left = " 20 " Canvas.Top = " 70 " FontFamily = " Comic Sans MS " FontSize = " 15 " BorderBrush = " Brown " BorderThickness = " 3 " CanUserReorderColumns = " False " AutoGenerateColumns = " False " >
17 < dataGrid:DataGrid.Columns >
18 < dataGrid:DataGridTextColumn Header = " 编号 " Binding = " {Binding Path=Id} " Width = " 90 " />
19 < dataGrid:DataGridTextColumn Header = " 姓名 " Binding = " {Binding Path=Name} " Width = " 90 " />
20 < dataGrid:DataGridTextColumn Header = " 性别 " Binding = " {Binding Path=Sex} " Width = " 90 " />
21 < dataGrid:DataGridTextColumn Header = " 年龄 " Binding = " {Binding Path=Age} " Width = " 90 " />
22 < dataGrid:DataGridTextColumn Header = " 家庭住址 " Binding = " {Binding Path=Address} " Width = " 90 " />
23 </ dataGrid:DataGrid.Columns >
24 </ dataGrid:DataGrid >
25 < Button x:Name = " btnFilter " Content = " 筛 选 " Height = " 35 " Width = " 100 " Canvas.Left = " 370 " Canvas.Top = " 383 " FontFamily = " Courier New " FontSize = " 18 " BorderBrush = " Brown " Foreground = " Purple " Click = " btnFilter_Click " />
26 </ Canvas >
27 </ Border >
28 </ Canvas >
29 </ UserControl >

界面截图：



需要注意的是，使用 DataGrid 控件，需要添加相应的引用和命名空间。

添加 Web 服务引用，右击 DataFilter 项目，选择 添加服务引用，如下所示：



点击确定，引用Web服务就OK了。

第六步：

调用 Web 服务，并在相应事件中 完成整个业务逻辑，代码如下：

1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Net;
5 using System.Windows;
6 using System.Windows.Controls;
7 using System.Windows.Documents;
8 using System.Windows.Input;
9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 using System.Windows.Data;
13 using System.Windows.Browser;
14 using DataFilter.PersonServiceReference;
15 using System.Text.RegularExpressions;
16
17 namespace DataFilter
18 {
19 public partial class MainPage : UserControl
20 {
21 public MainPage()
22 {
23 InitializeComponent();
24 }
25
26 PagedCollectionView pagedCollectionView = null ;
27
28 // 得到 筛选条件
29 private List < string > GetConditions()
30 {
31 List < string > columns = new List < string > ();
32 columns.Add( " 性别 " );
33 columns.Add( " 年龄 " );
34 return columns;
35 }
36
37 // 重置相应控件内容
38 public void GetRestore()
39 {
40 this .FilterConditionsComboBox.SelectedIndex = - 1 ;
41 this .ConditionsValueTextBox.Text = string .Empty;
42 }
43
44 private void MainCanvas_Loaded( object sender, RoutedEventArgs e)
45 {
46 this .FilterConditionsComboBox.ItemsSource = GetConditions();
47 GetRestore();
48 // 声明 调用 Web 服务的对象
49 PersonWebServiceSoapClient pwssc = new PersonWebServiceSoapClient();
50 // 注册 GetAllPersonsCompleted 事件，实现调用 Web 服务
51 pwssc.GetAllPersonsCompleted += new EventHandler < GetAllPersonsCompletedEventArgs > (pwssc_GetAllPersonsCompleted);
52 // 采用异步模式
53 pwssc.GetAllPersonsAsync();
54 }
55
56 void pwssc_GetAllPersonsCompleted( object sender, GetAllPersonsCompletedEventArgs e)
57 {
58 if (e.Error == null )
59 {
60 pagedCollectionView = new PagedCollectionView(e.Result);
61 this .MainDataGrid.ItemsSource = pagedCollectionView;
62 }
63 }
64
65 // 过滤器
66 public bool FilterSex( object t)
67 {
68 Person person = t as Person;
69 return (person.Sex == this .ConditionsValueTextBox.Text.ToString());
70 }
71
72 // 过滤器
73 public bool FilterAge( object t)
74 {
75 Person person = t as Person;
76 return (person.Age >= Convert.ToInt32( this .ConditionsValueTextBox.Text));
77 }
78
79 // 筛选按钮的点击事件
80 private void btnFilter_Click( object sender, RoutedEventArgs e)
81 {
82 if ( this .FilterConditionsComboBox.SelectedIndex != - 1 && this .ConditionsValueTextBox.Text != string .Empty)
83 {
84 switch ( this .FilterConditionsComboBox.SelectedValue.ToString())
85 {
86 case " 性别 " :
87 pagedCollectionView.Filter = new Predicate < object > (FilterSex);
88 break ;
89 case " 年龄 " :
90 pagedCollectionView.Filter = new Predicate < object > (FilterAge);
91 break ;
92 }
93 }
94 }
95 }
96 }

到这个儿，整个例子就完成了。

运行截图：



需要注意的是，由于我没有做数据验证，所以在输入数据的时候，请输入有效的数据，否则程序会报错。

对了数据库文件时存储在 App_Data 文夹中的。

需要源代码的朋友们，可以留言，并留下邮箱，或者留下QQ也可以。

欢迎转载，但须注明出处与作者本人，违者必究。

转载于:https://www.cnblogs.com/Rabassaire/archive/2011/06/28/2092111.html