Step-by-Step Working With Windows Azure Mobile Service Data in XAML Based Windows Store Apps

In this article we will have a look at working with Windows Azure Mobile Service in a XAML based Windows Store Application. We will use a step-by-step approach to learn how good the Windows Azure Mobile Service is. In the first part of this article we will configure a Windows Azure Mobile Service in an Azure portal. In the second part of this article we will create a simple XAML based Windows Store application to insert records in a data table. This is the first article of this series and in further articles we will learn other features of Windows Azure Mobile Services.

Configure the Windows Azure Mobile Service on the Portal

Step 1

Login to Windows Azure Management Portal here.

Step 2

Select Mobile Services from the tabs in the left and click on "CREATE A NEW MOBILE SERVICE".



Step 3

In this step provide the URL of the mobile service. You have two choices, either create a mobile service in the existing database or in a new database. Let us go ahead and create a new database. In the DATABSE drop down select the option "Create New SQL database instance". Select "SUBSCRIPTION" and "REGION" from the drop down as well.



Step 4

On the next screen you need to create the database. Choose either an existing database server or create a new one. You need to provide the credentials to connect with the database servers.



Step 5

After successful creation of the mobile services you need to select the platform. Let us go ahead and choose Windows Store as the platform.



Step 6

After selecting the platform click on Data in the menu. After selecting Data click on "ADD A TABLE".


Next you need to provide a table name. You can provide permissions on the table. There are three options available:

1. Anybody with Application Key
2. Only Authenticated Users
3. Only Scripts and Admins

Let us leave the default permission level for the table.



Step 7

Next click on "tables". You will be navigated to the table dashboard. When you click on "Columns" you will find one default column id created. This column is created automatically. This column must be there in the Windows Azure Mobile Service table.



On enabling of the dynamic schema, when you add JSON objects from the client application the columns will be added dynamically.

Create Windows Store Application in XAML

Very first you need to install the Windows Azure SDK for Windows Phone and Windows 8.



After installation, create a Windows Store Application by choosing Blank App template.



After creating the application, add a reference of the Windows Azure Mobile Services Managed Client to the project.



Before proceediing to create the Windows Store App, let us return to the portal and manage the App URL and key. You need the key and application URL to work with Windows Azure Mobile Services from the Windows Store application. You will find the key and application URL at the portal.



Now go ahead and add the following namespaces in MainPage.xaml.cs:

using Microsoft.WindowsAzure.MobileServices;
using System.Runtime.Serialization;

Next you need to create an entity class representing the table from the Windows Azure Mobile Service. Let us create an entity class as in the following. We are creating the entity class TechBloggers.

public class TechBloggers

    {

        public int id { get; set; }

        [DataMember(Name="name")]

        public string Name { get; set; }

        [DataMember(Name = "technology")]

        public string Technology { get; set; }

 

    }

After creating the entity class go ahead and create global variables.

MobileServiceClient client;   
IMobileServiceTable<TechBloggers> bloggerstable;

Once the global variables are defined, in the constructor of the page you need to create an instance of MobileServiceClient and MobileServiceTable. Let us go ahead and create that in the constructor of the page.

public MainPage()

        {

            this.InitializeComponent();

            MobileServiceClient client = new MobileServiceClient("https://youappurl", "appkey");

            bloggerstable = client.GetTable<TechBloggers>();

      

 }

Now let us go back and design the app page. In XAML let us put two textboxes and one button. On the click event of the button we will insert bloggers into the table.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />           

        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="40,40,0,0">

            <TextBlock Text="Name" FontSize="40" />

            <TextBox x:Name="txtName" VerticalAlignment="Top" Width="400" />

        </StackPanel>

        <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="40,40,0,0">

            <TextBlock Text="Technology" FontSize="40" />

            <TextBox x:Name="txtTechnology" VerticalAlignment="Top" Width="400" />

        </StackPanel>

      

            <Button Grid.Row="2" x:Name="btnInsert" Click="btnInsert_Click_1" Content="Insert Record" Height="72" Width="233" Margin="248,42,0,-14" />

       

    </Grid>

The application will look as shown in the following image. I know this is not the best UI. Anyway, creation of the best UI is not the purpose of this article.




On the click event of the button we can insert a record into the table using Windows Azure Mobile Services using the following code:
 

private void btnInsert_Click_1(object sender, RoutedEventArgs e)

        {

 

            TechBloggers itemtoinsert = new TechBloggers

            {

                Name = txtName.Text,

                Technology = txtTechnology.Text

            };

 

            InserItem(itemtoinsert);

 

        }
 

The "InsertItem" function is written as in the following:

         private async void InserItem(TechBloggers itemtoinsert)

        {

 

            await bloggerstable.InsertAsync(itemtoinsert);

           

        }

On the click event of the button you can insert records into the Windows Azure Mobile Service data table. To verify that the records were inserted, browse to the portal and click on the table.



In future articles we will learn about updating, deleting and viewing records. I hope you find this article useful. Thanks for reading.