rich forms with asp.net mvcsddconf.com/brands/sdd/library/rich_input_forms_with_asp_dotnet_… ·...
TRANSCRIPT
![Page 1: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/1.jpg)
Michael Kennedy@mkennedy
http://blog.michaelckennedy.net
Rich Forms with ASP.NET MVC
{SDD}2015
Software Design& Development
![Page 2: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/2.jpg)
Make way for the demos
![Page 3: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/3.jpg)
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+)
Introduction
![Page 4: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/4.jpg)
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
![Page 5: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/5.jpg)
The GET, POST, Redirect Pattern
1
2
3
4
![Page 6: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/6.jpg)
The GET, POST, Redirect Pattern
http://en.wikipedia.org/wiki/Post/Redirect/Get
![Page 7: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/7.jpg)
The project: THE BOOK STORE
![Page 8: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/8.jpg)
The data model: THE BOOK STORE
![Page 9: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/9.jpg)
Strongly-typed views
BookController.cs
![Page 10: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/10.jpg)
Demo - Part 1: Strongly-typed views
Time to upgrade THE BOOK STORE:
THE BOOK STORE needs a home page.
![Page 11: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/11.jpg)
Visual Studio Resharper
Create your views the easy way
![Page 12: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/12.jpg)
Let the scaffolding work for you (in the beginning)
![Page 13: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/13.jpg)
"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.
Demo - Part 2: Forms, Model Binding, and Helpers
![Page 14: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/14.jpg)
Time to upgrade THE BOOK STORE:
THE BOOK STORE needs an admin section where we can create categories and books.
(naive-style of models)
Demo - Part 2: Forms, Model Binding, and Helpers
![Page 15: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/15.jpg)
Demo - Part 2: Forms, Model Binding, and Helpers
![Page 16: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/16.jpg)
Demo - Part 2: Forms, Model Binding, and 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?
![Page 17: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/17.jpg)
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
![Page 18: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/18.jpg)
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)
![Page 19: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/19.jpg)
Demo - Part 3: View Models and Validation
![Page 20: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/20.jpg)
Demo - Part 3: View Models and Validation
![Page 21: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/21.jpg)
This is fine for 4 properties, what about for 20?
Keeping models and ViewModels in sync isn't fun
![Page 22: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/22.jpg)
Automapper to the rescue.
Keeping models and ViewModels in sync isn't fun
http://automapper.org/
![Page 23: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/23.jpg)
Three steps to enable client-side validation.
Client-side validation
![Page 24: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/24.jpg)
More data validation choices
http://blog.michaelckennedy.net/2013/01/15/3-open-source-validation-projects-for-asp-net-mvc/
![Page 25: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/25.jpg)
Who do you trust?
![Page 26: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/26.jpg)
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
![Page 27: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/27.jpg)
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/
![Page 28: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/28.jpg)
Adding rich and safe content editing.
Markdown and MarkDownDeep let you accept rich input without the risk.
![Page 29: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/29.jpg)
Demo - Part 4: Adding Real Usability with Client-Side Code
Time to upgrade THE BOOK STORE (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.
![Page 30: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/30.jpg)
Demo - Part 4: Adding Real Usability with Client-Side Code
![Page 31: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/31.jpg)
Demo - Part 4: Adding Real Usability with Client-Side Code
![Page 32: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/32.jpg)
• 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.
![Page 33: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/33.jpg)
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
Conclusion
![Page 34: Rich Forms with ASP.NET MVCsddconf.com/brands/sdd/library/Rich_Input_Forms_With_ASP_dotNET_… · of ASP.NET MVC. • Strongly -typed views • HTML Helpers • Model Binding •](https://reader036.vdocuments.site/reader036/viewer/2022071217/604c680895a2a25ba51c03a8/html5/thumbnails/34.jpg)
Thanks for coming!
STAY IN TOUCH
Blog: blog.michaelckennedy.net
Twitter: @mkennedy
Google+: http://bit.ly/kennedy-plus
GitHub: github.com/mikeckennedy