Create a Multi-Table, .Net Backend Azure Mobile Services Driven Windows Phone App

Introduction

There have been some great articles out there on how to get started with the recently launched Windows Azure Mobile Services with .Net backend. However, I was not able to find one that has a detailed step-by-step guide for a project that has more than one table (Most of the apps do require more than one "ToDo" table in real life.

There are the following 30 steps:

• Create a .Net based Windows Azure Mobile Service project in the portal.
  
  Get Stated with Mobile Services
   
• Download and open it using Visual Studio 2013 Update 2.
  
  Note: You must have Visual Studio 2013 Update 2 installed to be able to work with .Net based Mobile Services.
   
• Build and run the service project to ensure all is fine.
   
• Configure the app to work locally. This requires that the WP8 emulator is an accessible and locally deployed service.
  
  Configure IIS Express In Mobile Services
  
  Note: Use Visual Studio in Admin Mode. Make sure you have DHCP enabled and your emulator can connect to the internet.
   
• Test the Sample-ToDo App with a locally deployed service in IIS Express.
   
• If all is fine then let's move to the next steps to add a new table.
   
• Open Server Explorer, expand “MS_TableConnectionString”-> Tables to find the ToDoItem Table and MigrationHistory Table.
   
• Delete both of these tables. 
  
  Note: This is a requirement if we need to update the Model, else updating the model in code will not have any effect on generated tables. So in order to be able to modify the tables we need to either delete the existing tables or use EF Code First Migrations. In this article we will just use the easy approach and delete them.
   
• Create a new class called User Item in the “DataObjects” folder of the service project.
   
• Make sure the class inherits from EntityData, this is required to generate Mobile Service Controllers for the user item model. If you are following along, this is how the model should look:
  
   
  
  
• The User Item table will work as a parent entity for us with the TodoItem entity as the child, so each user can have many todo items.
   
• Next, let's update the ToDoItem table to be the child of the UserItem table.
   
• For this we need to modify the ToDoItem table to have two more properties as highlighted in the screenshot below. This is required so the Model generated by the EF Code first approach will have the foreign key relationships since we expect them to be:
  
  
   
• This is all we need to update the models. Next, we need to update the WP8 project code to enter new users and add to do items for them.
   
• Add a new screen to your WP8 project called “UserRegistration.xaml”.
   
• The following is how the UI looks and the XAML to create the UI:
  
  
  
  
   
• Next we need some code to enter new users and to pull back a list of users and show them in the UI.
   
• For this we need a UserItem class in our client project.
   
• Add a new UserItem class anywhere in the client project.
  
  
  
  Note: Notice this client-side class has an Id field.
   
• The following is the rest of the code, this is pretty similar to the MainPage.xaml.cs code that comes along with the sample code.
  
  
  
  
   
• Basically, we are just adding a new user and refreshing the list of users.
   
• Next, we need to be able to select one of the users and retain its objects in memory to be used later while creating a new To-Do Item for this, selected, user.
   
• As you see, our list has a Selection Changed event, the following is the code that goes in it:
  
  
  
  All we are doing here is maintaining the selected User Object in a global static class, nothing fancy.
   
•  Next, add a new button to the UI of this page to be able to Navigate to MainPage.xaml. I am skipping how to do this part.
   
• We also need to set the User Registration page as the startup page of our app. Ths can be fixed from double-clicking on "Properties" then selecting "WMAppManifest.xml" and editing its Navigation Page property as in the following:
  
  
   
• We are almost there, all we need to do now is to modify the MainPage.xaml.cs code a bit to be able to hook the Id of the selected user to a new todo item we are creating.
   
• The following screenshot shows how to do that. First we need to modify the client-side to-do item class to have the same modifications we did in the service part as in the following:
  
  
  
  Next update the code that is creating the ToDo Item as in the following:
  
  
   
• That's all, we are done and good to go. Hit F5 and fire up the emulator then add a few users on the first screen. You should also see the list of users you just added. Select one of them and navigate to the main page and create a new ToDo Item
   
• This will now save the todo items for the user in the Database. You can create a new page to see the User specific ToDo Items list or verify the data in the database in the Server Explorer by right-clicking on the table name and selecting “Show Table Data”.