Querying Entities' Properties in Web API OData RESTful with ODataController

In this article we enable the Querying of an Entity's Property in an Web API OData RESTful service with ODataController.
Our task here is to perform OData protocol queries in order to get the value of some Entity's property, the following query for example :
http://localhost:6954/Odata/Notes(10)/Body/$value


When developing an ODataController to create an OData Web API, having configurated the application properly, as in the previous tutorial, you get automatically support for the most common OData protocol's queries. You can then query the OData Web API using $metadata, $value, $select, $top, $skip, $filter and even $expand , to get the JSON response:

http://localhost:6954/OData/$metadata#Notes :

              /Odata/Notes?$filter=From eq 'Fry'

http://localhost:6954/OData/Notes?$skip=2&$top=10

http://localhost:6954/OData/Notes?$select=Body

There are some conventions to follow when developing an ODataController:

1) the controller's name must be the entity name, the root of the resource path:

      /Notes(10)      implies that the Web API will look for a controller named NotesController (case sensitive)

2) the Action name for fetching an Entity's property will be set according to the Entity type and the Property name, as follows:

  /Notes(10)/Body       

      means that the Web API will look for an Action method named GetBodyFromNote()

All this conventions can be found in the Microsoft Asp.Net official site.
Let's say we have an Entity named "Note" with some property called "Body" : we want to call the OData HTTP service with this URI:
      http://localhost:6954/Odata/Notes(10)/Body/

So, according to the OData protocol specification, we need an Action method named GetBodyFromNote(), marked with the attribute "[EnableQuery]" , which returns the required property from the Entity:

(COPY-PASTE THIS CODE) : 


 [EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]
        public string GetBodyFromNote([FromODataUri]int key)
        {
            IEnumerable<Note> data = Repository.GetAll();
            var note = data.Where(n => n.ID == key) .SingleOrDefault();
            return note.Body ;
        }

Build & run the application, and type the URI to fetch the required property in JSON format:

http://localhost:6954/Odata/Notes(10)/Body/

Also, we can request ONLY the $value of the property:

http://localhost:6954/Odata/Notes(10)/Body/$value

That's all

In this post we've seen how we perform Querying Entities' Properties in Web API OData RESTful with ODataController. 

Enjoy programming.....
    By Carmel Shvartzman

כתב: כרמל שוורצמן

Step by step how to send an HTTP DELETE Request to an RESTful WCF Service using Fiddler

In this tutorial we'll learn how to create an HTTP DELETE Request to an RESTful WCF application using Fiddler. 
We'll use Fiddler for testing purposes of a RESTful WCF application, sending  HTTP DELETE requests. We'll start with a WCF application,  and we'll remove an entry using Fiddler, showing as follows :





First of all, we have to download the FREE Fiddler tool from this web site :



Now check the settings of the Operation Contract at the WCF Service Contract, in order to provide exactly what it is expected:

The WebInvoke is set to handle the DELETE HTTP method, and the request format is supposed to be JSON, the same as the response format. So, we'll send what the WCF wants.
Open Fiddler and find the "Composer" option:




Then type in the WCF service URL and select "DELETE" HTTP method from the list. Set the request Headers as follows: (the Content-Length  will be filled by Fiddler for you):

Fill the Request Body, and take care to fill the ID of the record to remove. The rest of fields is just optional.

Press the "EXECUTE" button  to send the request. If you set a breakpoint inside the WCF operation, you'll see the following in action :

As you see, WCF succeeded at identifying inside the JSON the ID to erase.
Then the response is sent to Fiddler, with a "true" value, because everything went fine:

And the database shows the deleted value:

If you want to see the RESTful WCF that we're using here, see this tutorial.

That's all.... 

In this tutorial we've seen how to send an HTTP DELETE Request to an RESTful WCF service using Fiddler. 
Happy programming.....
      By Carmel Shvartzman

כתב: כרמל שוורצמן

How to send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman

In this post we'll learn Step by step how to send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman. 
We'll use Postman to test a RESTful OData Web API application, sending an HTTP DELETE request. We'll use a working OData Web API ODataController  built in a previous tutorial,   and we'll delete a record using  Postman :

In order to get Postman installed ,  go to the Chrome Tools >> Extensions   ,  search for "Postman" and install the App .

HTTP DELETE Request to a RESTful ODataController Web API with Postman

Now let's see how to call the OData Web API to delete an item :   in order to setup  the ODataController , there will be an ODataModelBuilder at the "Register" method called from the Global.asax file : it's important that the EntitySet name MUST be the same name of the Controller   , therefore we'll look for a "NotesController"  at the application :

Because there is a route prefix set ( "ODataV4" ) ,  we'll also append it to the URL : 

At the ODataController ,  we check for the "Delete" action method , since we're sending an HTTP DELETE request :

Why are we checking this ? Because we want to know what is ODataController method expecting : in our case , it expects a URI which must include an integer "key" ID  ( "[FromODataURI]" ) .  

The Port of the application can be extracted from the Web tab at the application properties:

Put all of this together , and you have the URI for the DELETE request : 

"http://localhost:21435/ODataV4/Notes(6)" :

Important : OData is case sensitive : therefore , if you type "notes" instead of "Notes" , you will not obtain any data.

After setting the URI and the DELETE method , write the "Content-Type" header :

Send the request :

The request details can be seen this way :

In the meantime , the ODataController at the RESTful WebAPI have handled the request with the ID in the ODataURI : 

The action method renders a response with code 410 "GONE" , to express that the record has been deleted , and Postman exposes it : 

That's all... 

In this tutorial we've learned how to send an HTTP DELETE Request to a RESTful  ODataController Web API Service using Postman.
Happy programming.....
      By Carmel Shvartzman

כתב: כרמל שוורצמן

jQuery Plugin to serialize an HTML5 Form into a JSON object

jQuery Plugin to serialize an HTML5 Form into JSON

by Carmel Schvartzman - The MVC Club

A custom jQuery Plugin for serializing a Form into a JSON object to send in an HTTP request to the server.

This elegant Plugin is a high performance code to transform the data inside an HTML5 Form , into a JSON object serialized to a string. This string can then be sent inside the body of an HTTP POST, HTTP PUT or HTTP PATCH request, in order to be preserved in some database at server side.

This jQuery plugin can be referenced by an MVC View, and of course can be used by any HTML5 web page.

Requisites:

1) your HTML5 web page has to reference the jQuery framework

2) only the fields that have a "name" attribute will be serialized in a JSON object. All other fields that you don't want to serialize, such as hidden identity fields and anything like that, will be ignored.

The requisites for the Form input fields serialization are according to the www.w3.org Recommendation on web Forms .
This plugin uses jQuery utilities such as the serializeArray method .

This Plugin can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_FormSerializer

Snapshots:

The Form is serialized into the JSON object as follows:

Usage:

This utility jQuery Plugin is used as follows:

The Plugin's code :

All the Form's fields have to have a "name"  :

The Plugin usage is explained in the following Tutorial:

http://themvcclub.blogspot.com/2015/05/custom-jquery-plugin-to-display-form-twitter-bootstrap.html

By Carmel Schvartzman

Enjoy MVC !!!

פיתוח: כרמל שוורצמן

jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

Here we see Step by step How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

In this post we build in 20 minutes a jQuery Mobile App , with a toggle Table , where you can hide or display its columns,  for use on all kind of Mobile devices : iPad, iPhone, Nexus , BlackBerry, Nokia,  Acer ,
The data displayed on this table will be loaded in Json format via Ajax.
This Mobile App will look like this:

How to create jQueryMobile Toggle and Reflow Tables For Android and BlackBerry

For this post of jQuery Mobile , we'll need the  jQuery and jQueryMobile Frameworks, so  enter http://jquerymobile.com/ and jQuery web site , and get the latest versions of the files via CDN  . We  will also use a Mobile Emulator, so please refer to this short tutorial on Ripple Emulator setup.

Also, this basic   "First jQueryMobile App" Tutorial explains the installation of both the frameworks and the emulator in detail.
After you got the references, add them to the Head of the HTML5 file:

First, we'll add a Header with a NavBar , using the data-role="page" and the data-role="header" with a "fixed" attribute to fix it as the user scrolls the screen :

Now we create a "main" div with our table: we use the data-role=table and the data-mode=columntoggle, which allows the user to display/hide the columns. If you don't use "columntoggle", the table will be displayed as "Reflow" mode, meaning that ALL columns are displayed, and in small screens, all data is grouped in chunks corresponding to each row.

Then you define a data-priority directive from 1 (most important field) to 6 (less important column).

If you do not define a data-priority for a column, it will be always displayed:

We also define a button for calling the function that loads the table data.

Finally, we write the markup for a Footer with a Navbar as follows:

The script which loads the data includes a call to the jQuery  $.ajax method, to the URL where a text file contains JSON data for the table.

The HTTP request uses a GET method and, this is really important, we tell the server that we are expecting data in JSON format, meaning that the request's "Accept" header will include "application / json".

We add two callback functions : error and success.

In case of success, we perform a $.each() loop over the JSON data, which is built on key/value pairs, where the Key is the "id" field, and the Value is the Customer object.

For each customer, we append to the Table a Row with a Cell (<td>) per column:

Very important too, we REFRESH the Table after adding the Row, so that the Toggle functionality will include the appended rows.

We customized this Mobile using the following style in a CSS3 file:

And this is how the jQuery Mobile Toggle Table looks like:

Hoping this post was helpful for you...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן

jQueryMobile using Ajax to load Json data to a Table

Here we review Step by step jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

In this article we create in 20 minutes a jQuery Mobile App to load Json data to a toggle Table , where you can hide or display its columns,  via Ajax calls . This App is for use on all kind of Mobile devices : Nexus , iPad, iPhone, BlackBerry, Nokia,  Acer ,  ...
The data will be loaded in Json format via Ajax, in order to be displayed on this table .
This jQuery Mobile App looks like this:

jQueryMobile using  Ajax  to load Json data to a Table For Android and BlackBerry

For this article on jQuery Mobile , we'll be using the  jQuery and jQueryMobile Frameworks, so  browse to http://jquerymobile.com/ and jQuery , and obtain the latest versions of the frameworks via CDN  . If you want to use a Mobile Emulator, please refer to the following short tutorial on the Ripple Emulator.

After you got the files , add them to the Head of the HTML5 file:

First, add a Header with a NavBar , by making use of the data-role="page" and the data-role="header" , adding also a "fixed" attribute to fix the header in its place when the user scrolls the screen :

Create a "main" div element containing our table.  Use the data-role=table and the data-mode=columntoggle directives, which allow to display/hide the columns. However , if you don't write "columntoggle", the table will be shown in "Reflow" mode, then ALL columns will be displayed, and all the data will be grouped in chunks per row.

Inside the table,  define to each field a data-priority directive from 1 (most priority field) to 6 (less important column).

Notice that if you do not set a data-priority for a field, it will always be displayed:

We also write a button to call the function that brings the table data.

Finally, we code the markup for making a Footer with a Navbar :

The javascript which brings the data includes using the jQuery  $.ajax function, sending requests to the URL where is stored a file containing JSON data .

This HTTP GET request  tells the server that the data is expected in JSON format, so that the request's "Accept" header will include "application / json".

In case of successful performance, we do an $.each() loop on the received JSON data in the response, which includes key/value pairs, where the Key is the "id"  , and the Value is the Customer  JSON object.

Then, for each customer, we add to the tbody of the Table a Row with a Cell per column:

Is imperative that you REFRESH the Table after adding the Rows, therefore the table's Toggle functionality will work on the new rows.

We added also some style to this Mobile using the following  CSS3 file:

All the code can be downloaded from the following GitHub repository:

https://github.com/CarmelSoftware/jQueryMobile_Ajax_Json_Table

This is how the jQuery Mobile Toggle Table looks :

We hope that this article was helpful for you...

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן