In my last article I discussed Step-by-Step working with Windows Azure Mobile Service Data in XAML based Windows Store Apps. In this article we will have a look at working with JavaScript based Windows Store Apps. The previous article was divided into two parts. The first part was Configure Windows Azure Mobile Service in Portal. You need to follow Step 1 from the last step to configure the Windows Azure Mobile Service Data. To work with this proceed as in the following procedure.
- Configure Windows Azure Mobile Service in the Portal. For reference follow Step 1 of this Blog
- Download the Windows Azure SDK and install.
Now follow this article to work with Windows Azure Mobile Service Data from the JavaScript based Windows Store Application.
Create Windows Store Application in JavaScript
Create a Blank App from the Blank App template from the JavaScript Windows Store App project tab.
![Blank-App-template-from-JavaScript-Windows-Store-App.jpg]()
After creating the project add Windows Azure Mobile Services JavaScript Client reference to the project.
![Windows-Azure-Mobile-Services-JavaScript-Client.jpg]()
After adding the reference let us go ahead and design the app page to add a blogger in table. We will use two text boxes and one button. On the click event of the button, the blogger will be inserted as a row in the 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>
The application will look like the following:
![App-Windows-Azure-Mobile-Services-JavaScript-Client.jpg]()
We need to add a reference of the Windows Azure Mobile Service in HTML as in the following:
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
Next let us create a client for the Windows Azure Mobile Service. To create this you need to pass the application URL and application Key. The client in a JavaScript based application can be created as in the following:
args.setPromise(WinJS.UI.processAll());
var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
"https://appurl",
"appkey"
);
Now let us create a proxy table. The proxy table can be created as in the following and after creating the proxy table we can add a record in table as in the following:
var bloggerTable = client.getTable('techbloggers');
var insertBloggers = function (bloggeritem) {
bloggerTable.insert(bloggeritem).done(function (item) {
//Item Added
});
On the click event of the button we need to call the insertBloggers JavaScript function.
btnInsert.addEventListener("click", function () {
insertBloggers({
name: txtname.value,
technology: txttechnology.value
});
});
On the click event of the button you should be able to insert a blogger into the Windows Azure Mobile Service Data table. In a future article we will learn to update, delete and fetch data. I hope you find this article useful. Thanks for reading.