Rich Forms with ASP.NET MVCby Michael Kennedy | DevelopMentor | @mkennedy | michaelckennedy.net
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Warning: US English ahead, sorry my UK friends!
Forms and data input is one of the truly shining features of ASP.NET MVC.
* Strongly-typed views* HTML Helpers* Model Binding* Unobtrusive Validation* Unified Client and Server Validation* View Models* JavaScript-Friendly Environment* Single-Page Applications (MVC 4)
●
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Introduction
The GET, POST, Redirect Pattern
GET/book/edit/42
POST/book/edit/42 + changes
HTTP 302 -
Redirect
/book/show/42
update data
Edit data locally
Learn more at http://story.learninglineapp.com
The GET, POST, Redirect Pattern
http://en.wikipedia.org/wiki/Post/Redirect/Get
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
The data model: Amazoon
Free for DevWeek attendees: http://bit.ly/ll-kennedy
TRACK 2Applied NoSQL in .NET16:00 today
Demo - Part 1: Strongly-typed views
Time to upgrade Amazoon:
Amazoon needs a home page.
Learn more at http://story.learninglineapp.com
Visual Studio Resharper
Create your views the easy way
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Let the scaffolding work for you (in the beginning)
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Demo - Part 2: Forms, Model Binding, and HTML Helpers
"Pure" HTML forms are valid but not optimal in MVC. Make use of @Html extensions.
Html.BeginForm(), Html.TextBoxFor(), etc.
Usually, this is far easier with Model Binding.
Learn more at http://story.learninglineapp.com
Demo - Part 2: Forms, Model Binding, and HTML Helpers
Time to upgrade Amazoon:
Amazoon needs an admin section where we can create categories and books.
(naive-style of models)
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Demo - Part 2: Forms, Model Binding, and HTML Helpers
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Demo - Part 2: Forms, Model Binding, and HTML Helpers
Well, that mostly worked. But it was clunky on several levels.
* ViewBag is untyped and non-discoverable* Many parameters "capture" the form values* What about validation?
Learn more at http://story.learninglineapp.com
That previous code employed Model Binding.
While the first impression is the data comes from forms, it actually has 3 sources (in order):
1. Request.Form["name"], if it exists.2. RouteData.Values["name"], if it exists.3. Request.QueryString["name"], if it exists.4. Property is set to default(T) (for type T).
Model binding
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Demo - Part 3: View Models and Validation
Now that we got the site working with the new features, let's clean it up.
* View Models (Model Binding at the next level)* Validation (is easier with View Models)* Mass assignment (is harder with View Models, details later)
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
This is fine for 4 properties, what about for 20?
Keeping models and ViewModels in sync isn't fun
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Automapper to the rescue.
Keeping models and ViewModels in sync isn't fun
Learn more at http://story.learninglineapp.com
Three steps to enable client-side validation.
Client-side validation
Free for DevWeek attendees: http://bit.ly/ll-kennedy
More data validation choices
http://blog.michaelckennedy.net/2013/01/15/3-open-source-validation-projects-for-asp-net-mvc/
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Demo - Part 4: Adding Real Usability with Client-Side Code
Time to upgrade Amazoon (again):
Comments and discussions around books. These are already in place, but the full-page refresh is not user-friendly on these potentially large pages.
Learn more at http://story.learninglineapp.com
Demo - Part 4: Adding Real Usability with Client-Side Code
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Demo - Part 5: Adding Real Usability with Client-Side Code
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Who do you trust?
So let me be clear about this: you should not trust data until the data is validated. Failure to do so will render your application vulnerable. Or, put another way: all input is evil until proven otherwise. That's rule number one. Typically, the moment you forget this rule is the moment you are attacked. - Michael Howard
Writing Secure Code
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Who do you trust?
You have to choose how to display content.
1. @Model.value - safe by default
2. @Html.Raw(Model.value) - unsafe by choice
3. @HelperClass.GetHtml(Model.value) - choose by return type.
http://blog.michaelckennedy.net/2012/10/15/understanding-text-encoding-in-asp-net-mvc/
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
Adding rich and safe content editing.
Markdown and MarkDownDeep let you accept rich input without the risk.
Learn more at http://story.learninglineapp.com
MVC 4 introduces the concept of Single-Page Applications (think gmail). These combine many technologies:
* MVC and ASP.NET Web API* Knockout.js* Upshot.js* HTML5
Fully client-side MVC applications
Free for DevWeek attendees: http://bit.ly/ll-kennedy
http://bit.ly/sanderson-spa
Fully client-side MVC applications
from DEVELOPMENTOR - ONLINE, COLLABORATIVE, LEARNING PLATFORM.
* Mass assignment vulnerabilities.* Default parameters and values in routes.* Working with files and file uploads.* Asynchronously loading slow content.* Drag and drop editing.
Stuff we (maybe) didn't get a chance to cover.
Learn more at http://story.learninglineapp.com
Just some of the features we've explored in MVC:
* HTML Helpers* Model Binding* Unobtrusive Validation* Unified Client and Server Validation* View Models* JavaScript-Friendly Environment* Single-Page Applications (MVC 4)
Conclusion
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Take this talk as a course on LearningLine
Free for DevWeek attendees: http://bit.ly/ll-kennedy
Take this class for free with this code http://bit.ly/ll-kennedy
Thanks for coming!
Free for DevWeek attendees: http://bit.ly/ll-kennedy
STAY IN TOUCH
Blog: blog.michaelckennedy.net
Twitter: @mkennedy
Google+: http://bit.ly/kennedy-plus