In this session, I will show you how to take your bland ASP.Net web application and make it available in a form factor for mobile browsers without re-writing your entire application. I will also show you how to scale your application for tablets, and handle all of the functionality in a DRY manner. Key take-aways from this session will include: -Ability to adapt your existing application to handle phone and tablet screen sizes -Ability to re-use logic in your current application in new form factors -Knowledge and comfort around testing your web application for various device screen sizes

1. Mobile ASP.NET Web Forms
Making
the
Impossible
Possible

3. Now Presen7ng…
§ Jeffrey
T.
Fritz
§ ASP.Net
Developer
Evangelist
for
Telerik
AJAX
controls
§ MVP,
ASPInsider
§ Tech
Ed
2012
Speaker
Idol
Finalist,
2013
Runner-­‐up
§ 15
years
of
web
development
experience
§ CodeProject.tv
+
Pluralsight
author
§ May
2013
MSDN
Magazine:
One
ASP.Net
§ DotNetRocks
#855,
Tablet
Show
#44,
#113
§ Yet
Another
Podcast
#98,
#106

4. Introduc7on
• Why
Mobile
Web?
• What
makes
web
forms
on
mobile
bad
• How
to
add
a
mobile
‘switch’
• Refactoring
for
mobile
• Mobile
Only
with
jQueryMobile
• Responsive
and
Mobile
with
Bootstrap

5. Why Mobile Web?
NaFve
Hybrid
Web
NaFve
Hybrid
Web
Penetra7on
Cost

6. Desktop Web in a Mobile Browser Looks like…

7. Why has Web Forms “not worked” for mobile?
• ViewState
• Postback
• Clunky
Controls
• Ugly
markup
• <input
type="submit"
name="ctl00$SideBar$ctl02$ctl00$SearchButton"
value="Go"
id="ctl00_SideBar_ctl02_ctl00_SearchButton"
class="SearchButton"
/>
• Fat
markup
• No
Control
over
Control
Rendering!

8. Why is Web Forms mobile possible NOW?
• Device
DetecFon
• Model
Binding
/
Value
Providers
• Clear
control
markup
• Less
need
for
full
page
life-­‐cycle

9. • Adapve
Rendering
• Content
Mobile Strategies
is
automaFcally
sized
and
shaped
appropriately
based
on
the
size
and
shape
of
the
browser
presenFng
this
content.
The
most
basic
example
is
defining
a
block
at
100%
width.
More
complex
examples
use
CSS
frameworks
like
Bootstrap
or
FoundaFon
• Alternave
Rendering
• Content
is
rendered
in
a
completely
different
and
unique
format,
specific
for
the
size
and
shape
of
browser
requesFng
the
content.
Examples
include
jQueryMobile
and
KendoUI
Mobile

10. Mobile Detec7on in Web Forms
• FriendlyUrls
to
the
rescue!
• Default
.mobile.aspx
rendering
• AddiFonal
se_ngs
available
by
extending
WebFormsFriendlyUrlResolver

11. Refactoring for Re-­‐Use
• Use
Task-­‐View-­‐Presenter
approach
• Extract
logic
from
page
and
move
to
a
Task
object
• Your
page
is
now
a
View
• Create
a
Presenter
object
• Expose
page
events
and
properFes
for
controls
to
the
Presenter

12. Refactoring for Mobile
• Reduce
the
number
of
round-­‐trips
to
your
web
server
• Bundle
and
Minify
your
CSS
and
JavaScript
• Configure
JavaScript
in
BundleConfig.cs
• Configure
CSS
in
bundles.config
• Add
references
in
markup
to
these
bundles

13. Demo
Sample
Website
configuraFon
and
walkthrough
Adding
Mobile
CapabiliFes
to
your
applicaFon

14. Review
• You
can
mobile-­‐enable
your
applicaFon
easily!
• Configure
FriendlyUrls
• Bundle
your
staFc
content
• Add
bootstrap,
jQueryMobile,
or
KendoUI
mobile
to
your
project
• Begin
wriFng
.mobile.aspx
pages
today

15. References
• www.jquerymobile.org
• www.kendoui.com
• www.getbootstrap.com
• www.bootswatch.com
• hbp://blogs.telerik.com/jefffritz/posts/13-­‐04-­‐15/alternate-­‐rendering-­‐tricks
• hbp://bit.ly/webformsmobile