Remember the early days of ASP.NET development where selecting an item from a drop-down list caused a full post back of your page and caused a full database retrieval and a complete page reload? Those were the days! But application development (and web development in particular) has come a long way since those days. The applications that customers demand need to be lightweight, fast and dynamic. ASP.NET has evolved over the years, too, in order to provide the developer with the tools and frameworks to build these modern applications that can plug into the JavaScript client-side framework "flavor of the week" - Ember, Angular, Durandal, etc. This talk will focus on the latest offerings in ASP.NET to help you build those types of modern applications -- MVC, Web API and SignalR. If time allows, we'll look at what's coming with ASP.NET 5 to help you stay ahead of the curve. This session will provide you with an overview of a number of tools and frameworks in ASP.NET and how to choose which tool or tools to use when.

1. Creating Modern Web
Applications
WITH ASP.NET WEB API AND SIGNALR
DAVID HOERSTER
The Presentation Will Begin At 1 PM CST

2. Oxygen Blast Series
Slide 2
@IntertechInc #oxygenblast
Intertech
Training
 Training through hands-on,
real world business examples.
 Our site, your site, or live
online – globally.
 Agile/Scrum, Citrix, VMware,
Oracle, IBM, Microsoft,
Java/Open Source, and web
and mobile technologies.
Consulting
 Design and develop software
that powers businesses and
governments of all sizes.
 On-site consulting,
outsourcing, and mentoring.
 Agile, .NET, Java, SQL Server,
mobile development
including iPhone and Android
platforms and more….
Instructors Who Consult, Consultants Who Teach
Our Company
 Over 35 awards for growth,
innovation and workplace best
practices.
 99.7% satisfaction score from
our consulting and training
customers.
 Yearly “Best Places to Work”
winner in Minnesota.

3. About Me
5-Time .NET (Visual C#) MVP (April 2011)
Sr. Solutions Architect at Confluence
Conference Co-organizer for Pittsburgh TechFest (http://pghtechfest.com)
Organizer of Pittsburgh Reactive Dev Group (http://meetup.com/reactive)
Past President of Pittsburgh .NET Users Group
Twitter - @DavidHoerster
Blog – http://blog.agileways.com
Email – david@agileways.com

4. Agenda
Review of Recent Web App Trends
One ASP.NET Overview
Web API
◦ Enabling in clients
◦ OData
Real Time Updates with SignalR
Scaling Out SignalR with Redis

5. Modern Web Apps, circa 2000
Classic ASP
◦ Mix of markup and presentation logic
◦ Primarily server-side
◦ Minimal JavaScript
◦ Single page per URL
◦ COM

6. Modern Web Apps, circa 2003
ASP.NET
◦ More separation of presentation logic and markup
◦ Server-side controls
◦ Not much JavaScript
◦ Single page per URL
◦ Less COM

7. Modern Web Apps, circa 2007
ASP.NET and AJAX
◦ Same separation of presentation logic and markup
◦ Server-side controls
◦ AJAX Control Toolkit
◦ UpdatePanel!!
◦ JavaScript becoming more used
◦ jQuery
◦ Single page per URL, mostly
◦ What’s COM?

8. Modern Web Apps, circa 2010
ASP.NET Web Forms and MVC
◦ Cleaner separation of presentation logic and markup
◦ Less reliance on server-side controls
◦ Less focus on AJAX Control Toolkit
◦ More on jQuery and some JavaScript frameworks
◦ ViewResults other than just pages
◦ JsonResult

9. Modern Web Apps, circa 2012
ASP.NET Web Forms, MVC and Web API
◦ Presentation logic moving towards client
◦ Cleaner separation between roles
◦ Client
◦ Server
◦ JavaScript and CSS frameworks coming into prominence
◦ jQuery old school?
◦ Services
◦ JSON is the lingua franca of RESTful services

10. Modern Web Apps Today
ASP.NET MVC, Web API, Web Forms, OData, SignalR
◦ Mix and match for the best separation between markup and presentation logic
◦ MVC for basic page structure
◦ Web API for connection between client and service
◦ SignalR for real-time updates
◦ Single page application
◦ JavaScript driven
◦ Service driven
◦ Somewhat chatty but not chunky
◦ Single page loads multiple URLs

11. One ASP.NET
Structure (MVC)
Client Framework
(JavaScript)
Services
(Web API)
Hub
(SignalR)
Web Application

12. Creating a Structure
ASP.NET MVC
◦ Use it to create those basic structures of pages
◦ Maybe use it for a login page
◦ Once the structure is laid down, very little interaction with MVC
◦ Let client side and services interact

13. Service Layer
Web API provides a nice façade into your data
RESTful
Driven by HTTP Verb
Not bound to a web client
◦ Communication is via HTTP
◦ Client could be any HTTP client

14. Real Time Communication
ASP.NET’s SignalR provides mechanism for real-time updates
Publish-subscribe model

15. ASP.NET MVC in brief
“Successor” to ASP.NET WebForms
Server-side generation of content (result)
Separates presentation (view) from the logic (controller)
Somewhat tied to the web

16. ASP.NET Web API
Where MVC is about presenting results/pages
Web API is about data
Provides data to any client
◦ HTTP is the language
RESTful in nature
◦ HTTP Verbs dictate action
◦ GET, POST, PUT, DELETE

17. Creating Web API Project
Several options available
MVC and Web API templates provide starter
packages
◦ May want to go Empty for “real” projects

18. Your Route Patterns
Consider your route patterns up front
Can always add more if needed
Consider whether you want “classic” or
attribute-based routing

19. Your Model
Really just a POCO
Getters and setters
Should represent the data you want the client
to see
◦ Consider DTOs for your model
◦ Not your Entity!

20. Creating a Web API Controller
Controller is your entry point to client actions
Derive from ApiController
◦ Very similar in concept to MVC Controllers
Tied to HTTP Verb
◦ Convention based
◦ Get() or Get(int id)
◦ GetPlayers or GetPlayer(int id)

21. Attribute Based Routing
Instead of configuring routes in a separate file
Define them with your controller/methods

22. Web API Controllers
API methods generally return one of four values
◦ Void
◦ Nothing to return
◦ HttpResponseMessage
◦ Encapsulation of the model and any other metadata, headers, etc.
◦ Includes HTTP Status Code (200, 404, 500, etc.)
◦ IHttpActionResult
◦ Specialization of the HttpResponseMessage
◦ Ok(), NotFound(), Json(), etc.
◦ Create your own!
◦ Some other type of object
◦ Single object (Game)
◦ Collection (IEnumerable<Game>)
◦ Just data – no metadata!

23. Connecting to a Web API
Windows Client (C#)
◦ Include the Web API Client Library
◦ Use HttpClient in your .NET client
◦ Specify a media type (e.g., json)
◦ Call a verb-specific method

24. Connecting to a Web API
JavaScript
◦ Easy as connecting $.ajax
◦ Can specify Content Type
◦ Get JSON or XML back

25. Demo

26. Data Driven Services
With SPAs, client JavaScript requests most of the data
◦ Distributed Computing requests via a HttpClient-like library
Before it was more server-generated HTML (Web Forms, MVC)
Web API now becoming the main pipeline to get data to web clients
◦ Why not other clients?
But with clients requesting lots of data, how do you…?

27. Querying Entities
How would you handle a request that:
◦ Filters on one of three text fields
◦ One field could be numeric
◦ And maybe you want paging
Have a bunch of overloaded api methods, or a pretty flexible one?
Build a query json object and send it up?
Once you get into the API, then what?

28. Querying Entities
Traditional Web API
//JavaScript
$(‘#searchFormBtn’).on(‘click’, function(){
//bundle up your search fields
$.ajax({url: ‘/search’, data: { /*your object*/})
.done(function(data) { /*do something with the data*/});
});
//Web API
public IEnumerable<Things> Search(SearchObj searchParams) {
/*jump through a few hoops and call the db*/
}

29. Querying Entities
Maybe you do this
//JavaScript
$(‘#searchFormBtn’).on(‘click’, function(){
$.ajax({url: ‘/search?$filter=<your search fields>’})
.done(function(data) { /*handle the data*/});
});
//Web API
[EnableQuery]
public IQueryable<Things> Search() {
return dbContext.Things;
}

30. What Is OData?
Introduced with WCF Data Services (and ADO.NET Data Services)
RESTful (GET, POST, PUT, DELETE, PATCH)
Format and API Protocol
◦ Format is AtomPub format
◦ You have collections and then entries in those collections
◦ Can be XML or JSON
◦ Protocol defines how requests are formed
◦ Defined query string parameters (operators)
◦ $filter, $top, $skip, $orderby
◦ $select, $expand, $inlinecount, $skiptoken
◦ Defined paths ($metadata) and service contracts for use by clients
Full spec is at http://odata.org

31. How: OData and Web API?
Originally was part of early Web API betas
Removed when it diverged from ODataLib
OData support for Web API is an additional NuGet package now
OData v4 is still a prerelease (append -Pre to above line)
Web API only supports a subset of the OData spec
◦ $filter, $select, $skip, $top, $orderby, $expand, $inlinecount
You can enable/disable all of these globally and per method

32. Query Conventions
Generally are returning a set of entities (EntitySet) or a specific entity (EntityType).
URL is made up of the
◦ Service root
◦ http://<host>/odata
◦ Resource path
◦ /Player or /Player('bondsba01')
◦ Query options
◦ ?$filter=Year eq 1995
◦ http://<host>/odata/Player('bondsba01')?$filter=Year eq 1995

33. OData Query Options (Commands)
$filter
◦ Essentially the ‘where’ clause
◦ Can nest criteria and string them together using and/or
$select
◦ Simple projection
◦ Reduce the resultset
$top / $skip
◦ $skip skips records
◦ $top takes the top records available

34. Query Conventions
Action method naming is a combination of the HTTP verb and the EntitySet/Type
Can also be the HTTP verb
◦ Get all players
◦ /Players is the Resource Path
◦ Action method could either be Get or GetPlayers in the PlayerController
◦ Get a single player
◦ /Players('bondsba01') is the Resource Path
◦ Action method could either be Get or GetPlayer in the PlayerController
◦ Would also have a key as a method argument
◦ [FromODataUri] String key

35. Demo

36. Enabling Real Time Updates
Within our apps, we want updated data
How?
◦ User keeps refreshing?
◦ (The old StackOverflow approach)
◦ Polling?
◦ Anything new? Anything new?
◦ Something else?
SignalR is a library to assist with this

37. SignalR
Hub model
Create one or more hubs on the server
Clients communicate to a hub via a hub proxy
Publish a message to the hub
◦ Any subscribers of that hub are notified
Uses web sockets
◦ Older browsers, falls back to polling

38. How SignalR Works
SignalR works by means of hubs and proxies
The server can send messages to connected
clients
Clients can send messages to the hubs they’re
connected to
Uses web sockets, in modern browsers, for
communication
◦ Requires browser support for HTML5
◦ Uses Long Polling for older browsers
http://i3.asp.net/media/4196527/what_is_signalr_invocation.png?cdn_id=2015-04-01-001

39. Setting Up The Canonical Chat App
Include the SignalR NuGet package
Create a Hub
Create your hub messages
Include the SignalR JS in your client
Wire up to the hub
Have fun!
Let’s try it!

40. Setting Up a Broadcast
Enable SignalR in your Startup
Create the Hub class
Create methods/messages
Call the client with the message
Great for broadcasting out to clients
Stock tickers, dashboard updates, etc.
Baseball box scores!

41. Demo

42. Scaling Out SignalR
In a web farm environment, how can SignalR work?
Tied to a server
Need a central message store / notification hub
http://i3.asp.net/media/4267120/scaleout31.png?cdn_id=2015-04-01-001

43. Scaling out SignalR
Several alternatives
◦ Azure Service Bus
◦ SQL Server
◦ Redis
Redis is an open source key/value store
Redis acts as a backplane for SignalR
Multiple SignalR servers coordinated through the backplane

44. Demo

45. Wrapping Up

46. Oxygen Blast Series
Slide 46
@IntertechInc #oxygenblast
Next Oxygen Blasts
 Changes with SSIS 2012/2014
 June 24th
Upcoming ASP.NET Training
 Complete ASP.NET 4.0 – July 6 - 10
 Developing ASP.NET MVC Web Applications – July 13 – 17
ASP.NET Consulting
 New case studies available on our website
Upcoming Webinars and Training

47. Oxygen Blast Series
Slide 47
@IntertechInc #oxygenblast
Questions or Feedback?
Patrick Schaber – pschaber@Intertech.com
Thank You