Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
•Download as PPTX, PDF•
4 likes•2,895 views
This document discusses single page applications using ASP.NET MVC 4. It describes how single page applications can provide a great user experience across devices using HTML, CSS, JavaScript, and data services to retrieve and display data without reloading the entire page. Key aspects covered include using Web API and Upshot for data access, Knockout.js and Upshot for the user interface, and offline support using HTML5 application cache and local storage.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
Similar to Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4 (20)
More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg
More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)
Recently uploaded
Recently uploaded (20)
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
- 1. Single Page Applications for desktop, mobile, and tablet with ASP. NET MVC 4
- 2. Single Page Applications * * and nothing fancy
- 5. Great user Runs on experience any device (Advanced) Can work App-store offline deployable
- 6. Visible UI Web UI HTML/CSS HTML/CSS/JS Data services JSON/XML Application layer Navigation JavaScript APIs Data access layer JavaScript Local storage Server Client
- 8. MVC / Web Forms / WebMatrix Visible UI Web UI HTML/CSS HTML/CSS/JS knockout.js Data services JSON/XML Application layer Navigation JavaScript APIs WebAPI history.js Data access layer upshot.js JavaScript Local storage HTML5 Server Client
- 9. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 10. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 11. WebAPI DbDataController DataSource Upshot Your app code ASP.NET MVC JavaScript WebAPI + Upshot
- 12. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 13. View HTML ViewModel Upshot Model Knockout + Upshot
- 14. myViewModel.searchText = ko.observable("Chickens"); <input data-bind="value: searchText" /> Knockout + Upshot
- 15. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 16. 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 17. Your client-side code Cache HTML/JS/CSS/Images Manifest Data services Offline-aware Provider DataSources JSON/XML Provider Upshot Local storage HTML5 Server Client HTML5 Application Cache and Local Data Store
- 18. Single Page Applications and nothing fancy 1 2 Data UI WebAPI + Upshot Knockout + Upshot 3 4 Mobile & Navigation Offline History.js Crazy magic
- 19. 1 Explore the samples DeliveryTracker, Upshot Scenarios - follow @StevenSanderson for a download link coming soon 2 Try the new MVC 4 Beta – this week! … including the Single Page Application scaffolder template 3 Enjoy http://learn.knockoutjs.com/ Interactive in-browser tutorials for Knockout.js and MVVM
Editor's Notes
- Web apps are great because there’s no installation, you can link to them, and use familiar back/forwards navigationDesktop apps are great because they’re available offline, and you can move around in them without waiting for server requestsWhat if we could combine these?Nothing fancy = no special futuristic browser enhancements, no plugins. Works on IE6+, built with traditional web technologies only.
- Web apps are great because there’s no installation, you can link to them, and use familiar back/forwards navigationDesktop apps are great because they’re available offline, and you can move around in them without waiting for server requestsWhat if we could combine these?Nothing fancy = no special futuristic browser enhancements, no plugins. Works on IE6+, built with traditional web technologies only.