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>

 

运行结果：