We have seen already how can we consume the Azure mobile service with C#, let’s now look at how can we do the same in JavaScript.
We begin the example by creating a new Windows Store JavaScript Application, and importing the “WindowsAzure.MobileServices.WinJs” package, from package manager. Once the package is successfully imported, it will add some JavaScript libraries in the “JS” folder, as you can see in the image below.
Drag drop “MobileService.js” in default.html page. Here is the html of the default.html.
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" />
5: <title>NeeleshCloudAppJavaScript</title> 6: 7: <!-- WinJS references --> 8: <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
9: <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
10: <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
11: <script src="js/MobileServices.js"></script>
12: <!-- NeeleshCloudAppJavaScript references --> 13: <link href="/css/default.css" rel="stylesheet" />
14: <script src="/js/default.js"></script>
15: </head> 16: <body> 17: <input type="text" id="userComment" />
18: <button id="btnSave">Save Data</button>
19: <p id="content"></p>
20: </body> 21: </html>In body, we have a textbox, a button and a paragraph tag to show data. Whatever text the user enter, will be sent to azure service to perform save operation in the database. In the default.js file, here is the descriptive code of the button click.
Where “comment” is the prototype in our code and “Comment” is the name of the table. Here is the entire code of the default.js file.
1: // For an introduction to the Blank template, see the following documentation:
2: // http://go.microsoft.com/fwlink/?LinkId=232509
3: (function () {
4: "use strict";
5: 6: WinJS.Binding.optimizeBindingReferences = true;
7: 8: var app = WinJS.Application;
9: var activation = Windows.ApplicationModel.Activation;
10: 11: app.onactivated = function (args) {
12: if (args.detail.kind === activation.ActivationKind.launch) {
13: if (args.detail.previousExecutionState !==
14: activation.ApplicationExecutionState.terminated) { 15: btnSave.addEventListener('click', saveData, false);
16: } else {
17: // TODO: This application has been reactivated from suspension.
18: // Restore application state here.
19: } 20: args.setPromise(WinJS.UI.processAll()); 21: } 22: }; 23: 24: app.oncheckpoint = function (args) {
25: // TODO: This application is about to be suspended. Save any state
26: // that needs to persist across suspensions here. You might use the
27: // WinJS.Application.sessionState object, which is automatically
28: // saved and restored across suspension. If you need to complete an
29: // asynchronous operation before your application is suspended, call
30: // args.setPromise().
31: }; 32: 33: function saveData() {
34: 35: try {
36: var client =
37: new WindowsAzure.MobileServiceClient
38: ("https://neeleshservice.azure-mobile.net/",
39: "<app key>");
40: 41: var table = client.getTable('Comment');
42: 43: var newComment = new comment();
44: newComment.usercomment = userComment.value; 45: 46: table.insert(newComment).done(function (item) {
47: content.innerText = item.id + " " + item.usercomment;
48: }); 49: } catch (e) {
50: 51: } 52: 53: } 54: 55: var comment = function () {
56: this.id;
57: this.usercomment;
58: } 59: 60: app.start(); 61: })();This is how the UI of the application looks like.
So, above example describing a simple process of consuming Azure Mobile Service in JavaScript.
Happy Reading!!
Posts
0 comments