上一篇,我們討論了,捕獲用戶提交數據驗證。本篇將集中討論Datagrid和Dataform兩個數據控件的數據驗證方法,其中,我們會附加介紹一個新的驗證控件ValidationSummary。
概述
Datagrid和Dataform是Silverlight中最常用的兩個數據控件,其主要目的是作為數據集合的載體控件。這兩個控件不僅支持自動數據綁定,而且允許用戶添加許多自定義行為操作,例如編輯,排序,刪除,添加等。而在日常項目開發(fā)中,經常會碰到用戶在編輯,或者添加時對數據的驗證判斷,在數據commit前,即捕獲數據異常并返回提示信息到客戶端。
ValidationSummary控件
在Datagrid和Dataform數據驗證中,最為常用的是ValidationSummary控件,該控件和WebForm中的ValidationSummary控件類似,其功能都是將錯誤信息集合顯示在一個ListBox控件中。簡單的說,ValidationSummary控件是一個能夠容納驗證錯誤集合的容器,能夠檢測和顯示當前頁面所有驗證結果到客戶端。
命名控件:System.Windows.Controls
裝配:System.Windows.Controls.Data.Input (位于 System.Windows.Controls,Data.Input.dll)
我們仍舊使用上一篇的源代碼項目,SilverlightValidationDemo,簡單修改代碼如下:
首先需要添加新的命名空間引用,
然后添加ValidationSummary控件,即可
其運行結果如下:
這樣就一個ValidationSummary使用實例。細心的朋友可能已經發(fā)現(xiàn),上圖,一共出現(xiàn)了八處驗證錯誤提示,而在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控件,提供了許多屬性,允許開發(fā)人員自定義其調用,例如,如果不想讓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();
運行即可看到如下圖:
Silverlight Datagrid的數據驗證大體可分為兩種:單元格數據驗證和數據行驗證;下面我們使用實例演示講解著兩種驗證方法,
1. 單元格數據驗證
單元格數據驗證,顧名思義,是對Datagrid中的某一個單元格進行Validation。
這種驗證可以基于前幾篇中的四種驗證機制對數據進行判斷,最為常用的驗證機制方式為:基本異常驗證和DataAnnotation驗證機制。
2. 行數據驗證
行數據驗證,其功能性和單元格數據驗證相同,而其驗證作用范圍是被驗證數據整行。當行數據驗證出現(xiàn)錯誤時,則會在Datagrid底部顯示一個ListBox顯示其錯誤信息,其樣式和ValidationSummary相似,點擊ListBox錯誤信息,即可跳入驗證出錯行。
這時會發(fā)現(xiàn),出現(xiàn)驗證錯誤整行背景成為粉紅色,而出錯的單元格,不再顯示紅框驗證錯誤提示,其錯誤信息被顯示在Datagrid底部。
行數據驗證和單元格數據驗證最大的不同,是其鎖定的范圍不同。當使用行數據驗證時,盡管當前單元格驗證有錯誤,用戶仍舊可以繼續(xù)修改該行中其他數據單元格,其焦點被鎖定在整行;而單元個驗證,則被鎖定在某一個單元格,數據驗證報錯,用戶無法切換焦點,必須糾正驗證錯誤后,才能繼續(xù)下一步操作。
DataForm數據驗證
DataForm數據控件是Silverlight 3 Toolkit中推出的數據處理表格控件。該控件可將數據集合成員顯示到客戶端。其中自帶添加,修改,刪除等內建功能。
由于使用該控件需要對數據集合成員進行綁定,每次綁定就已經將Validation驗證框架應用Dataform中,每當驗證錯誤出現(xiàn)時,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 類,將原有的List<User>轉換為PagedCollectionView ,將其綁定到spDataCollection布局控件的DataContext,從而實現(xiàn)該布局下所有數據控件ItemsSource共同綁定同一個數據源。當Datagrid選擇項被修改時,DataForm當前項也同時修改。
這時,我們可以對DataForm進行簡單的驗證測試:
當我們點擊添加一行新數據時,保持所有TextBox為空,點擊Submit,則會看到Dataform返回的驗證錯誤信息提示:
這時,數據集合已經被鎖定,無論是Datagrid還是Dataform都無法做任何數據操作。
以上可以看出,對于Dataform的數據驗證,開發(fā)人員無需進行過多的干涉,Validation驗證框架會自動接管其驗證進程。
Ok,今天的內容就講到這里,希望大家能有所收獲。
源代碼第一部分下載
源代碼第二部分下載