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,
- Configure Windows Azure Mobile Service in Portal. For reference follow Step 1 of this Blog
- 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.
After creating project add Windows Azure Mobile Services JavaScript Client reference in project.
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,
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.
Dhananjay Kumar 
Leave a comment