Michael Kennedy@mkennedy

http://blog.michaelckennedy.net

Rich Forms with ASP.NET MVC

{SDD}2015

Software Design& Development

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

The  GET,  POST,  Redirect  Pattern

1

2

3

4

The  GET,  POST,  Redirect  Pattern

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

The  project:  THE  BOOK  STORE

The  data  model:  THE  BOOK  STORE

Strongly-­typed  views

BookController.cs

Demo  -­ Part  1:  Strongly-­typed  views

Time to upgrade THE BOOK STORE:

THE BOOK STORE needs a home page.

Visual Studio Resharper

Create  your  views  the  easy  way

Let  the  scaffolding  work  for  you  (in  the  beginning)

"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

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

Demo  -­ Part  2:  Forms,  Model  Binding,  and  Helpers

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?

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)

Demo  -­ Part  3:  View  Models  and  Validation

Demo  -­ Part  3:  View  Models  and  Validation

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

http://automapper.org/

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/

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

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.

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.

Demo  -­ Part  4:  Adding  Real  Usability  with  Client-­Side  Code

Demo  -­ Part  4:  Adding  Real  Usability  with  Client-­Side  Code

• 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

Conclusion

Thanks  for  coming!

STAY  IN  TOUCH

Blog:              blog.michaelckennedy.net

Twitter:        @mkennedy

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

GitHub:      github.com/mikeckennedy