Consuming Azure Mobile Services with Windows Store Application

In the previous post we’ve seen how to create an Azure Mobile Service. In this post we get a bit further and see how can we use with a Windows Store Application. In the Azure Mobile Service Portal click on your service, select windows store and choose “Connect an existing windows store App” option.

I would have proceed the demo by creating the store application in JavaScript, but because of huge readers demand, I am taking this example further in C#. We will have another post for JavaScript guys out there.

So, from the dropdown choose the language as “C#”.

The example tells you your service’s URL and app key. We require both in order to connect with our service.
Now create a blank windows 8 store application. Install the Nuget package “WindowsAzure.MobileServices” for using the MobileService. Once the package is installed, copy the above mobile service declaration in the main page.

I have a text box and a button in the UI. Textbox will take a string from the user, and on the button click it will insert the data in the Comment table.

We need to create a class Comment (same name as that of the table in the Mobile service DB), also we need to keep the properties in the class same as that in the table, so as to allow map of class with the table perfectly. Here’s the code of my main page.

   1: namespace NeeleshCloudService

   2: {

3:

   4:     public sealed partial class MainPage : Page

   5:     {

   6:         public static MobileServiceClient MobileService =

   7:                 new MobileServiceClient("https://neeleshservice.azure-mobile.net/",

   8:                                             "<your app key>");

9:

  10:         public MainPage()

  11:         {

  12:             this.InitializeComponent();

  13:         }

14:

  15:         private async void Button_Click_1(object sender, RoutedEventArgs e)

  16:         {

  17:             await MobileService.GetTable<Comment>().InsertAsync(new Comment()

  18:                             { usercomment = UserCommentText.Text }); ;

  19:         }

  20:     }

21:

  22:     public class Comment

  23:     {

  24:         public string id { get; set; }

  25:         public string usercomment { get; set; }

  26:     }

  27: }

On button click, we first get the table which maps with our class Comment, and insert a new item of type Comment in it. This is an Asynchronous operation, actually it have to be an asynchronous operation as communicating with the service may cause a lag, and blocking UI for the time being, is not a good idea.

Run the application, type in the Text and click the button. Your text is inserted. Now navigate to the table in the Azure portal, when you browse the data of the table, you can see your inserted text.