CORS and Formatters

Deborah Kurata
@deborahkurata | blogs.msmvps.com/deborahk/

Module Objectives
Understanding
CORS

Enabling CORS

Understanding
Serialization
Formatters

Configuring the
JSON
Formatter

CORS allows many resources on a

web page to be requested from another
domain outside the domain from which
the resource originated.

Wikipedia

Browser

Server

HTML

HTML

Angular/
JavaScript

Angular/
JavaScript

Web API
Service
Browser

HTML

Server 1

HTML

<script
type="application/javascript"
src="http://server2.com/api/products?jsonp=parseResponse">
</script>

Angular/
JavaScript

Angular/
JavaScript
Server 2

Web API
Service

config.EnableCors();
[EnableCorsAttribute("http://localhost:52436", "*","*")]

Enabling CORS in a Web API Service

Download the CORS package
Call the EnableCors method as part of the configuration setup
Set the EnableCorsAttribute on the class

Serialization is the process of translating

data structures or object state into a format
that can be stored ... or transmitted across a
network connection

Wikipedia

Web API Service

{
"ProductId": 1,
"ProductName": "Leaf Rake",
"ProductCode": "GDN-0011",
"ReleaseDate": "2009-03-19T00:00:00",
"Description": "Leaf rake with 48inch wooden handle.",
"Price": 19.95
},
]

Serializer

Controller

Web API Service

{
"productId": 1,
"productName": "Leaf Rake",
"productCode": "GDN-0011",
"releaseDate": "2009-03-19T00:00:00",
"description": "Leaf rake with 48inch wooden handle.",
"price": 19.95
},
]

Serializer

Controller

Serialization Formatters

JSON

XML

JSON Formatter Settings

[JsonIgnore]
DateTimeZoneHandling
- 2009-03-19T00:00:00
Formatting
CamelCasePropertyNamesContractResolver

config.Formatters.JsonFormatter
.SerializerSettings.ContractResolver =
new CamelCasePropertyNamesContractResolver();

Camel Case Property Names

Set the JsonFormatter's ContractResolver

This Module Covered

Understanding CORS
Enabling CORS
Understanding Serialization Formatters
Configuring the JSON Formatter

Touch Points
Retrieving Data
Filtering, Shaping, Querying Data
Saving Data
Error Handling
User Authentication
User Authorization
- Michelangelo Buonarroti via Wikimedia Commons
https://www.flickr.com/photos/34409164@N06/4277702120

Saving Data

Deborah Kurata
@deborahkurata | blogs.msmvps.com/deborahk/

Touch Points
Retrieving Data
Filtering, Shaping, Querying Data
Saving Data
Error Handling
User Authentication
User Authorization
- Michelangelo Buonarroti via Wikimedia Commons
https://www.flickr.com/photos/34409164@N06/4277702120

Updating an Item
GET Request
api/products/5

API

Updating an Item
PUT Request
- Steel

api/products/5

API

Creating an Item
GET Request
api/products/0

API

Creating an Item
POST Request
api/products

API

Creating or Updating an Item

GET Request
api/products/x
POST/PUT Request
api/products/x

API

Module Objectives
Building the Web
API Service
Methods

Building an
Angular Edit Page

Calling the Web API

to Save the Data

Web API Service Methods for a Save

GET

POST

PUT

Web API Save Methods

POST (api/products)

PUT (api/products/5)

Posts data for a resource or set of

resources

Puts data for a specific resource with

an Id

Used to:

Used to:

Create a new resource when the

server assigns the Id
Update a set of resources

Not idempotent

Create a new resource when the

client assigns the Id
Update the resource with the Id

Idempotent

Building a (Simple) Angular Edit Page

Create a new HTML template

Build the associated controller

Modify index.html

Calling the Web API to Save the Data

Calling a Web API to Save Data

Angular module
(productManagement)
View
(productEdit
View)

Angular controller
(productEditCtrl)

Model
Methods

vm.submit = function () {
<button
ng-click="vm.submit()">
}
Save
</button>

Angular module
(common.services)
Custom Angular
service
(productResource)
Built in
$resource
service

Web API
service

Built-In $resource Methods

Angular module (common.services)
productResource service
$resource service

Query
Get
Save

GET Request
api/products

GET Request
api/products/5

POST Request
api/products

Web API
service

return $resource(appSettings.serverPath +
"/api/products/:id");

Creating a Custom $resource Method

return $resource(appSettings.serverPath +
"/api/products/:id", null,
{
'update':{method:'PUT'}
});

Creating a Custom $resource Method

$resource Methods
Angular module (common.services)
productResource service
$resource service

Query
Get
Save

Update

GET Request
api/products

GET Request
api/products/5

POST Request
api/products

PUT Request
api/products/5

Web API
service

This Module Covered

Building the Web API Service
-

GET, POST, PUT

Building an Angular Edit Page

Calling the Web API to Save the Data
-

Query, Get, Save, Update

Touch Points
Retrieving Data
Filtering, Shaping, Querying Data
Saving Data
Error Handling
User Authentication
User Authorization
- Michelangelo Buonarroti via Wikimedia Commons
https://www.flickr.com/photos/34409164@N06/4277702120