Sergey Barskiy's Blog

In this post I will explore a possibility of talking to a WCF REST Service from a Windows Phone 7 device.  This should complete my posts related to consuming and working with data on Windows Phone 7.

I am going to start with creating a WCF REST Service.  First of all, I am going to create data using Entity Framework Code First.  I am going to re-use classes with my previous posts.  I am going to define a handful : Attendee, Session and Session Category.  Here is what Attendee class looks like as it will be the class I will use in my services.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
 
namespace VSLiveData.EF
{
    public class Attendee
    {
        [Key]
        public int AttendeeID { get; set; }
 
        [StringLength(50), Required]
        public string FirstName { get; set; }
 
        [StringLength(50), Required]
        public string LastName { get; set; }
 
        [StringLength(int.MaxValue)]
        public string Notes { get; set; }
 
        public virtual ICollection<Session> Sessions { get; set; }
    }
}

Nest step is to define a service.  .NET 4 comes with a template for RESTfull WCF Service, and I am going to use it to get a head start on my code.  I am going to right click on my solution, and in Add New Item dialog I will select WCF REST Service Applications.

In next step I will rename and update created service.  I am going to rename it to JSONDataService.  I am going to start with a method that get list of attendees sorted by last name:

using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using VSLiveData.EF;
 
namespace WcfRestService
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(
        RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    [ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
    public class JSONDataService
    {
 
        [WebGet(UriTemplate = "/Attendee/List", ResponseFormat = WebMessageFormat.Json)]
        public List<Attendee> GetList()
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Configuration.LazyLoadingEnabled = false;
                context.Configuration.ProxyCreationEnabled = false;
                return context.Attendees.ToList();
            }
        }

A couple of important things to notice here.  I am turning off proxy creation.  I have to do this, otherwise I will get serialization problems.  I am also turning off lazy loading because I do not want to populate navigation properties, plus I will get an exception if I touch that property if my code is outside of using statement.  You will see that I specify uri template as well.  I want to use meaningful path for it.  I also specify JSON format for returned data.  Let’s take a look at create method next

        [WebInvoke(UriTemplate = "/Attendee/Create", Method = "POST", 
            ResponseFormat = WebMessageFormat.Json, 
            RequestFormat = WebMessageFormat.Json)]
        public Attendee Create(Attendee attendee)
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Attendees.Add(attendee);
                context.SaveChanges();
            }
            return attendee;
        }

The code to actually save attendee is pretty easy – I am utilizing entity framework code first API to add new attendee to the collection, save and return new attendee.  Entity framework will populate ID for me as part of Save method.  I also specify JSON as my format for incoming and outgoing data.  The rest of the methods are very similar, so here is entire class:

using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using VSLiveData.EF;
 
namespace WcfRestService
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(
        RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    [ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
    public class JSONDataService
    {
 
        [WebGet(UriTemplate = "/Attendee/List", ResponseFormat = WebMessageFormat.Json)]
        public List<Attendee> GetList()
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Configuration.LazyLoadingEnabled = false;
                context.Configuration.ProxyCreationEnabled = false;
                return context.Attendees.ToList();
            }
        }
 
        [WebInvoke(UriTemplate = "/Attendee/Create", Method = "POST", 
            ResponseFormat = WebMessageFormat.Json, 
            RequestFormat = WebMessageFormat.Json)]
        public Attendee Create(Attendee attendee)
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Attendees.Add(attendee);
                context.SaveChanges();
            }
            return attendee;
        }
 
        [WebGet(UriTemplate = "/Attendee/Get/{id}", 
            ResponseFormat = WebMessageFormat.Json)]
        public Attendee Get(string id)
        {
            Attendee attendee = null;
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Configuration.LazyLoadingEnabled = false;
                context.Configuration.ProxyCreationEnabled = false;
                int attendeeID = int.Parse(id);
                attendee = context.Attendees.Where(one => one.AttendeeID == attendeeID).FirstOrDefault();
            }
            return attendee;
        }
 
        [WebInvoke(UriTemplate = "/Attendee/Update", Method = "PUT", 
            ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
        public Attendee Update(Attendee attendee)
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Attendees.Attach(attendee);
                context.Entry(attendee).State = System.Data.EntityState.Modified;
                context.SaveChanges();
            }
            return attendee;
        }
 
        [WebInvoke(UriTemplate = "/Attendee/Delete/{id}", Method = "DELETE")]
        public void Delete(string id)
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                var attendee = new Attendee() { AttendeeID = int.Parse(id) };
                context.Attendees.Attach(attendee);
                context.Entry(attendee).State = System.Data.EntityState.Deleted;
                context.SaveChanges();
            }
        }
 
    }
}

I have to register routes for my service in Global.asax.cs file:

using System;
using System.ServiceModel.Activation;
using System.Web;
using System.Web.Routing;
 
namespace WcfRestService
{
    public class Global : HttpApplication
    {
        void Application_Start(object sender, EventArgs e)
        {
            RegisterRoutes();
        }
 
        private void RegisterRoutes()
        {
            RouteTable.Routes.Add(new ServiceRoute("JSONDataService", new WebServiceHostFactory(), typeof(JSONDataService)));
        }
    }
}

In my web.config I just need to set my connection string for my data context and specify routing engine

<?xml version="1.0"?>
<configuration>
 
           <connectionStrings>
                      <add
                        name="VSLive"
                        connectionString="Server=.;Database=VSLive;Trusted_Connection=True;"
                        providerName="System.Data.SqlClient"/>
           </connectionStrings>
 
           <system.web>
                      <compilation debug="true" targetFramework="4.0" />
           </system.web>
 
           <system.webServer>
                      <modules runAllManagedModulesForAllRequests="true">
                                 <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web, Version=4.0.0.0,

Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
                      </modules>
           </system.webServer>
 
           <system.serviceModel>
                      <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
                      <standardEndpoints>
                                 <webHttpEndpoint>
                                            <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true"/>
                                 </webHttpEndpoint>
                      </standardEndpoints>
           </system.serviceModel>

Now, it is time to get to windows phone 7 app.  Just add new project and select Windows Phone 7 application.  The most interesting part is my view model that talks to my WCF service.  First of all, I am going to add a property to hold collection of attendees:

        public ObservableCollection<Attendee> Items { get; private set; }

Next, I am going to use WebClient to get the data.  I could also use HTTPRequest.  The difference between the two is that callbacks from WebClient are automatically marshaled to UI thread.  Here is how I would get the list of attendees:

        /// <summary>
        /// Creates and adds a few ItemViewModel objects into the Items collection.
        /// </summary>
        public void LoadData()
        {
            WebClient client = new WebClient();
            client.OpenReadCompleted += new OpenReadCompletedEventHandler(client_OpenReadCompleted);
            client.OpenReadAsync(new Uri(@"http://localhost/WcfRestService/JSONDataService/Attendee/List"));
 
   
        }
 
        void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            ObservableCollection<Attendee> data = new ObservableCollection<Attendee>();
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(List<Attendee>));
            List<Attendee> attendees = (List<Attendee>)serializer.ReadObject(e.Result);
            attendees.ForEach(one => Items.Add(one));
 

        }

Let me explain what this code does.  I am creating a web client, then I am subscribing to completed event, then I am calling OpenRead.  Because of the URL I am using, this call will eventually end up in the method that matches my URL based on UriTemplate attribute for the method:

        [WebGet(UriTemplate = "/Attendee/List", ResponseFormat = WebMessageFormat.Json)]
        public List<Attendee> GetList()
        {
            using (VSLiveContext context = new VSLiveContext())
            {
                context.Configuration.LazyLoadingEnabled = false;
                context.Configuration.ProxyCreationEnabled = false;
                return context.Attendees.ToList();
            }
        }

In completed handler for read, I am using DataContractJsonSerializer to de-serialize downloaded data into List of attendees.  Then I am adding them to the items collection, which in turn is exposed to UI as following:

                <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                                <TextBlock Text="{Binding FirstName}" TextWrapping="Wrap" 
                                          Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding LastName}" TextWrapping="Wrap" 
                                          Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Next, Let’s look at the Create (Insert) method, as it demonstrates how to post data to the service.

        public void OnSaveAttendee(object parameter)
        {
            string json = null;
            WebClient client = new WebClient();
            client.Headers["Content-Type"] = "application/json";
 
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Attendee));
            using (MemoryStream stream = new MemoryStream())
            {
                serializer.WriteObject(stream, CurrentAttendee);
                stream.Flush();
                json = Encoding.UTF8.GetString(stream.ToArray(), 0, (int)stream.Length);
 
            }
            client.UploadStringCompleted += new UploadStringCompletedEventHandler(client_UploadStringCompleted);
            client.UploadStringAsync(new Uri("http://localhost/WcfRestService/JSONDataService/Attendee/Create"), "POST", json);
        }
 
        void client_UploadStringCompleted(object sender, UploadStringCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                MessageBox.Show("OK");
            }
            else
            {
                MessageBox.Show(e.Error.Message);
            }
 
        }

Now, I am reversing the order of operations.  I am serializing Attendee instance to Json, then using UTF8 encoding to convert the data to a string.  One important part to remember is to set content type on the request to JSON, otherwise you will get 404 Not Found.  In completed handler I am just checking for errors.  Again, I will end up eventually in my service’s Create method based on URI Template.

You can download entire solution here.  You will also notice that even though my classes on the client, such as Attendee:

using System.Collections.Generic;
using System.ComponentModel;
 
namespace VSLiveData.EF
{
    public class Attendee : INotifyPropertyChanged
    {
        public int AttendeeID { get; set; }
 
        public string FirstName { get; set; }
 
        public string LastName { get; set; }
 
        public string Notes { get; set; }
 
        public virtual ICollection<Session> Sessions { get; set; }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void NotifyPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (null != handler)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

I am not calling NotifyPropertyChanged anywhere.  This is because I am using NotifyPropertyChangedWeaver, which is awesome!

Thanks.

I am starting a short series of blog posts that will go over various techniques of working with data on Windows Phone 7.  I am going to create a Silverlight application for the phone that gets local and remote data in a number of ways.

I this first post I will build a WCF service and connect to it from phone application.  I am going to use Entity Framework Code Frist approach to expose the data through my WCF Service.

Let’s get started.

Step 1

I am going to create new phone application.  Start Visual Studio 2010 and create new project.  Select a project template for Windows Phone Pivot Application.

Now, I forget about pre-generated code and create a WCF service.  To do so, add new project to created solution.  To give you a head start, select template for WCF Service Application.

Now, it is time to get Entity Framework code first CTP 5 up and going to create database and access it.  I am going to use NuGet (install it first if you do not have it).  Right click on references in your WCF project and select add Package References.  Choose to search on line and first the CTP 5.

I am installing the package which will download the DLL and add references to my project.  I am also adding a reference to System.ComponentModel.DataAnnotations.

Now I am going to add my EF classes, which are POCO classes.  I am going to go for something simple, so I am creating new single object called Person along with my data context.  Person class is very simple and here is the code for it.

using System;
using System.ComponentModel.DataAnnotations;
using System.Runtime.Serialization;
 
namespace WcfPhoneService
{
    [DataContract]
    public class Person
    {
        [Key]
        [Required]
        [DataMember]
        public Guid PersonID { get; set; }
 
        [MaxLength(30)]
        [Required]
        [DataMember]
        public string FirstName { get; set; }
 
        [MaxLength(30)]
        [Required]
        [DataMember]
        public string LastName { get; set; }
    }
}

There are a couple of points worth noticing.  I am using data annotation attributes to denote the requirement of all my future columns in the table.  I am setting the maximum length as well as the key for the table.  I am also setting the WCF required attributes as I am going to be eventually transferring these classes to/from the phone application.  I also need to create the data context, akin to database that will contain my list of persons.  It inherits from base class in EF CTP 5 and contains the list (set) of persons.  Again. code is pretty simple:

using System.Configuration;
using System.Data.Entity;
using System.Data.Entity.Database;
 
namespace WcfPhoneService
{
    public class PersonContext : DbContext
    {
        public PersonContext()
        {
            //Set initializer to handle model changes
            DbDatabase.SetInitializer<PersonContext>(new PersonContextConfig());
 
            this.Database.Connection.ConnectionString =
                    ConfigurationManager.ConnectionStrings["PersonConnectionString"]
                    .ConnectionString;
        }
 
        /// <summary>
        /// List of persons
        /// </summary>
        public IDbSet<Person> Persons { get; set; }
 
        /// <summary>
        /// Add custom configurations if necessary
        /// </summary>
        /// <param name="modelBuilder">Model builder</param>
        protected override void OnModelCreating(System.Data.Entity.ModelConfiguration.ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);
 
        }
    }
}

You can see an extra class in the constructor called PersonContextConfig.  This class simply controls the default database behavior of the context when the model changes.  I am setting it to recreating of the database in my case.  I also added a couple of rows of data just for the demo by overriding Seed method.

using System.Data.Entity.Database;
using System;
 
namespace WcfPhoneService
{
    public class PersonContextConfig : DropCreateDatabaseIfModelChanges<PersonContext>
    {
        protected override void Seed(PersonContext context)
        {
            base.Seed(context);
            context.Persons.Add(new Person() { PersonID = Guid.NewGuid(), FirstName = "John", LastName = "Doe" });
            context.Persons.Add(new Person() { PersonID = Guid.NewGuid(), FirstName = "Jane", LastName = "Doe" });
            context.SaveChanges();
        }
    }
}

Now, it is time to create my service.  I am going to add just two methods to it – get list of persons and insert a new person.  When project was created, it created default IService1 interface and Service1 implementation.  I am just going to rename both to IPersonService and PersonService respectively.  Then, I am going to implement the two methods above

using System.Collections.Generic;
using System.ServiceModel;
 
namespace WcfPhoneService
{
    [ServiceContract]
    public interface IPersonService
    {
        [OperationContract]
        IEnumerable<Person> GetPeople();
 
        [OperationContract]
        void AddPerson(Person person);
    }
 
 
 
}

using System.Collections.Generic;
using System.Linq;
 
namespace WcfPhoneService
{
 
    public class PersonService : IPersonService
    {
        public IEnumerable<Person> GetPeople()
        {
            using (PersonContext context = new PersonContext())
            {
                return context.Persons.OrderBy(one => one.LastName).ThenBy(one => one.FirstName).ToList();
            }
        }
 
        public void AddPerson(Person person)
        {
            using (PersonContext context = new PersonContext())
            {
                context.Persons.Add(person);
                context.SaveChanges();
            }
        }
    }
}

Pretty simple, right.  Now I am going to switch to my Phone project.  I am going to remove all pre-generated code from all view models first and build the project to make sure it is all good.  Now, it is time to add a service reference to my WCF project.  To do so, right click on references node in phone project and choose add service reference menu item.  Click on Discover button on the service dialog box.  Change namespace to PersonService for consistency.

Click OK and let the studio generate all your code for you.  To see generated code, click on PersonService reference under service references, then click on Show All Files on top of Solution explorer window.  You can then drill down to see Reference.cs.  This contains all your generated code.

I am now going to update view model to let it connect to the service and get the list of people.  I have to create an instance of the client (proxy), setup a handler for GetPeople method, then call it.  I also add a property to hold Person collection in.  All fairly simple.  Here is the entire code:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using WindowsPhonePivotAppWithData.PersonService;
 
 
namespace WindowsPhonePivotAppWithData
{
    public class MainViewModel : INotifyPropertyChanged
    {
        PersonService.PersonServiceClient client = new PersonService.PersonServiceClient();
        public MainViewModel()
        {
 
        }
 
        private ObservableCollection<Person> people;
 
        public ObservableCollection<Person> People
        {
            get { return people; }
            private set { people = value; NotifyPropertyChanged("People"); }
        }
 
        public void LoadData()
        {
            client.GetPeopleCompleted += client_GetPeopleCompleted;
            client.GetPeopleAsync();
        }
 
        void client_GetPeopleCompleted(object sender, PersonService.GetPeopleCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                MessageBox.Show(e.Error.ToString());
            }
            else
            {
                People = e.Result;
            }
        }
 
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (null != handler)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

The last part is to modify the MainPage.xaml and update item template to point to the properties that belong to person class, namely last name and first name.

        <controls:Pivot Title="MY APPLICATION">
            <!–Pivot item one–>
            <controls:PivotItem Header="first">
                <!–Double line list with text wrapping–>
                <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" 
                        ItemsSource="{Binding People}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                          <StackPanel Margin="0,0,0,17" Width="432">
                              <TextBlock 
                                 Text="{Binding FirstName}" 
                                 TextWrapping="Wrap" 
                                 Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                              <TextBlock 
                                 Text="{Binding LastName}" 
                                 TextWrapping="Wrap" 
                                 Margin="12,-6,12,0" 
                                 Style="{StaticResource PhoneTextSubtleStyle}"/>
                          </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PivotItem>

Now we will just call LoadData from the code behind of MainPage.  This is just a temporary fix, ordinarily I would have the view / view model hook up elsewhere.

    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
 
            DataContext = App.ViewModel;
            App.ViewModel.LoadData();
        }
    }

That was the last part.  Now we can run the phone application in the emulator.  And we should be able to see the list of two people that were inserted in Seed() method above.

To summarize, we just consumed WCF service from the phone.  To call the same from a deployed application, we will need to change the address in ServiceReference.ClientConfig file.  That is it.

The other part I would like to try is to insert a new person.  I am going to add a button to the second pivot item and call the insert method.  I am going to just use code behind, but you can look at my past posts on how do use MVVM Light to wire up commands.

            <controls:PivotItem Header="second"> 
                <Grid>
                    <Button 
                       Content="Insert Person" 
                       Click="Button_Click" 
                       Width="200" 
                       Height="100"/>
                </Grid>
            </controls:PivotItem>

Here is the code in the view model that I need to add:

        public void InsertPerson()
        {
            client.AddPersonAsync(new Person() 
            { PersonID = Guid.NewGuid(), FirstName = "John", LastName = "Johnson" });
        }

Here is the final code for my view model:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using WindowsPhonePivotAppWithData.PersonService;
 
 
namespace WindowsPhonePivotAppWithData
{
    public class MainViewModel : INotifyPropertyChanged
    {
        PersonService.PersonServiceClient client;
        public MainViewModel()
        {
            client = new PersonService.PersonServiceClient();
            client.AddPersonCompleted += client_AddPersonCompleted;
            client.GetPeopleCompleted += client_GetPeopleCompleted;
        }
 
        private ObservableCollection<Person> people;
 
        public ObservableCollection<Person> People
        {
            get { return people; }
            private set { people = value; NotifyPropertyChanged("People"); }
        }
 
        public void LoadData()
        {
 
            client.GetPeopleAsync();
        }
 
        void client_GetPeopleCompleted(object sender, PersonService.GetPeopleCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                MessageBox.Show(e.Error.ToString());
            }
            else
            {
                People = e.Result;
            }
        }
 
        public void InsertPerson()
        {
            client.AddPersonAsync(new Person() 
            { PersonID = Guid.NewGuid(), FirstName = "John", LastName = "Johnson" });
        }
 
        void client_AddPersonCompleted(object sender, AsyncCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                MessageBox.Show(e.Error.ToString());
            }
            else
            {
                MessageBox.Show("Succecss adding person");
                client.GetPeopleAsync();
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (null != handler)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

And that is all there is to it.  We created a WCF service and consumed it from Windows phone application.  I used Entity Framework code first to create classes and I used the same classed as data contract for my service.  In the next post of this short series I will work on consuming a custom OData service.