Leveraging ASP.NET MVC and Knockout in a Web Application

This presentation is all about leveraging the power of data binding from knockout and traditional ASP.NET MVC views with unobtrusive validation. We will see how we can inject knockout binding using custom templates, while at the same time writing smaller, cleaner views. We will see how we can avoid post backs with jQuery and view model to optimize user experience and performance with small amounts of JavaScript. We will look at list based UI, using jqGrid as an example of a presentation layer. At the end, we will have a working application with a query and an edit screen, establishing a pattern of writing large applications with MVC and Knockout.

Transcript

1. LEVERAGING ASP.NET MVC AND KNOCKOUT IN A WEB APPLICATION SERGEY BARSKIY ARCHITECT, TYLER TECHNOLOGIES MICROSOFT MVP
2. ASP.NET MVC • MICROSOFT’S IMPLEMENTATION OF MODEL/VIEW/CONTROLLER PATTERN
3. STRONG POINTS OF ASP.NET MVC • TEMPLATES • EDITOR TEMPLATES • INTEGRATION WITH VALIDATION • PATTERN
4. WEAKER POINTS OF ASP.NET MVC • IF YOU GO OUTSIDE POST BACK MODEL, YOU WILL WRITE A LOT OF JAVASCRIPT • VIEWS CAN BECOME LARGE WITH A LOT OF CODE IN THEM
5. PROBLEMS • POSTBACKS • HANDLING DEPENDENCIES • SEPARATION BETWEEN VIEWS AND DATA • LARGE VIEWS
6. KNOCKOUT JS • JAVASCRIPT FRAMEWORK FOR WEB APPS • BINDINGS • DEPENDENCY TRACKING • AUTOMATIC UI REFRESH / CHANGE TRACKING • TEMPLATING
7. TAKING THE BEST OF BOTH WORLDS • ASP.NET MVC • VIEWS • VALIDATION • BASIC MVC STRUCTURE • KNOCKOUT • BINDING • JQUERY • FILL IN THE GAPS
8. ASP.NET MVC EDITOR TEMPLATES • ABILITY TO SPECIFY CUSTOM UI LOOK • EXTENDING THE TEMPLATES WITH KNOCKOUT BINDINGS
9. SOLUTIONS • MVVM PATTERN • BUILDING VIEW MODELS • SEPARATING FROM VIEWS • ENHANCING VIEWS • COMBINE UI ELEMENTS • BUILDING JAVASCRIPT FRAMEWORK • BASE CLASS FRAMEWORK
10. PLAN • CREATE ADVANCED TEMPLATES TO SIMPLIFY VIEWS • INCORPORATE KNOCKOUT INTO TEMPLATES • BUILD BASE CLASSES TO SIMPLIFY JAVASCRIPT CODING • USE JQUERY FOR ASYNCHRONOUS COMMUNICATION AND VALIDATION
11. LINKS • HTTP://ASP.NET/MVC • HTTP://KNOCKOUTJS.COM/ • SERGEY@BARSKIY.COM • HTTP://DOTNETSPEAK.COM