Share via

Build Windows Phone Apps using Windows Azure Mobile Services from Ground Up

  • Article

Windows Phone 8 works really well with Window Azure Mobile Services. Windows Azure portal gives us the startup apps, however you can also build from ground up. Here it is,

Let’s say you have created a Windows Azure Mobile Service

image

image

Once it is ready

image

Grab the URL and Key. After that create a blank Windows Phone 8 Apps.

image

Then add the Windows Azure Mobile Services from https://nuget.org. Run the below command in Library Package Manager Console 

image

This will install these below assemblies

image

After that in App.xaml.cs add this line

 

 public static MobileServiceClient MobileService = 

    new MobileServiceClient("https://wpmobile.azure-mobile.net/", "jjj.....");

Create a blank table in Windows Azure Mobile Services called “Employee”

image

image

Then add the entity called “Employee”

 //The Model Class

public class Employee

{

    public int Id { get; set; }

    public string FullName { get; set; }

}

To add a new Employee

 private void SaveData(Employee emp)

{

    App.MobileService.GetTable<Employee>().InsertAsync(emp);

}

This will add a new column called FullName because the dynamic schema is ON by default.

Similarly we can read the data

 var emps = await App.MobileService.GetTable<Employee>().ReadAsync();

This clearly a simple approach. Adding the XAML and complete C# to run the code

XAML

 <!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Grid.RowDefinitions>

        <RowDefinition Height="*"></RowDefinition>

        <RowDefinition Height="Auto"></RowDefinition>

    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0">

        <TextBox x:Name="txtName"></TextBox>

        <Button x:Name="btnSave" Content="Save" Click="btnSave_Click"></Button>

        <Button x:Name="btnLoad" Content="Load Data" Click="btnLoad_Click"></Button>

    </StackPanel>

            

    <ListBox x:Name="lstData" Grid.Row="1" VerticalAlignment="Top">

        <ListBox.ItemTemplate>

            <DataTemplate>

                <TextBlock FontSize="30" Text="{Binding Path=FullName}"></TextBlock>

            </DataTemplate>

        </ListBox.ItemTemplate>

    </ListBox>

</Grid>

Complete C#

 //The Model Class

public class Employee

{

    public int Id { get; set; }

    public string FullName { get; set; }

}

public partial class MainPage : PhoneApplicationPage

{

    public MainPage()

    {

        InitializeComponent();

    }

    private void btnSave_Click(object sender, RoutedEventArgs e)

    {

        Employee emp = new Employee() { FullName = txtName.Text };

        SaveData(emp);

        ShowData();

    }

    //Add data

    private void SaveData(Employee emp)

    {

        App.MobileService.GetTable<Employee>().InsertAsync(emp);

    }

    private void btnLoad_Click(object sender, RoutedEventArgs e)

    {

        ShowData();

    }

    //Read the data

    private async void ShowData()

    {

        var emps = await App.MobileService.GetTable<Employee>().ReadAsync();

        lstData.ItemsSource = emps;

    }        

}

Namoskar!!!

Comments

  • Anonymous
    October 05, 2013
    Khoob Bhalo! Wriju, well try for my apps :)

  • Anonymous
    October 14, 2013
    @Anil - you are most welcome :)