Dhananjay Kumar

In this post we will take a look on working with Windows Azure Mobile Service in XAML based Windows Store Application. We will follow step by step approach to learn goodness of Windows Azure Mobile Service. In first part of post we will configure Windows Azure Mobile Service in Azure portal. In second part of post we will create a simple XAML based Windows Store application to insert records in data table. This is first post of this series and in further posts we will learn other features of Windows Azure Mobile Services.

Configure Windows Azure Mobile Service on Portal

Step 1

Login to Windows Azure Management Portal here

Step 2

Select Mobile Services from tabs in left and click on CREATE NEW MOBILE SERVICE

Step 3

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

Step 4

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

Step 5

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

Step 6

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

Next you need to provide Table name. You can provide permission on table. There are three options available

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

Let us leave default permission level for the table.

Step 7

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

On enabling of dynamic schema when you will add JSON objects from client application then columns will get added dynamically.

Create Windows Store Application in XAML

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

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

Before we move ahead to create Windows Store App let us go back to portal and mange App URL and key. You need key and application URL to work with Windows Azure Mobile Services from Windows Store application. You will find key and application URL at the portal.

Now go ahead and add following namespaces on MainPage.xaml.cs

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

Next you need to create entity class representing table from the Windows Azure Mobile Service. Let us create entity class as following. We are creating 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 entity class go ahead and global variables.

MobileServiceClient client;
 IMobileServiceTable<TechBloggers> bloggerstable;

Once global variable is defined in the constructor of page you need to create instance of MobileServiceClient and MobileServiceTable. Let us go ahead and create that in 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 app page. On XAML let us put two textboxes and one button. On click event of button we will insert bloggers in 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>

Application will look like as given in below image. I know this is not best UI. Any way creating best UI is not purpose of this post

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

private void btnInsert_Click_1(object sender, RoutedEventArgs e)
 {

TechBloggers itemtoinsert = new TechBloggers
 {
 Name = txtName.Text,
 Technology = txtTechnology.Text
 };

InserItem(itemtoinsert);

}

InsertItem function is written like following,

private async void InserItem(TechBloggers itemtoinsert)
 {

await bloggerstable.InsertAsync(itemtoinsert);

 }

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

In further posts we will learn update, delete and view of the records. I hope you find this post useful. Thanks for reading.