Datagrid,Dataform數據驗證和ValidationSummary · Silverlight應用開發實例教程

![](https://box.kancloud.cn/2016-03-18_56eb67c868925.jpg) 上一篇，我們討論了，捕獲用戶提交數據驗證。本篇將集中討論Datagrid和Dataform兩個數據控件的數據驗證方法，其中，我們會附加介紹一個新的驗證控件ValidationSummary。 **概述** Datagrid和Dataform是Silverlight中最常用的兩個數據控件，其主要目的是作為數據集合的載體控件。這兩個控件不僅支持自動數據綁定，而且允許用戶添加許多自定義行為操作，例如編輯，排序，刪除，添加等。而在日常項目開發中，經常會碰到用戶在編輯，或者添加時對數據的驗證判斷，在數據commit前，即捕獲數據異常并返回提示信息到客戶端。 **ValidationSummary控件** 在Datagrid和Dataform數據驗證中，最為常用的是[ValidationSummary控件](http://msdn.microsoft.com/en-us/library/system.windows.controls.validationsummary(VS.95).aspx)，該控件和WebForm中的ValidationSummary控件類似，其功能都是將錯誤信息集合顯示在一個ListBox控件中。簡單的說，ValidationSummary控件是一個能夠容納驗證錯誤集合的容器，能夠檢測和顯示當前頁面所有驗證結果到客戶端。 **命名控件**：System.Windows.Controls **裝配**：System.Windows.Controls.Data.Input (位于 System.Windows.Controls,Data.Input.dll) 我們仍舊使用上一篇的源代碼項目，SilverlightValidationDemo，簡單修改代碼如下：首先需要添加新的命名空間引用， ![](https://box.kancloud.cn/2016-03-18_56eb67cddd2bc.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/Image00704_2.jpg) 然后添加ValidationSummary控件，即可 ![](https://box.kancloud.cn/2016-03-18_56eb67ce017cb.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/Image00706_2.jpg) 其運行結果如下： ![](https://box.kancloud.cn/2016-03-18_56eb67ce17f9e.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_2.png) 這樣就一個ValidationSummary使用實例。細心的朋友可能已經發現，上圖，一共出現了八處驗證錯誤提示，而在ValidationSummary中，僅顯示了四個。這里需要對此進行簡單的**說明**， 1. 如果使用ValidationSummary控件捕獲驗證錯誤，必須將Mode設置為Twoway； 2. 如果使用ValidationSummary控件捕獲驗證錯誤，必須將ValidatesOnExceptions設置為True； 3. 如果使用ValidationSummary控件捕獲驗證錯誤，必須將NotifyOnValidationError設置為True；在我們原有的代碼中，都沒有滿足以上條件，所以ValidationSummary忽略其驗證錯誤信息。參考代碼如下： ~~~ <StackPanel?Orientation="Horizontal"?Margin="5"> ????????????????<TextBlock?Text="郵???件:?"?VerticalAlignment="Center"/> ????????????????<TextBox?x:Name="txtEmail"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=email,?Mode=TwoWay,?ValidatesOnNotifyDataErrors=False,?NotifyOnValidationError=True,?ValidatesOnExceptions=True}"?/> ????????????</StackPanel> ????????????<StackPanel?Orientation="Horizontal"?Margin="5"> ????????????????<TextBlock?Text="地???址:?"?VerticalAlignment="Center"/> ????????????????<TextBox?x:Name="txtAddress"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=address,?Mode=TwoWay,?ValidatesOnDataErrors=True,?NotifyOnValidationError=False,?ValidatesOnExceptions=True}"?/> ????????????</StackPanel> ????????????<StackPanel?Orientation="Horizontal"?Margin="5"> ????????????????<TextBlock?Text="電???話:?"?VerticalAlignment="Center"/> ????????????????<TextBox?x:Name="txtPhone"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=phone,?Mode=TwoWay,?ValidatesOnDataErrors=True,?NotifyOnValidationError=False,?ValidatesOnExceptions=True}"?/> ????????????</StackPanel> ????????????<StackPanel?Orientation="Horizontal"?Margin="5"> ????????????????<TextBlock?Text="成績等級:?"?VerticalAlignment="Center"/> ????????????????<TextBox?x:Name="txtGradeLevel"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=gradelevel,?Mode=TwoWay,?ValidatesOnDataErrors=True,?NotifyOnValidationError=False,?ValidatesOnExceptions=True}"?/> ????????????</StackPanel> ????????????<StackPanel?Orientation="Horizontal"?Margin="5"> ????????????????<TextBlock?Text="成績范圍:?"?VerticalAlignment="Center"/> ????????????????<TextBox?x:Name="txtGradeRange"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=graderange,?Mode=TwoWay,?ValidatesOnDataErrors=True,?NotifyOnValidationError=False,?ValidatesOnExceptions=True}"?/> ????????????</StackPanel> ~~~ ValidationSummary控件，提供了許多屬性，允許開發人員自定義其調用，例如，如果不想讓ValidationSummary控件捕獲顯示UserName用戶名驗證錯誤，只需在代碼中添加，dataInput:ValidationSummary.ShowErrorsInSummary = “False”,就可以了。 ~~~ <StackPanel?Orientation="Horizontal"?Margin="5"?x:Name="spUsername">? ????????????????<TextBlock?Text="用戶名:?"?VerticalAlignment="Center"/>? ????????????????<TextBox?x:Name="txtUserName"?Width="200"?DataContext="{Binding?Source={StaticResource?UserDataContext}}"?Text="{Binding?Path=Name,?Mode=TwoWay,?ValidatesOnExceptions=True,?NotifyOnValidationError=True,UpdateSourceTrigger=Explicit}"?dataInput:ValidationSummary.ShowErrorsInSummary?=?"False"/>? </StackPanel> ~~~ 在明白了ValidationSummary控件的使用后，我們來看看Datagrid數據驗證的使用。 **Datagrid數據驗證** Datagrid控件的主要功能是將數據集合使用表格的方式展示到客戶端。該控件支持大量的屬性和事件，允許用戶對數據集合進行操作，例如修改數據，添加數據，刪除等操作。在這些操作中，數據驗證也是最常用的功能之一。為了演示該實例，我們將添加一個簡單的數據集合和一個Datagrid控件，并將該數據集合綁定到Datagrid控件，在User數據成員類中，定義一個新的構造函數： ~~~ public?User(string?strname,string?strpwd,int?iage,string?stremail)? {? ????Name?=?strname;? ????password?=?strpwd;? ????Age?=?iage;? ????email?=?stremail;? } ~~~ 在MainPage中，添加新的命名空間引用： xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 然后，添加一個datagrid控件， ~~~ <data:DataGrid?x:Name="dgValidationDemo"? ???????????????????????????AutoGenerateColumns="False"? ???????????????????????????Margin="10"?Width="350"? ???????????????????????????HorizontalAlignment="Left"? ???????????????????????????>? ????????????????<data:DataGrid.Columns>? ????????????????????<data:DataGridTextColumn?Header="用戶名"?Binding="{Binding?Name,Mode=TwoWay}"/>? ????????????????????<data:DataGridTextColumn?Header="密碼"?Binding="{Binding?password,Mode=TwoWay}"?/>? ????????????????????<data:DataGridTextColumn?Header="年齡"?Binding="{Binding?Age,Mode=TwoWay}"/>? ????????????????????<data:DataGridTextColumn?Header="電子郵件"?Binding="{Binding?email,Mode=TwoWay}"?/>? ????????????????</data:DataGrid.Columns>? </data:DataGrid> ~~~ 在MainPage后臺代碼中，添加數據集合初始化代碼： ~~~ ????????private?List<User>?InitCollection()? ????????{? ????????????List<User>?tmpUserCollection?=?new?List<User>();? ????????????tmpUserCollection.Add(new?User("jv9",?"123456",?99,?"qq34506@hotmail.com"));? ????????????tmpUserCollection.Add(new?User("冷秋寒",?"654321",?88,?"admin@hotmail.com"));? ????????????tmpUserCollection.Add(new?User("Silverlight",?"666666",?77,?"silverlight@hotmail.com"));? ????????????tmpUserCollection.Add(new?User("銀光中國",?"888888",?66,?"admin@silverlightchina.net"));? ????????????return?tmpUserCollection;? ????????} ~~~ 然后在MainPage頁面構造函數中，進行數據綁定： dgValidationDemo.ItemsSource?=?InitCollection(); 運行即可看到如下圖： ![](https://box.kancloud.cn/2016-03-18_56eb67ce2d925.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_4.png) Silverlight Datagrid的數據驗證大體可分為兩種：單元格數據驗證和數據行驗證；下面我們使用實例演示講解著兩種驗證方法， **1. 單元格數據驗證** 單元格數據驗證，顧名思義，是對Datagrid中的某一個單元格進行Validation。 ![](https://box.kancloud.cn/2016-03-18_56eb67ce3dd60.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_6.png) 這種驗證可以基于前幾篇中的四種驗證機制對數據進行判斷，最為常用的驗證機制方式為：基本異常驗證和DataAnnotation驗證機制。 **2. 行數據驗證** 行數據驗證，其功能性和單元格數據驗證相同，而其驗證作用范圍是被驗證數據整行。當行數據驗證出現錯誤時，則會在Datagrid底部顯示一個ListBox顯示其錯誤信息，其樣式和ValidationSummary相似，點擊ListBox錯誤信息，即可跳入驗證出錯行。這時會發現，出現驗證錯誤整行背景成為粉紅色，而出錯的單元格，不再顯示紅框驗證錯誤提示，其錯誤信息被顯示在Datagrid底部。 ![](https://box.kancloud.cn/2016-03-18_56eb67ce4e285.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_8.png) 行數據驗證和單元格數據驗證最大的不同，是其鎖定的范圍不同。當使用行數據驗證時，盡管當前單元格驗證有錯誤，用戶仍舊可以繼續修改該行中其他數據單元格，其焦點被鎖定在整行；而單元個驗證，則被鎖定在某一個單元格，數據驗證報錯，用戶無法切換焦點，必須糾正驗證錯誤后，才能繼續下一步操作。 [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_10.png) ![](https://box.kancloud.cn/2016-03-18_56eb67ce6113c.jpg) **DataForm數據驗證** DataForm數據控件是Silverlight 3 Toolkit中推出的數據處理表格控件。該控件可將數據集合成員顯示到客戶端。其中自帶添加，修改，刪除等內建功能。由于使用該控件需要對數據集合成員進行綁定，每次綁定就已經將Validation驗證框架應用Dataform中，每當驗證錯誤出現時，DataForm控件將自動捕獲驗證錯誤，并顯示在客戶端。使用該控件需要添加以下命名空間引用： xmlns:dataform="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" 我們在MainPage中，添加DataForm控件代碼 ~~~ <dataform:DataForm?x:Name="dfDetail"? ???????????????????????????????Margin="10"?Width="350"?Height="300"? ???????????????????????????????HorizontalAlignment="Left"? ???????????????????????????????AutoGenerateFields="False"? ???????????????????????????????ItemsSource="{Binding}">? ????????????????<dataform:DataForm.EditTemplate>? ????????????????????<DataTemplate>? ????????????????????????<StackPanel>? ????????????????????????????<dataform:DataField>? ????????????????????????????????<StackPanel?Orientation="Horizontal">? ????????????????????????????????????<TextBlock?Text="用戶名:?"?VerticalAlignment="Center"/>? ????????????????????????????????????<TextBox?Text="{Binding?Name,?Mode=TwoWay,?ValidatesOnDataErrors=True}"?VerticalAlignment="Center"?Width="100"/>? ????????????????????????????????</StackPanel>? ????????????????????????????</dataform:DataField>? ????????????????????????????<dataform:DataField>? ????????????????????????????????<StackPanel?Orientation="Horizontal">? ????????????????????????????????????<TextBlock?Text="密碼:?"?VerticalAlignment="Center"/>? ????????????????????????????????????<TextBox?Text="{Binding?password,?Mode=TwoWay,?ValidatesOnDataErrors=True}"?VerticalAlignment="Center"?Width="100"/>? ????????????????????????????????</StackPanel>? ????????????????????????????</dataform:DataField>? ????????????????????????????<dataform:DataField>? ????????????????????????????????<StackPanel?Orientation="Horizontal">? ????????????????????????????????????<TextBlock?Text="年齡:?"?VerticalAlignment="Center"/>? ????????????????????????????????????<TextBox?Text="{Binding?Age,?Mode=TwoWay,?ValidatesOnDataErrors=True}"?VerticalAlignment="Center"?Width="100"/>? ????????????????????????????????</StackPanel>? ????????????????????????????</dataform:DataField>? ????????????????????????????<dataform:DataField>? ????????????????????????????????<StackPanel?Orientation="Horizontal">? ????????????????????????????????????<TextBlock?Text="電子郵件:?"?VerticalAlignment="Center"/>? ????????????????????????????????????<TextBox?Text="{Binding?email,?Mode=TwoWay,?ValidatesOnDataErrors=True}"?VerticalAlignment="Center"?Width="100"/>? ????????????????????????????????</StackPanel>? ????????????????????????????</dataform:DataField>? ????????????????????????</StackPanel>? ????????????????????</DataTemplate>? ????????????????</dataform:DataForm.EditTemplate>? </dataform:DataForm> ~~~ 在DataForm中，我們對已知數據成員進行綁定設置。下面需要簡單修改Mainpage后臺代碼，將數據集合綁定到DataForm： ~~~ ????????public?MainPage()? ????????{? ????????????InitializeComponent();? ????????????//dgValidationDemo.ItemsSource?=?InitCollection();? ????????????PagedCollectionView?pcv?=?new?PagedCollectionView(InitCollection());? ????????????spDataCollection.DataContext?=?pcv;? ????????} ~~~ 這里我們使用了[PagedCollectionView 類](http://msdn.microsoft.com/en-us/library/system.windows.data.pagedcollectionview(VS.95).aspx)，將原有的List<User>轉換為PagedCollectionView ，將其綁定到spDataCollection布局控件的DataContext，從而實現該布局下所有數據控件ItemsSource共同綁定同一個數據源。當Datagrid選擇項被修改時，DataForm當前項也同時修改。 ![](https://box.kancloud.cn/2016-03-18_56eb67ce844ae.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_12.png) 這時，我們可以對DataForm進行簡單的驗證測試：當我們點擊添加一行新數據時，保持所有TextBox為空，點擊Submit，則會看到Dataform返回的驗證錯誤信息提示： ![](https://box.kancloud.cn/2016-03-18_56eb67ce999ae.jpg) [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_14.png) 這時，數據集合已經被鎖定，無論是Datagrid還是Dataform都無法做任何數據操作。 [](http://images.cnblogs.com/cnblogs_com/jv9/WindowsLiveWriter/SilverlightValidation_8E18/image_16.png) ![](https://box.kancloud.cn/2016-03-18_56eb67cebd7fe.jpg) 以上可以看出，對于Dataform的數據驗證，開發人員無需進行過多的干涉，Validation驗證框架會自動接管其驗證進程。 Ok，今天的內容就講到這里，希望大家能有所收獲。 [源代碼第一部分下載](http://www.silverlightchina.net/uploads/soft/100922/1-100922145T2.rar) [源代碼第二部分下載](http://www.silverlightchina.net/uploads/soft/100922/1-100922150230.rar) 歡迎大家加入“專注Silverlight”QQ技術群，目前，1-6群都已經滿員，新開500人七群，歡迎大家加入一起學習討論Silverlight&WPF開發技術。 22308706(一群) 超級群500人滿 37891947(二群) 超級群500人滿 100844510(三群) 高級群200人滿 32679922(四群) 超級群500人滿 23413513(五群) 高級群200人滿 32679955(六群) 超級群500人滿 61267622(七群推薦) 超級群500人未滿