HTML5 Programming for ASP.NET Developers
■ ■ ■ Bipin Joshi HTML5 Programming for ASP.NET Developers Copyright © 2012 by Bipin Joshi This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN978-1-4302-4719-7 ISBN978-1-4302-4720-3 H%RRN Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Gwenan Spearing Development Editor: Louise Corrigan Technical Reviewer: Peter Vogel Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Anamika Panchoo Copy Editor: Tiffany Taylor Compositor: Bytheway Publishing Services Indexer: SPI Global Artist: SPI Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www. apress.com/source-code. At the holy feet of Lord Shiva. – Bipin Joshi Contents at a Glance
■ About the Author ...... xv ■ About the Technical Reviewer ...... xvi ■ Acknowledgments ...... xvii ■ Introduction ...... xviii ■ Chapter 1: Overview of HTML5 and ASP.NET 4.5 ...... 1 ■ Chapter 2: Overview of jQuery ...... 35 ■ Chapter 3: Working with Audio and Video ...... 63 ■ Chapter 4: Drawing with the Canvas ...... 83 ■ Chapter 5: Working with Forms and Controls ...... 119 ■ Chapter 6: Using History API and Custom Data Attributes ...... 165 ■ Chapter 7: Storing Data in Web Storage ...... 183 ■ Chapter 8: Developing Offline Web Applications ...... 203 ■ Chapter 9: Dealing with Local Files Using the File API ...... 223 ■ Chapter 10: Multithreading in Web Pages Using Web Workers ...... 255 ■ Chapter 11: Using the Communication API and Web Sockets ...... 277 ■ Chapter 12: Finding Location with the Geolocation API ...... 305 ■ Chapter 13: Styling Web Forms and Views with CSS3 ...... 323 ■ Appendix A: HTML5 Learning Resources ...... 351 ■ Index ...... 353
iv Contents
■ About the Author ...... xv ■ About the Technical Reviewer ...... xvi ■ Acknowledgments ...... xvii ■ Introduction ...... xviii ■ Chapter 1: Overview of HTML5 and ASP.NET 4.5 ...... 1 History of HTML5 ...... 1 HTML5 Page Structure ...... 2 A Quick Look at HTML5-specific Tags ...... 6 HTML5 Features of Interest ...... 6 Audio and Video ...... 7 Canvas ...... 7 History API ...... 7 Web Storage ...... 7 Offline Web Applications ...... 8 File API ...... 8 Web Workers ...... 8 Web Sockets ...... 8 Geolocation ...... 8 CSS3 ...... 9 HTML5 and Browser Support ...... 9 Checking for HTML5 Support Statically ...... 9 Checking for HTML5 Support Dynamically ...... 11 HTML5 and ASP.NET ...... 13 Features of the Visual Studio HTML Editor ...... 15 HTML Formatting ...... 15
v ■ CONTENTS
IntelliSense and Validations for HTML5 Tags ...... 16 HTML5 Snippets ...... 17 Automatically Renaming End Tags ...... 18 JavaScript IntelliSense ...... 18 Testing a Web Page in a Specific browserTesting ...... 19 Sample Web Applications ...... 20 A Simple ASP.NET Web Forms–based Web Application Using HTML5 ...... 20 A Simple ASP.NET MVC-Based Web Site Using HTML5 ...... 26 Summary ...... 33 ■ Chapter 2: Overview of jQuery ...... 35 What Is jQuery? ...... 35 jQuery Is a JavaScript Library ...... 36 jQuery Is Fast and Concise ...... 36 jQuery Simplifies Traversing HTML Documents, Event Handling, Animation, and Ajax Interactions...... 36 jQuery Is Designed to Change the Way You Write JavaScript ...... 36 Downloading and Referring to jQuery ...... 36 Event Handling ...... 39 Event Wiring Using the bind() Method ...... 44 jQuery Selectors ...... 44 Selecting Elements Based on ID, Tag Name, and CSS Class ...... 45 Selecting Elements Based on Their Attribute Value ...... 48 Selecting Form Elements ...... 51 Modifying the DOM Using jQuery ...... 54 jQuery Ajax Techniques...... 55 Using the jQuery $.ajax() Method in a Web Forms Application ...... 57 Using the jQuery $.ajax() Method in an MVC Application ...... 60 Summary ...... 61 ■ Chapter 3: Working with Audio and Video ...... 63 Embedding Media Files Using the
Playing Video ...... 67 Supported Audio and Video Formats ...... 69 Implementing a Fallback Mechanism ...... 72 Supporting Multiple Media Formats ...... 72 Flash or Silverlight Fallback ...... 73 Programming with the Audio and Video APIs ...... 74 Creating a Custom Video Player Using the Video API ...... 75 HTML5 Markup ...... 76 SQL Server Database and Entity Framework Data Model ...... 77 Fetching the Video Playlist...... 78 Playing, Pausing, and Stopping a Video ...... 79 Displaying Duration and Progress ...... 80 Summary ...... 82 ■ Chapter 4: Drawing with the Canvas ...... 83 The
vii ■ CONTENTS
Saving the Canvas Drawing as an Image File on the Server ...... 108 Creating Pie Charts Using Canvas Drawing Techniques ...... 110 SQL Server Database ...... 111 MVC Controller ...... 112 MVC View ...... 113 Adding Chart Data...... 113 Drawing a Pie Chart ...... 114 Saving a Pie Chart ...... 116 Summary ...... 118 ■ Chapter 5: Working with Forms and Controls ...... 119 Understanding HTML Forms in ASP.NET ...... 119 The