RIA / SPA with ASP.NET
1 like2,715 views
This document discusses the development of rich internet applications with ASP.NET. It provides an overview of technologies like Knockout, ASP.NET Web API, HTML5, and SignalR that enable building single page applications with client-side rendering. Knockout uses data binding and the observer pattern to update the DOM based on view model changes. The ASP.NET Web API builds on MVC to provide RESTful services that return JSON/XML data rather than views. HTML5 features like client-side validation, web storage, and Web Sockets improve the client-side experience. SignalR uses WebSockets for real-time communication between server and client.
![Authorization
You can perform authorization declaratively by using the [Authorize]
attribute with API controller methods.
You can perform authorization imperatively by returning a 401 Unauthorized
status code.
Remember to enable Forms Authentication in the Web.config file.](https://image.slidesharecdn.com/ria-spa-aspnet-130609171659-phpapp02/85/RIA-SPA-with-ASP-NET-14-320.jpg)
RIA / SPA with ASP.NET
- 1. Development of Rich Internet Apps with ASP.NET Hrvoje Hudoletnjak
- 2. Agenda Little bit of History Knockout (Open Source) Microsoft ASP.NET Web API (Open Source) HTML5 (Open Source) SignalR
- 3. Little bit of History Then HTML + CSS Flash / Flex Silverlight Now HTML5 / CSS3 / JavaScript Future? Native or plugin?
- 4. What is a Single Page App? Server-Side App Page rendered from the server ASP.NET WebForms / MVC SinglePage App Page rendered from the browser Only one actual page is loaded ASP.NET REST API + Client side code
- 5. Why Single Page Apps? The problem with server-side apps: Server-Side Apps are Stateless The Presentation Layer is Miles Away Server-Side Apps don’t respect the web
- 6. Knockout MVVM for JavaScript Open-source framework created by Steven Sanderson Included with ASP.NET MVC 4 (works with Web Forms) Available through NuGet with: Install-Package KnockoutJS
- 7. Knockout Observer Pattern: An object maintains a list of observers. When the object changes, the observers are notified.
- 8. // Create view model var viewModel = { product: { name: ko.observable("Milk"), price: ko.observable(2.99) }, updateProduct: function() { alert(viewModel.product.name()); } }; // Bind view model to DOM ko.applyBindings(viewModel); Name: <input data-bind="value:product.name" /> Price: <input data-bind="value:product.price" /> <button data-bind="click:updateProduct"> Update </button> Knockout two-way databinding Javascrip t HTML
- 9. Server Client Web UI HTML/CSS/JS Data services JSON/XML Application layer JavaScript Visible UI HTML/CSS Data access layer JavaScript Local storage Navigation APIs MVC, WEBFORMS KNOCKOUT WEB API BREEZE HISTORY.JS HTML5
- 10. What is the ASP.NET Web API? ASP.NET MVC Controllers return views (HTML) derives from Controller base class ASP.NET API Controllers return data (JSON, XML) derives from ApiController base class uses POST, GET, PUT, DELETE
- 11. What is the ASP.NET Web API? What is it Good For? Public Web API Twitter, Salesforce.com, StackOverflow Single Page Apps (SPA) A single view is rendered to the browser and all updates to the view are made using jQuery with the Web API. No Postbacks!
- 12. Model Binding Converts form post into a strongly typed C# class: { “id”: 23, “title”: “Star Wars”, “director”: “Lucas”} Converts to: new Movie { Id=23, Title=“Star Wars”, Director=“Lucas”}
- 13. Validation You can use validation attributes with the Web API: Required, StringLength, Range, and so on
- 14. Authorization You can perform authorization declaratively by using the [Authorize] attribute with API controller methods. You can perform authorization imperatively by returning a 401 Unauthorized status code. Remember to enable Forms Authentication in the Web.config file.
- 15. HTML5 HTML5 (and related standards) adds support for: Client-Side Validation – Input validation in the browser. Web Storage – Store key value pairs in big, persistent cookies. IndexedDB – Standard API for interacting with in-browser database (SQL Compact, MySQL) Web Sockets – Asynchronous communication with a two-way open socket. Validation adds two new attributes: required, pattern Supports custom validation with new JavaScript method: setCustomValidity()
- 16. Web Sockets Full duplex client-server communication SignalR (Open Source) WebSockets on IIS 8 + IE10/Chrome/Firefox Fallback to AJAX polling duplex public class Chat : Hub { public void Send(string message) { Clients.All.addMessage(message); } } var chat = $.connection.chat; chat.client.addMessage = function (message) { $('#messages').append('<li>' + message + '</li>'); }; $.connection.hub.start(); C# Javascrip t
- 17. Thank you! Questions? Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIS http://hudosvibe.net http://twitter.com/hhrvoje hrvoje@hudoletnjak.com Some slides by Stephen Walther from http://Superexpert.com