The document discusses the challenges and solutions for using ASP.NET Web Forms in mobile web development. It highlights issues such as clunky controls and poor markup, and proposes strategies like responsive design with Bootstrap and mobile-specific frameworks like jQuery Mobile. The author also offers guidance on refactoring applications for mobile compatibility and improving performance.

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