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

Source Code and Demo Link

Hosted Application : Launch StatesOfIndia

Source Code : StatesOfIndia

Extending StatesOfIndia Application

As i said we will add following two feature to the application

  1. Editing a selected state
  2. Adding New State

Silverlight Demo Application

The Child Popup Window

So the popup control carries above controls with in a Grid Layout control with name “chldMainContainer”.The XAML code of the popup page is as bellow.

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.

  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 have picked one of the control from the Popup bellow ,

SNAGHTML100657b

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 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.

  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 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 that the DomainContextService used to load the data should be used to update the same .

Lets Run and Check the Editing option ,

Silverlight Demo Application

Well it work 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.

  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. }
  13. }
  14. }

Refreshing the List Box

You will wonder does 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 practical idea.In next we will discuss about data validation .