DevDiary

ASP.NET, MVC, jQuery, Ajax + Knockout

RESTful Web API and SPA

This example is from "Pro ASP.NET MVC 5" by Adam Freeman (It is the last example in the book).

Initially you build the SPA with an MVC controller and pass objects to a view to be rendered. Once the app is built, you add an api controller and install a few packages (bootstrap, jQuery and Knockout) and you shift the complextity from the MVC controller to the API controller.

Finally Knockout and jQuery are used to obtain data via AJAX which is binded to the HTML elements.

Model: ShoppingList

Model: ShoppingList

This is the model for the SPA.

There is a property for "Id".

There is a property for "Product Name".

There is a property for "Quantity".

The screenshots below show the shopping repository class.

It is not best practice and I may update this in the near future. Right now, I'm focusing on the details of the API.

Shopping Repo: Initial Data

Shopping Repo: Data Access Methods

MVC Controller: "Home"

Shared "_Layout" View

Index View (.../Home/Index)

Partial View ("_Summary")

Partial View ("_Editor")

Rendered HTML (.../Home/Index)

Web Controller (API)

Chrome Recieves XML (.../api/web)

Chrome Recieves XML (.../api/web/2)

API => JSON/XML

Http Request => MVC => HTML (usually)

Http Request => API => JSON/XML

Entering ".../api/web" into the URL, triggers the API Web controller. It doesn't pass a parameter so the controller selects the "GetFullList" method because it is the only "HttpGet" method in the controller that doesn't take in a parameter.

In Google Chrome, the response from the API controller is recieved as XML.

In this example, (...api/web/2) the integer "2" is passed to the controller. The "GetRecord" method is triggered and the data for the record with "id = 2", gets sent to the client.

WebApiConfig.cs

Global.asax.cs

var model = ...

Defining the Model

This code defines the model

The shoppingList parameter will hold the data retrieved from the server.

Editor is for when the user enters some values for a new record.

Display Summary can be turn on or off. When the use clicks on "Create" the summary disappears until the new record is posted.

"Send Ajax Request" + "Get All Items"

Get Server Info, Populate Model, Update HTML

The "send ajax request" is defined here and takes in four parameters: httpMethod, callback, url and reqData.

For testing purposes I have included some console.log statements.

Once the Ajax call has completed (200), the callback function is called.

"getAllItems()", this function uses the "send ajax request" function. It only passes two parameters, "GET" and the callback.

The data parameter conatins the data retrieved from the server and is used to update the model which is then binded to the html.

Below shows the DELETE function which doesn't use the reqData parameter but does pass the "Id" of the product as the "url" variable (.../api/web/Id).

The POST method is triggered when the user enters some data into "editor" and clicks SAVE. The "url" parameter is "null" but the reqData contains the key-value pairs for the two parameters (ProductName and Quantity).

"Remove Item"

"Handle Editor Click"

"Handle Create Click"

Initial Page Load

When the "Create" button is clicked this function is triggered.

It hides the Summary HTML block so that the user can focus on entering a new entry.

The "document ready" function waits until the page has loaded before it executes.

When the page first loads, "getAllItems" is called and the bindings are aplied.

Replace "Summary" HTML

Replace "Editor" HTML

Update "Home" MVC Controller

One Function (SPA)

The "Home" MVC controller now only contains one function that returns a view.

It doesn't pass an object to the view, it just renders a view (.../Home/Index).

All of the events on the page are handled by the jQuery, AJAX and Knockout.

Chrome Dev Tool

When the Page Loads

When the page (.../Home/Index) loads a call to the server is made to get the products (food).

At the bottom of the list is "web". This is the call to the GET method.

In the next screenshots it shows the contents of the request and the response's header.

Chrome: Get Request Info

Chrome: Response Info

".../Home/Index" View

Create Function Triggers POST

Book: PRO ASP.NET MVC 5

Book

This code came from the last example in this book.