Data Binding in Silverlight with RIA and Entity Framework (Updating Data)

This is a continuation of my earlier article where we discussed how to fetch and display data from a database using DomainServiceContext via entity model. Here in this article we will take the StatesOfIndia application further, where it will accept the state information to be modified as well as accept new state as addition.

Article Series

• Data Binding in Silverlight with RIA and Entity Framework (Displaying Data)
• Data Binding in Silverlight with RIA and Entity Framework - Part 2 (Editing / Updating Data)
• Data Binding in Silverlight with RIA and Entity Framework (Validating Input Data)

Source Code and Demo Link

Hosted Application : Launch StatesOfIndia

Source Code : StatesOfIndia

Extending StatesOfIndia Application

As I said, we will add the following two features to the application.

• Editing a selected state
• Adding New State

The Child Popup Window

So the popup control carries the above controls within a Grid Layout control with the name "chldMainContainer". The XAML code of the popup page is as below. 

As we are going to follow the same logic as my previous post of binding data we will bind the Text property of each individual text box to their respective entity property. At this moment we know which data should go where but until now we have not defined the source of data to the popup. We will get to that soon.span>

1. <controls:ChildWindow x:Class="StatesOfIndia.Views.AddNewState"
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
5. Width="616″ Height="410″
6. Title="AddNewState" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
7. <Grid x:Name="chldMainContainer" Margin="2″>
8. <Grid.RowDefinitions>
9. <RowDefinition />
10. <RowDefinition Height="Auto" />
11. </Grid.RowDefinitions>
12. <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75″ Height="23″ HorizontalAlignment="Right"Margin="0,12,0,0″ Grid.Row="1″ />
13. <Button x:Name="OKButton" Content="Save" Click="OKButton_Click" Width="75″ Height="23″ HorizontalAlignment="Right"Margin="0,12,79,0″ Grid.Row="1″ />
14. <sdk:Label Height="28″ HorizontalAlignment="Left" Margin="12,12,0,0″ Name="label1″ VerticalAlignment="Top" Width="120″Content="State Name  :" />
15. <TextBox Height="23″ Margin="29,32,12,0″ Name="txtStateName" VerticalAlignment="Top" Text="{Binding StateName, Mode=TwoWay}"/>
16. <sdk:Label Content="Population  :" Height="28″ HorizontalAlignment="Left" Margin="12,74,0,0″ Name="label2″VerticalAlignment="Top" Width="120″ />
17. <TextBox Height="23″ HorizontalAlignment="Left" Margin="95,74,0,0″ Name="txtPopulation" VerticalAlignment="Top" Width="189″Text="{Binding Population, Mode=TwoWay}" />
18. <sdk:Label Content="Literacy  :" Height="28″ HorizontalAlignment="Left" Margin="27,108,0,0″ Name="label3″ VerticalAlignment="Top"Width="120″ />
19. <TextBox Height="23″ HorizontalAlignment="Left" Margin="95,108,0,0″ Name="txtLiteracy" VerticalAlignment="Top" Width="189″ Text="{Binding Literacy, Mode=TwoWay}"/>
20. <sdk:Label Content="No of District:" Height="28″ HorizontalAlignment="Left" Margin="6,142,0,0″ Name="label4″VerticalAlignment="Top" Width="120″ />
21. <TextBox Height="23″ HorizontalAlignment="Left" Margin="95,142,0,0″ Name="txtNoOfDist" VerticalAlignment="Top" Width="189″ Text="{Binding District,Mode=TwoWay}" />
22. <sdk:Label Content="C. Minister :" Height="28″ HorizontalAlignment="Left" Margin="17,176,0,0″ Name="label5″VerticalAlignment="Top" Width="120″ />
23. <TextBox Height="23″ HorizontalAlignment="Left" Margin="95,176,0,0″ Name="txtCM" VerticalAlignment="Top" Width="189″ Text="{Binding CM, Mode=TwoWay}" />
24. <sdk:Label Content="Area  :" Height="28″ HorizontalAlignment="Left" Margin="337,75,0,0″ Name="label6″ VerticalAlignment="Top"Width="120″ />
25. <TextBox Height="23″ HorizontalAlignment="Left" Margin="394,75,0,0″ Name="txtArea" VerticalAlignment="Top" Width="189″ Text="{Binding Area, Mode=TwoWay}" />
26. <sdk:Label Content="Established  :" Height="28″ HorizontalAlignment="Left" Margin="302,110,0,0″ Name="label7″VerticalAlignment="Top" Width="120″ />
27. <TextBox Height="23″ HorizontalAlignment="Left" Margin="394,109,0,0″ Name="txtEstablished" VerticalAlignment="Top" Width="189″Text="{Binding Established,Mode=TwoWay}" />
28. <sdk:Label Content="Governer  :" Height="28″ HorizontalAlignment="Left" Margin="314,142,0,0″ Name="label8″VerticalAlignment="Top" Width="120″ />
29. <TextBox Height="23″ HorizontalAlignment="Left" Margin="394,143,0,0″ Name="txtGoverner" VerticalAlignment="Top" Width="189″Text="{Binding Governor,Mode=TwoWay}" />
30. <sdk:Label Content="WebSite  :" Height="28″ HorizontalAlignment="Left" Margin="322,179,0,0″ Name="label9″ VerticalAlignment="Top"Width="120″ />
31. <TextBox Height="23″ HorizontalAlignment="Left" Margin="394,177,0,0″ Name="txtWebsite" VerticalAlignment="Top" Width="189″ Text="{Binding Website,Mode=TwoWay}" />
32. <sdk:Label Content="Info :" Height="28″ HorizontalAlignment="Left" Margin="54,247,0,0″ Name="label10″ VerticalAlignment="Top"Width="120″ />
33. <TextBox Height="86″ HorizontalAlignment="Left" Margin="95,247,0,0″ Name="txtWikiInfo" VerticalAlignment="Top" Width="488″ Text="{Binding WikiIntro,Mode=TwoWay}" />
34. <sdk:Label Content="Capital City :" Height="28″ HorizontalAlignment="Left" Margin="13,207,0,0″ Name="label11″VerticalAlignment="Top" Width="120″ />
35. <TextBox Height="23″ HorizontalAlignment="Left" Margin="95,207,0,0″ Name="txtCapital" VerticalAlignment="Top" Width="189″ />
36. </Grid>
37. </controls:ChildWindow>

I I have picked one of the controls from the Popup bellow.

Now here the direction of dataflow mode is Two-way; by default it is One-way. This added Mode says that the data will be updated from both sides i.e from Target to Source and Source to Target. As we want to update the source entity while editing of the TextBox we made it two way. I will recommend you to go through the beautiful post about data binding from Sacha  Barber this post and jump directly to "Data Binding Concept" section.

Editing a Selected State

We should be allowed to edit state based on the list box selection. So the Selected State Entity will be passed to the popup page where again we will attach it to the Grid Layout Control, subsequently with the controls of the popup which is bound to the Grid Layout entity.  

When the user clicks on the Edit Option in the home page, I am going to bind the selected item to the Grid Layout "chldMainContainer"of popup. 

1. private void btnEdit_Click(object sender, RoutedEventArgs e)
2. {
3. //Creating a new object of Popup
4. AddNewState chldWind = new AddNewState();
5. //Getting the GridLayout Control of the popUp To Be Shown
6. ((Grid)chldWind.FindName("chldMainContainer")).DataContext = lstStates.SelectedItem;
7. //Add a Event Handaler Which will Execute the Submit The Changes  made to entity Assigned
8. chldWind.Closed += new EventHandler(chldWind_Closed);
9. chldWind.Show();
10. }

Here the point to note is the attached method to the Close event of popup. Once the Popup is closed we need to update the entity back to the database.

 

1. void chldWind_Closed(object sender, EventArgs e)
2. {
3. ChildWindow chldWind = (ChildWindow)sender;
4. if ((chldWind.DialogResult == true))
5. {
6. dataContext.SubmitChanges();
7. }
8. else
9. dataContext.RejectChanges();
10. }

Now the With SubmitChanges() method we will accept the changes made to the entity by the popup. 

One Point to note here is that the DomainContextService used to load the data should be used to update the same. 

Let's Run and Check the Editing option.

Well it work perfectly if you have followed correctly.p>

Adding a New State

Now the addition of Entity will not trouble much with exiting the editing option; here instead of selected entity object we will create a new State object and will pass it to the Popup. Check the following code on Add New button click event.

 

1. private void btnAddNew_Click(object sender, RoutedEventArgs e)
2. {
3. //Create a New State Object
4. State stateObject = new State();
5. //Add to the StateCollection of Domain DataContext
6. dataContext.States.Add(stateObject);
7. //Create a PopUp Child Window Object
8. Views.AddNewState chldWind = new Views.AddNewState();
9. //Getting the GridLayout Control of the popUp To Be Shown and assign the Newly Created Object
10. ((Grid)chldWind.FindName("chldMainContainer")).DataContext = stateObject;
11. //Attach The Todo on Close Event handaler
12. chldWind.Closed += new EventHandler(chldWind_Closed);
13. chldWind.Show();
14. }

Adding Deletion Option

Again this is quite straight forward functionality where we will delete the selected list box item from the collection and will refresh the list.

1. private void lstStates_KeyDown(object sender, KeyEventArgs e)
2. {
3. if (e.Key == Key.Delete)
4. {
5. State selectedState=(State)lstStates.SelectedItem;
6. if (MessageBox.Show("Your action will delete the state " + selectedState.StateName +
7. " and all its informations./nAre you sure you want to delete ?",
8. "Confirmation", MessageBoxButton.OKCancel ) == MessageBoxResult.OK)
9. {<{
10. dataContext.States.Remove(selectedState);
11. dataContext.SubmitChanges(OnSubmitCompleted,null);
12. }li>
13. }
14. }

Refreshing the List Box

You will wonder does this need a separate sub heading .. surely check out the details here in this post

Conclusion

Hope this article gives you a fair idea about the binding concept, at least a practical idea. In the next article we will discuss data validation.