Universal Windows Platform - Azure Mobile Service

Rahat Yasir

9 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam10y ago
good show
Ammar Shaukat10y ago
this is older one. mean older Azure portal . can you provide with the newer one
- Rahat Yasir10y ago
  Yes sure, This article published in last December, thats why we had to use old portal. Will post a new article on the new design. Thanks :)
Asfend Yar10y ago
nice
Kumaresh Rajalingam10y ago
Nice Share
Shyamal Pandya10y ago
An exception of type 'Microsoft.WindowsAzure.MobileServices.MobileServiceInvalidOperationException' occurred in mscorlib.ni.dll but was not handled in user code Additional information: Error: Table 'Item' does not exist.
Shyamal Pandya10y ago
Hey, What is wrong here? Did anyone follow this example? Seems it goes with JavaScript as backend. Please confirm.
Sibeesh Venu10y ago
Nice Share
Raja T10y ago
Nice, Thanks for sharing

Microsoft Azure Mobile Service gives you the power to create a cloud service mobile application. This will make your work more flexible and gives your application more portability in an efficient way. This is a short introduction of Azure Mobile service. You will get to know, how to create and integrate new mobile service in your new or existing application. So let’s get crack in Azure Mobile Service with Universal Windows Platform.

Create a New Mobile Service

Firstly, go to your azure portal. The select the Mobile Service option and click plus new icon in the bottom of the page.

new
Figure 1: Create a new Mobile Service

After creating the Mobile Service, open the Mobile Service and select the dropdown option “CONNECT AN EXISTING WINDOWS OR WINDOWS PHONE APP” below the GET STARTED option.

start
Figure 2: Connection Uri of Mobile Service.

Now, copy the code and paste it in the App.xaml.cs file of your application. You will get the additional instruction right above the code.

Now create a new class named “Item”, which will make all the necessary tables of your Mobile Service.

classItem
{
[JsonProperty(PropertyName = "id")]
publicstring Id
{
get;
set;
}
[JsonProperty(PropertyName = "message")]
publicstring Message
{
get;
set;
}
[JsonProperty(PropertyName = "location")]
publicstring Location
{
get;
set;
}
[JsonProperty(PropertyName = "Date")]
publicDateTime Date
{
get;
set;
}
}

Listing: 1

Here we’ve created three attribute or you can say fieldsID, Message, Location and Date. For JsonProperty attribute, you need to install Newtonsoft.JsonNuGet package manager. Now, to insert, update and delete the data in your SQL table, we’ve to write little bit of code in .cs files.

Now, design the MainPage.xaml. We need a ListBox to display the data from our Mobile Service table. As there are multiple attributes and columns, here we’re showing only Message, Location and Date values.

<ScrollViewer>
<StackPanel Margin="10,10,0,0">
<ListBoxx:Name="listBox" Margin="10,10" RequestedTheme="Dark" FontSize="20" Background="White" Foreground="Black" BorderThickness="1" BorderBrush="Transparent">
<ListBox.ItemContainerStyle>
<StyleTargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<BorderBorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
<StackPanel>
<TextBlock Foreground="Black" Text="{Binding Message}" />
<TextBlock Foreground="Black" Text="{Binding Location}" />
<TextBlock Foreground="Black" Text="{Binding Date}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
Listing: 2 Put the code below in MainPage.cs above the constructor. ///
<summary>
/// Mobile Service ///
</summary>
privateMobileServiceCollection
<Item, Item> items; privateIMobileServiceTable
<Item>itemTable = App.MobileService.GetTable
<Item>(); Listing: 3 Now in constructor initialize MainPage_Loaded method and implement like below. publicMainPage() { this.InitializeComponent(); this.Loaded += MainPage_Loaded; } asyncvoidMainPage_Loaded(object sender, RoutedEventArgs e) { items = awaititemTable.ToCollectionAsync(); this.listBox.ItemsSource = items; }

Listing: 4

Here, ‘listbox’ is the name of out ListBox control. So, we set item source as ‘items’, which set to Mobile Service tables values.

If you run the application, it will show all the data in the ListBox control.

jam

Closure

Hopefully, you have understood the basics of Microsoft Windows Azure Mobile service and the implementation in Universal Windows Platform Application. This is only the basic, you can get deep knowledge by reading the documentation of Mobile Service and visit the Azure website to get the latest information about Mobile Service.