WCF RIA Service 基础—Data Binding, Creating and Editing

代码下载：SlEventManager

前面看到有几个朋友让我写几遍RIA Service的文章。之前都没时间去写，自己有点懒。呵呵。今天先送上一篇吧。

需要Silverlight 4 RC和VS2010 RC。

Google了下,看到有几个人写的中文版都是Silverlight 3和VS2008的。所以我这个也算是比较早的中文资料，希望对不喜欢看英文资料的.net开发人员有帮助。

WCF RIA Service 基础—Data Binding, Creating and Editing
1. 在VS2010中新建一个Silverlight Business Application命名为SlEventManager;



右键SlEventManager的项目名称,选择Properties，你可以在属性页面的最下面看到此SL项目所使用的WCF RIA Service的链接：




2. 创建一个Entity Data Model类。
在SlEventManagement.Web项目下的App_Data文件夹下添加一个数据库,然后把SlEventManager.mdf数据库添加到项目中。这个就作为我们的数据源。
接下来就创建用来为WCF RIA Service提供实体的Entity Data Model。
a. 右键SlEventMananger.Web项目,选择添加新项,然后在Code这个分类中找到ADO.Net Entity Data Model模板,改名为EventManagerDbModel,然后点击添加。出现如下界面：



b. 按照提示选择刚才添加到项目中的数据库作为数据源,点击下一步,这时需要你选择所需要的数据表(选中下图所示的几张表)：




c. 现在我们的Data Model就完成了。这时一定要先重新编译一下项目,否则你会无法进行接下来的操作。
3. 创建一个Domain Services。
a. 和第二步相同,为SlEventManager.Web项目添加一个新项,然后到Web系列的模版中找到Domain Service Class模板,重命名为EventManagerDomainService,点击添加按钮。
b. 这时你能看到在第二步的Data Model，选中所有的checkbox,别忘了选中下面的生成元数据。如图:



这时你应该在项目的浏览器中看到多了三个文件：




4. 现在重新编译一下项目。按说应该在Data Source中能够看到下图所示的数据源：




实际上我的VS2010根本就看不到,我查了很多网上的论坛,大家都有这个问题。可能是因为版本的不同吧。应该到了RTC版本就OK了。
没有这个也不影响我们的后续操作。
5. 回到SlEventManager项目,在View文件夹下,打开home.xaml文件，然后点击只给页面保留一个名字为LayoutRoot的Grid，然后需要添加引用：




a. 在Home.xaml文件中注册刚添加的那个dll以及RIA Service所在的命名空间:




b. 第二步就是在Gird中添加DomainServiceSource：
c. <riaControls:DomainDataSource AutoLoad="True" d:DataContext="{d:DesignInstance my:Event,CreateList=True}" Height="0" LoadedData="eventDomainDataSource_LoadedData" Name="eventDomainDataSource" QueryName="GetEventsQuery" Width="0">
<riaControls:DomainDataSource.DomainContext>

d. 接下来就是数据的绑定：
<riaControls:DomainDataSource.DomainContext>
<my1:EventManagerDomainContext/>
</riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding ElementName=eventDomainDataSource, Path=Data}" Margin="12,40,12,12" Name="eventDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn x:Name="eventTitleColumn" Binding="{Binding Path=EventTitle}" Header="Event Title" Width="SizeToHeader" />
<sdk:DataGridTextColumn x:Name="eventStartDateColumn" Binding="{Binding Path=EventStartDate}" Header="Event Start Date" Width="SizeToHeader"/>
<sdk:DataGridTextColumn x:Name="eventEndDataeColumn" Binding="{Binding Path=EventEndDate}" Header="Event End Date" Width="SizeToHeader"/>
<sdk:DataGridTextColumn x:Name="eventVenueNameColumn" Binding="{Binding Path=EventVenueName}" Header="Event Venue Name" Width="SizeToHeader" />
<sdk:DataGridTextColumn x:Name="eventDescriptionColumn" Binding="{Binding Path=EventDescription}" Header="Event Description" Width="*" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>

直接按F5运行看结果：




6. 为Date列添加Calendar：
这个就是DataGrid的属性了。创建两个TemplateColumn：
把原来的Start Date 和End Date代码去掉换成如下代码：
<sdk:DataGridTemplateColumn x:Name="eventStartDateColumn" Header="Event Start Date" Width="SizeToHeader">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<sdk1:DatePicker SelectedDate="{Binding Path=EventStartDate, Mode=TwoWay, NotifyOnValidationError=true}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn x:Name="eventEndDateColumn" Header="Event End Date" Width="SizeToHeader">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<sdk1:DatePicker SelectedDate="{Binding Path=EventEndDate, Mode=TwoWay, NotifyOnValidationError=true}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

运行结果：