1 / 12

Mobile Web with ASP.NET MVC & jQuery Mobile

Mobile Web with ASP.NET MVC & jQuery Mobile. Hajan Selmani, MSc. Founder of HASELT Acting CTO at 3PDevelopment Code Academy Coordinator at SEDC Microsoft MVP ASP.NET/IIS. Presentation Agenda. Introduction Known techniques for building Mobile Web Overview of jQuery Mobile latest version

cadee
Download Presentation

Mobile Web with ASP.NET MVC & jQuery Mobile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Web with ASP.NET MVC & jQuery Mobile Hajan Selmani, MSc.Founder of HASELTActing CTO at 3PDevelopmentCode Academy Coordinator at SEDC Microsoft MVP ASP.NET/IIS

  2. Presentation Agenda • Introduction • Known techniques for building Mobile Web • Overview of jQuery Mobile latest version • DEMO: Building Mobile Web with jQuery Mobile • jQuery Mobile and ASP.NET MVC4 • DEMO: jQuery Mobile in ASP.NET MVC4 • Things to remember

  3. Building Mobile Web… • Using Responsive Design Approach • Using Mobile dedicated Views

  4. jQuery Mobile • Building cross-browser and cross-platform compatible mobile web using jQuery Mobile Framework • http://jquerymobile.com/

  5. jQuery Mobile • Latest stable release: v1.3

  6. jQuery Mobile – Main structure • <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.css" /><script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> ...content goes here... </body> </html>

  7. DEMO • Building Mobile Web with jQuery Mobile

  8. jQuery Mobile and ASP.NET MVC4 • Mobile Project Template • Very similar with Internet Template • Styled views using jQueryMobile • Automatic recognizing Mobilespecific views • Display Modes Feature • Select views depending of browser request • View Switcher, Browser Overriding • http://asp.net/mvc & http://jquerymobile.com

  9. DEMO • jQuery Mobile with ASP.NET MVC4

  10. Author Things to Remember • It’s all about data- attributes • Using page data-role, you can add multiple pages within the same HTML document • footer, header and content data-roles are for dividing the structure with mobile header, content and footer parts accordingly • viewportmetatag is used to specify how the browser should display the page zoom level and dimensions

  11. Author Things to Remember • <ViewName>.mobile.cshtml for Mobile specific views • MVC4 has built-in automated mobile-detection mechanism • jQuery Mobile + MVC4 are great company for building incredible Mobile webs.

  12. Thanks to our Sponsors: Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners:

More Related