In this installment you will see full CRUD, so you\u2019ll learn how to do queries, data binding, updates and deletes.<\/P>\n
The Problem:<\/H3>\n
In part 1<\/A> we created a \u2018Make a Suggestion\u2019 feature for a department Line of Business application, by storing suggestions in SharePoint 2010.<\/P>\n Now we need a little Silverlight application for reviewing all those suggestions and making comments on them. So we need to display interesting suggestions, to allow the user to provide a comment, or make edits and deletes.<\/P>\n Assuming you\u2019ve set-up your service reference (see part 1<\/A>) the next step is to create XAML to display the Suggestions:<\/P>\n <UserControl x:Class=”DataServicesOverSharepoint.MainPage” This XAML code, displays a ListBox (of suggestions) and an series of textboxes for editing the currently selected suggestion. To make this work we have a very simple class to encapsulate Data Services and the Data:<\/P>\n public class SuggestionContext This class has two properties, both evaluated on first access. <\/P>\n One gets the DataServiceContext and the other gets a DataServiceCollection which will hold, and track changes to, a collection of Suggestions. <\/P>\n The SuggestionContext is then exposed as a property of our Silverlight UserControl: <\/P>\n private SuggestionContext _currentContext; Next in the constructor of our UserControl we use this as the DataContext for our layout root, we call GetSuggestionsWithNoComments() to retrieve the interesting suggestions, and finally we hookup some event handlers for our buttons, so we can add a new suggestion and save any changes we make back to the database.<\/P>\n public MainPage() The GetSuggestionsWithNoComments() method looks like this: <\/P>\n public void GetSuggestionsWithNoComments() query.BeginExecute( It executes an asynchronous query to retrieve the interesting suggestions and load them into the CurrentContext.TrackedSuggestions collection. Which in turn causes the ListBox to fill, because of the data binding we\u2019ve set up.<\/P>\n Now in our XAML we\u2019ve already setup two way data binding from our textboxes back to the suggestion selected in the ListBox, so as we make changes in the TextBoxes the Suggestion is modified, and those changes are tracked by the DataServiceCollection. <\/P>\n So that covers Editing.<\/P>\n Insert is handled by the \u2018New Suggestion\u2019 button. The event handler looks like this:<\/P>\n void AddNewSuggestion(object sender, RoutedEventArgs e) As you can see this creates a new Suggestion, adds it to the DataServiceCollection, and then tells the ListBox to select the new Suggestion so it can be modified via our TextBoxes.<\/P>\n In our XAML we added a Delete button to each ListBoxItem, this event is bound to those buttons:<\/P>\n private void DeleteSuggestion(object sender, RoutedEventArgs e) This relies on the fact that when during DataBinding we put the Suggestion in the button\u2019s Tag property, so all we do when the button is clicked, is retrieve the current Suggestion and remove the suggestion from the TrackedSuggestions collection. This is interpreted as a delete. <\/P>\n Because we are using a DataServiceCollection, every Insert, Edit and Delete is automatically tracked for us. <\/P>\n But as yet they haven\u2019t been committed to the server.<\/P>\n To do that you have to click the \u201cSave Changes\u201d button, which calls this code: As per usual the request is invoked asynchronously, in this case by calling BeginSaveChanges. <\/P>\n One thing to note is that once we\u2019ve actually saved the changes we refresh the list of Suggestions by calling GetSuggestionsWithNoComments() again. <\/P>\n The idea here is that once we\u2019ve edited some suggestions they may not longer be interesting for us, or there maybe some new suggestions on the server.<\/P>\n As you can see it is really easy to create a Silverlight application that uses Data Services to query and manipulate list data.<\/P>\n In Part 3 we will cover how to interact with blobs (i.e. Documents, Images etc), and look out for an upcoming blog post covering X-Domain Policy<\/A> which is important if your Silverlight application isn\u2019t hosted on the same web-server as Sharepoint.<\/P>\n As always don\u2019t hesitate to leave a comment.<\/P>\nThe Solution:<\/H3>\n
Step 1: Displaying suggestions<\/H4>\n
xmlns=”<\/FONT>http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation<\/FONT><\/A>”
xmlns:x=”<\/FONT>http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml<\/FONT><\/A>”
xmlns:d=”<\/FONT>http:\/\/schemas.microsoft.com\/expression\/blend\/2008<\/FONT><\/A>” xmlns:mc=”<\/FONT>http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006<\/FONT><\/A>”
mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
<Grid x:Name=”LayoutRoot” ShowGridLines=”False”>
<Grid.RowDefinitions>
<RowDefinition Height=”5″\/>
<RowDefinition Height=”400″\/>
<RowDefinition Height=”300″\/>
<RowDefinition Height=”30″ \/>
<RowDefinition Height=”5″ \/>
<\/Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”5″\/>
<ColumnDefinition Width=”500″\/>
<ColumnDefinition Width=”5″\/>
<\/Grid.ColumnDefinitions>
<ListBox ItemsSource=”{Binding TrackedSuggestions, Mode=TwoWay}” Name=”ListBox” Grid.Row=”1″ Grid.Column=”1″ ScrollViewer.VerticalScrollBarVisibility=”Auto”>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation=”Horizontal” Margin=”5″>
<StackPanel Orientation=”Vertical” Margin=”5″>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”400″ Text=”{Binding Title}” FontWeight=”Bold”\/>
<\/StackPanel>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”400″ Text=”{Binding Description}” TextWrapping=”Wrap”\/>
<\/StackPanel>
<\/StackPanel>
<Button Content=”Delete” Click=”DeleteSuggestion” Tag=”{Binding}” Width=”50″ Height=”30″ VerticalAlignment=”Center” HorizontalAlignment=”Center”\/>
<\/StackPanel>
<\/DataTemplate>
<\/ListBox.ItemTemplate>
<\/ListBox>
<StackPanel Orientation=”Vertical” Margin=”5″ Grid.Column=”1″ Grid.Row=”2″>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”100″ Text=”Title:” FontWeight=”Bold”\/>
<TextBox Width=”300″ Text=”{Binding ElementName=ListBox, Path=SelectedItem.Title, Mode=TwoWay}”\/>
<\/StackPanel>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”100″ Text=”Description:” FontWeight=”Bold”\/>
<TextBox Width=”300″ Text=”{Binding ElementName=ListBox, Path=SelectedItem.Description, Mode=TwoWay}”\/>
<\/StackPanel>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”100″ Text=”Created:” FontWeight=”Bold”\/>
<TextBox Width=”300″ Text=”{Binding ElementName=ListBox, Path=SelectedItem.Created, Mode=TwoWay}”\/>
<\/StackPanel>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”100″ Text=”Modified:” FontWeight=”Bold”\/>
<TextBox Width=”300″ Text=”{Binding ElementName=ListBox, Path=SelectedItem.Modified, Mode=TwoWay}”\/>
<\/StackPanel>
<StackPanel Orientation=”Horizontal”>
<TextBlock Width=”100″ Text=”Comments:” FontWeight=”Bold”\/>
<TextBox Width=”300″ Height=”150″ Text=”{Binding ElementName=ListBox, Path=SelectedItem.Comments, Mode=TwoWay}” AcceptsReturn=”True” \/>
<\/StackPanel>
<\/StackPanel>
<StackPanel Orientation=”Horizontal” Grid.Row=”3″ Grid.Column=”1″ Margin=”5″>
<Button Width=”100″ Name=”btnNewSuggestion” HorizontalAlignment=”Left” Content=”New Suggestion”\/>
<Button Width=”100″ Name=”btnSaveChanges” HorizontalAlignment=”Right” Content=”Save Changes”\/>
<\/StackPanel>
<\/Grid>
<\/UserControl><\/FONT> <\/P>\n
When running it should looks something like this:<\/P>\n![\"SuggestionsVisualizer\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/23\/2019\/02\/SuggestionsVisualizer_thumb.jpg\" "\\"SuggestionsVisualizer\\"")
<\/A> <\/P>\n
{
TeamSiteDataContext _ctx;
DataServiceCollection<SuggestionsItem> _suggestions;
public TeamSiteDataContext DataContext
{
get
{
if (_ctx == null)
{
_ctx = new TeamSiteDataContext(
new Uri(
http:\/\/mflasko-dev\/_vti_bin\/listdata.svc,
UriKind.Absolute
)
);
}
return _ctx;
}
}
public DataServiceCollection<SuggestionsItem> TrackedSuggestions
{
get
{
if (_suggestions == null)
_suggestions = DataServiceCollection.CreateTracked<SuggestionsItem>(DataContext);
return _suggestions;
}
}
}<\/FONT><\/P>\n
public SuggestionContext CurrentContext {
get {
if (_currentContext == null)
_currentContext = new SuggestionContext();
return _currentContext;
}
}<\/FONT><\/P>\n
{
InitializeComponent();
GetSuggestionsWithNoComments();
LayoutRoot.DataContext = CurrentContext;
this.btnSaveChanges.Click += new RoutedEventHandler(SaveChanges_Click);
this.btnNewSuggestion.Click += new RoutedEventHandler(AddNewSuggestion);
}<\/FONT><\/P>\n
{
var query = (
from suggestion in CurrentContext.DataContext.Suggestions
where suggestion.Comments == null
select suggestion
) as DataServiceQuery<SuggestionsItem>; <\/FONT><\/P>\n
(IAsyncResult asyncResult) => Dispatcher.BeginInvoke(() =>
{
DataServiceQuery<SuggestionsItem> queryResults = asyncResult.AsyncState as DataServiceQuery<SuggestionsItem>;
if (queryResults != null)
{
CurrentContext.TrackedSuggestions.Clear(true);
CurrentContext.TrackedSuggestions.Load(
queryResults.EndExecute(asyncResult)
);
}
})
, query
);
}<\/FONT><\/P>\nStep 2: Inserting, Editing and Deleting suggestions<\/H4>\n
{
CurrentContext.TrackedSuggestions.Add(
new SuggestionsItem {
Title = “{Enter a title}”,
Description = “”,
Modified = DateTime.Now,
Created = DateTime.Now
}
);
ListBox.SelectedIndex = CurrentContext.TrackedSuggestions.Count – 1;
}<\/FONT><\/P>\n
{
Button b = sender as Button;
SuggestionsItem toDelete = b.Tag as SuggestionsItem;
CurrentContext.TrackedSuggestions.Remove(toDelete);
}<\/FONT><\/P>\nStep 3: Submitting your changes<\/H4>\n
void SaveChanges_Click(object sender, RoutedEventArgs e)
{
CurrentContext.DataContext.BeginSaveChanges(
(IAsyncResult asyncResult) =>
Dispatcher.BeginInvoke(
() =>
{
CurrentContext.DataContext.EndSaveChanges(asyncResult);
GetSuggestionsWithNoComments();
}
)
, CurrentContext
);
}<\/FONT><\/P>\nSummary:<\/H3>\n