putting the v in mvc - code camp
DESCRIPTION
MVC gives us total control over markup in ASP.NET. Or in other words, you better learn how to turn HTML into something pretty. Luckily, there is a great framework to help us out: jQuery UI! We will take a look at using jQuery UI to do exactly that. We will start with simple HTML markup and transform it into interactive widgets with very little code. jQuery UI widgets add style and behavior to otherwise drab markup without changing its semantics. We will also look at Wijmo, a new toolkit that extends jQuery UI. Wijmo brings over 30 widgets to jQuery UI from Menus to SVG Charts, 18 of which are Open Source. Both jQuery UI and Wijmo can take your Views from boring to brilliant in ASP.NET MVC. After this session you will be ready to start putting the V in MVC!TRANSCRIPT
![Page 1: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/1.jpg)
Putting the V in MVCChris Bannon
![Page 2: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/2.jpg)
about:me
Chris BannonProduct Manager
@b4nn0n
Hello!
![Page 3: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/3.jpg)
The Big V
• V stands for View• It is the “Presentation Layer”• Responsible for the UI• Consists of HTML• HTML rendered via HTML Helpers
![Page 4: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/4.jpg)
HTML Helpers
• “Help” us create HTML• Provide Helpers for simple elements– TextBoxes, HyperLinks, etc.
• In the end, they just return a String• Complex HTML Helpers can get
messy–Menu, Grid, Tree, etc.
![Page 5: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/5.jpg)
“If only there were a way to turn simple HTML into a rich UI…”
?
![Page 6: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/6.jpg)
Enter jQuery UI
• Widget library– Turns HTML into interactive UI– As easy to use as jQuery– Pre-themed with CSS–Works in every browser– Falls back to semantic HTML markup
• Easily apply animation effects
![Page 7: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/7.jpg)
“If only there were more of these awesome jQuery UI widgets…”
…
![Page 8: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/8.jpg)
Enter Wijmo
• Extends jQuery UI (not replaces it)– Adds features to jQuery UI widgets
• Slider, Progressbar, etc.
– Adds new widgets to jQuery UI– Grid, Charts, Tree, etc.
• Works in every browser (even IE6)• Themeroller-ready• As easy to use as jQuery• HTML5, CSS3 and SVG
That’s me!
![Page 9: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/9.jpg)
The Ultimate View
HTML jQuery!Widgets
CSSJava-ScriptHTML
Boom
![Page 10: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/10.jpg)
In Other Words
$(“ul”).wijmenu();
![Page 11: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/11.jpg)
$(“code”).show();
![Page 12: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/12.jpg)
Benefits of “The Ultimate View”
• Take control over your markup– Clean & lean HTML–Maintainable markup
• Highly interactive UI• Easily integrates jQuery.ajax()• Themeroller support
![Page 13: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/13.jpg)
ComponentOne’s Web Stack
MVC made easy!
![Page 14: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/14.jpg)
Resources
Wijmo: http://wijmo.com jQuery: http://jquery.comjQueryUI: http://jqueryui.comThemeroller: http://jqueryui.com/themeroller/Me: http://twitter.com/b4nn0n
Thanks!
![Page 15: Putting the V in MVC - Code Camp](https://reader035.vdocument.in/reader035/viewer/2022062617/54c6bdcc4a795943608b45b4/html5/thumbnails/15.jpg)
$(this).end();
l8r!