Step by Step working with Windows Azure Mobile Service Data in JavaScript based Windows Store Apps

In my last post I discussed Step by Step working with Windows Azure Mobile Service Data in XAML based Windows Store Apps . In this post we will have a look on working with JavaScript based Windows Store Apps. Last post was divided in two parts. First part was Configure Windows Azure Mobile Service in Portal. You need to follow step 1 from last step to configure Windows Azure Mobile Service Data. To work with this proceed as given in following steps,

  1. Configure Windows Azure Mobile Service in Portal. For reference follow Step 1 of this Blog
  2. Download Windows Azure SDK and install.

Now follow post to work with Windows Azure Mobile Service Data from JavaScript based Windows Store Application.

Create Windows Store Application in JavaScript

Create Blank App from creating Blank App template from JavaScript Windows Store App project tab.

image

After creating project add Windows Azure Mobile Services JavaScript Client reference in project.

image

After adding reference let us go ahead and design app page to add a blogger in table. We are going to put two text boxes and one button. On click event of the button blogger will be inserted as row in data table of Windows Azure Mobile Services.


<body>

 <h2>Adding Record to Windows Azure Mobile Service Data</h2> <br />
 Name : <input id="txtname" type="text" /> <br />
 Technology : <input id="txttechnology" type="text" /> <br /> <br />
 <button id="btnInsert" >Insert Blogger</button>

</body>

Application will look like following,

image

We need to add reference of Windows Azure Mobile Service on HTML as following


<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
 <script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>

Next let us create client for Windows Azure Mobile Service. To create this you need to pass application URL and application Key. Client in JavaScript based application can be created as following


args.setPromise(WinJS.UI.processAll());
 var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
 "https://appurl",
 "appkey"
 );

Now let us create a proxy table. Proxy table can be created as following and after creating proxy table we can add record in table as following


var bloggerTable = client.getTable('techbloggers');

var insertBloggers = function (bloggeritem) {

bloggerTable.insert(bloggeritem).done(function (item) {
 //Item Added
 });

On click event of button we need to call insertBloggers javascript function.

btnInsert.addEventListener("click", function () {
 insertBloggers({
 name: txtname.value,
 technology: txttechnology.value
 });
 });

On click event of button you should able to insert blogger in Windows Azure Mobile Service Data table. In further post we will learn to perform update, delete and fetch data. I hope you find this post useful. Thanks for reading.

About these ads

2 thoughts on “Step by Step working with Windows Azure Mobile Service Data in JavaScript based Windows Store Apps

  1. Pingback: Dew Drop – April 5, 2013 (#1,521) | Alvin Ashcraft's Morning Dew

  2. Pingback: Presented on Backend as a Service in Pune DevCon 2013 | debug mode......

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s