CRUD Operation in HTML/JavaScript Using Windows Azure Mobile Service

1. Create an Item array for table. Item array used in insert method to insert data into table.
2. Get the table name by using client.getTable("{Table name}") method. This method can verify the name that we as method parameter. If there is not such table name available in the mobile service then client SDK throw the exception.
3. Call insert method by ing item array as a parameters and then call done function. We can on success function and on error function as the parameter of done() function. On success function fire if insert method add item successfully in the table otherwise on Error function fired.
   
4. Update Operation
   

   var table = client.getTable("{Table name}");
   table.where({ Name: "Naren Chejara" }).read().done(

   function (results) {
   if (results[0].Name !== null) {
   table.update({ id: results[0].id, Name: "Naren", Age: results[0].Age, CreatedAt: results[0].CreatedAt }).done(

   function (updatedItem) {
   alert("'" + updatedItem.Name + "' is updated into in " + tableName + " table.");
   },
   function (error) {
   alert("Error Occur during update .." + JSON.stringify(error));
   });
   }
   else {
   alert("Now match found! Please click on the insert button and try again!");
   }

   },
   function (error) {
   alert("Error Occur during Reading data for updation .." + JSON.stringify(error));
   });

   In the code above, our intention is to read the data from the table where the name equals "Naren Chejara" and store that data into in an array variable and do the update operation based on the id column. The id column is an auto increment column in the table; the user can only use the id column for a query. The Mobile service cannot allow the user to do an insert and update operation on the id column. The code above reads the data based on the where query and stores it in the results array. If the where query succeeds then the code above updates the specific column.
   

5. Delete Operation
   

   var table = client.getTable("{Table name}");

   table.where({ Name: "Naren" }).read().done(

   function (results) {
   if (results[0].Name !== null) {
   table.del({ id: results[0].id}).done(

   function (updatedItem) {
   alert("Id = " + results[0].id + " is deleted from " + tableName + " table.");
   },
   function (error) {
   alert("Error Occur during update .." + JSON.stringify(error));
   });
   }
   else {
   alert("Now match found! Please click on the insert button and try again!");
   }
   },
   function (error) {
   alert("Error Occur during Reading data for deletion .." + JSON.stringify(error));
   });

6. Read Operation
   

   var table = client.getTable("{Table name}");

   table.read().done(

   function (results) {
   if (results.length > 0) {
   alert("Total " + results.length + " records are in '" + tableName + "' table");
   }
   else{
   alert("'" + tableName + "' table is empty ...");
   }
   },
   function (error){
   alert("Error Occur during Reading data .." + JSON.stringify(error));
   });

The Mobile Service SDK also contains many other methods that help us in CRUD Operations. The following are some methods that we can use during CRUD operations.

1. select() method : This method reads specific columns from the table.
   
   Usage
   
   client.getTable("table name").where({ Name: "Naren Chejara" }).select("id", "Name").read().done();
   client.getTable("table name").select("id", "Name").read().done();
   
2. orderBy() method: This method sorts a table column in ascending and descending order.
   
   Usage
   
   Ascending order:
   
   client.getTable("table name").where({ Name: "Naren Chejara" }).orderBy("id").read().done()
   client.getTable("table name").orderBy("id").read().done()
   
   Descending order:
   
   client.getTable("table name").where({ Name: "Naren Chejara" }).orderByDescending("id").read().done()
   client.getTable("table name").orderByDescending("id").read().done()
   
3. take() method: This method reads specific top results.
   
   Usage
   
   client.getTable("table name").where({ Name: "Naren Chejara" }).take(2).read().done()
   client.getTable("table name").take(2).read().done()
   
4. skip() method: This method skips specified records and reads other data.
   
   Usage
   
   client.getTable("table name").where({ Name: "Naren Chejara" }).skip(2).take(2).read().done()
   client.getTable("table name").skip(2).take(2).read().done()
   
5. where() method allow us to filter our data like we did in SQL.
   
   Usage
   
   client.getTable("table name").where({ Name: "Naren Chejara", Age:20 }).read().done()
   client.getTable("table name").where(function (){ return this.id > 5 }).read().done()
   Above query return 50 result. All result are > 5. this keyword contains table schema so you can use this keyword like this.id or this.Name
   
6. odata query: Mobile Service SDK can also support the odata query format.
   
   Usage
   
   client.getTable("table name").read("$filter=(id gt 10").done()

How to set up attached application (or your own application) in Windows Azure Portal.

1. Download the attached project from this article.
2. Create a new website in the Windows Azure portal and deploy the downloaded project to your website
3. Create a new mobile service in Windows Azure and create a Person table (My project uses the person table inside the code)
4. Configure your mobile service with your website host name:
   
   1. Open the configure tab in your mobile service
   2. Add your website Host name in the Cross-Origin resource sharing (cors) and click on the save button.
   
5. Open your website URL in any browser
6. If you have deployed the attached project properly in your website then the browser will show the following page:
   
   
   

Add your mobile service URL and mobile service key and use this application in sequence (insert, update, delete and read).

I hope that this article will help you to understand CRUD operations in HTML/JavaScript applications using Mobile Service. Thanks for reading