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

This is continuation of my earlier post where we discussed how to fetch and display data from database using DomainServiceContext via entity model. Here in this post, 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 – Part 1 (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 – Part 3 (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:

1. Editing a selected state
2. Adding New State

The Child Popup Window

So the popup control carries the above controls within a Grid Layout control with 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 till now, we have-not defined the source of data to the popup. We will come to that soon.

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

I have picked one of the controls from the Popup below:

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 by Sacha Barber 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 in bind with the Grid Layout entity.

Once the user clicks on the Edit Option in Home page, I am going to bind the selected item to the Grid Layout “chldMainContainer” of popup.

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

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

void chldWind_Closed(object sender, EventArgs e) 
{ 
ChildWindow chldWind = (ChildWindow)sender; 
if ((chldWind.DialogResult == true)) 
{ 
dataContext.SubmitChanges(); 
} 
else 
dataContext.RejectChanges(); 
}

Now 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 works perfectly if you have followed correctly.

Adding a New State

Now, addition of Entity will not trouble much with exiting 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.

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

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.

private void lstStates_KeyDown(object sender, KeyEventArgs e)
{ 
if (e.Key == Key.Delete) 
{ 
State selectedState=(State)lstStates.SelectedItem; 
if (MessageBox.Show("Your action will delete the state " + selectedState.StateName + 
" and all its information./nAre you sure you want to delete ?", 
"Confirmation", MessageBoxButton.OKCancel ) == MessageBoxResult.OK) 
{ 
dataContext.States.Remove(selectedState); 
dataContext.SubmitChanges(OnSubmitCompleted,null); 
} 
} 
}

Refreshing the List Box

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

Conclusion

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