by michael kennedy | developmentor | @mkennedy ... · rich forms with asp.net mvc by michael...

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!

http://twitter.com/mkennedy

http://www.michaelckennedy.net

Learn more at http://story.learninglineapp.com

What's your experience with MVC?

Free for DevWeek attendees: http://bit.ly/ll-kennedy

Make way for the demos

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

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



1

23

4Free for DevWeek attendees: http://bit.ly/ll-kennedy


http://en.wikipedia.org/wiki/Post/Redirect/Get





The project: Amazoon

The data model: Amazoon


TRACK 2Applied NoSQL in .NET16:00 today


Strongly-typed views

Demo - Part 1: Strongly-typed views

Time to upgrade Amazoon:

Amazoon needs a home page.


Visual Studio Resharper

Create your views the easy way


Let the scaffolding work for you (in the beginning)


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.



Time to upgrade Amazoon:

Amazoon needs an admin section where we can create categories and books.

(naive-style of models)



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?


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


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)


This is fine for 4 properties, what about for 20?

Keeping models and ViewModels in sync isn't fun


Automapper to the rescue.

Keeping models and ViewModels in sync isn't fun


Three steps to enable client-side validation.

Client-side validation


More data validation choices

http://blog.michaelckennedy.net/2013/01/15/3-open-source-validation-projects-for-asp-net-mvc/




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.


Who do you trust?


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


http://www.microsoft.com/mspress/books/sampchap/5957.aspx

http://www.microsoft.com/mspress/books/sampchap/5957.aspx

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/




Adding rich and safe content editing.

Markdown and MarkDownDeep let you accept rich input without the risk.


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


http://bit.ly/sanderson-spa

Fully client-side MVC applications




* 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.


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


Take this talk as a course on LearningLine


Take this class for free with this code http://bit.ly/ll-kennedy

http://bit.ly/ll-kennedy

Thanks for coming!


STAY IN TOUCH

Blog: blog.michaelckennedy.net

Twitter: @mkennedy

Google+: http://bit.ly/kennedy-plus

http://blog.michaelckennedy.net

http://twitter.com/mkennedy

http://bit.ly/kennedy-plus

by michael kennedy | developmentor | @mkennedy ... · rich forms with asp.net mvc by michael...

Documents