- Getting Familiar with Our HTML Form 6:13
- HTML Forms Review 5 questions
- Handling a Form Post 3:41
- Using Model Binding to Capture POST Data 8:34
- Adding a POST Action Method 1 objective
- Working with Non-String Data 6:21
- Invalid Values and ModelState 5:13
- Creating Forms Using the HTML Helpers 6:43
- Using HTML Helpers 3 objectives
- Using Our Models 5:11
- Completing Our Model Related Updates 6:23
- Using Strongly Typed HTML Helpers 3 objectives
- Redirecting Back to the List Page 7:12
- Redirecting to an Action 1 objective
- Section Review 5 questions
Preview
Video Player
00:00
00:00
Invalid Values and ModelState
5:13Let’s see how to update our app so that it can handle invalid values.
Let's face it, life isn't perfect, and
0:00
neither will our form field
values be perfect, far from it.
0:03
Our app needs to be able
to handle invalid values.
0:07
Press F5 to start the app and
browse to the Add Entry page.
0:10
What happens when we supply
an invalid value for the date field?
0:15
I'll enter ASDF, and save the form.
0:20
Here in the Locals window,
we can see that the day parameter is null.
0:24
This makes sense though
the MPC model binder
0:33
wasn't able to convert the text
ASDF to a date time value.
0:36
Ideally, we display a message
back to the user asking,
0:41
asking them to provide a valid value for
the date field.
0:44
We'll see how to do this
in the later video.
0:48
For now, let's figure out how to redisplay
the invalid value back to the user.
0:50
If we look at the request form value,
we can see the value that we provided.
0:56
So, we could use the request form property
to get the provided value when it's
1:01
invalid but, just like the last time
we considered using the request object,
1:06
NVC provides a better way,
the controller's model state property.
1:11
The model state contains a collection of
the name value pairs that were posted
1:15
to the server along with a collection of
error messages for each value submitted.
1:19
Here is a collection of the keys
that together represent our model,
1:24
and here's a collection of the values.
1:28
Each key is defined by the intersection
of our action methods parameter names and
1:37
the posted form field names.
1:43
We can add a key to ModelState by adding a
parameter to our action methods parameter
1:45
list, provided that the posted form data
also contains a field with the same name.
1:50
Removing a key from ModelState is
as simple as removing the parameter
1:56
from the action method parameter list,
or removing the field from the view.
1:59
Each value is actually a ModelState object
that contains errors in value properties.
2:04
The errors property is a collection
allowing each value to have one or
2:10
more errors.
2:15
We can see that the first element,
which is the value for
2:16
the date field, has one error.
2:19
The parameter conversion from type system
string to type system date time failed.
2:21
If we expand the value property,
we can see that it in turn
2:27
contains an AttemptedValue property
that contains our invalid value.
2:31
We can use the AttemptedValue properties
instead of our parameters for
2:35
the values that we flow back to the form.
2:39
ModelState[''] .value.AttemptedValue,
2:47
then copy and paste this code down to
2:54
each of our view bag properties.
2:59
Then go back and
fill in the ModelState keys.
3:16
Date.
3:23
Activity ID.
3:24
Duration.
3:29
Intensity.
3:32
Exclude.
3:36
And notes.
3:41
Let's test our form again.
3:44
If I enter 1/1/2016 for
the date, and save the form
3:50
We can see in the Locals window, that
the date parameter has the correct day
3:57
time value, and the view bag date property
has the original form field value.
4:02
So far so good.
4:08
Now let's enter ASDF, and save the form.
4:09
The day parameter value is now null, but
4:16
the view bag day property still
contains the original form field value.
4:19
Success.
4:25
Go ahead and stop the app.
4:27
If you're using GitHub,
let's commit our changes.
4:30
[Blank Audio] Enter a commit message of,
4:33
Updated the EntriesController Add
4:40
method to handle invalid values,
and click the Commit All button.
4:46
So while we came up with a solution for
handling invalid form field values,
4:56
we're having to do a lot of manual
lifting, which is not ideal.
5:01
We don't want to write all of
this code if we don't have to.
5:05
Right?
5:09
In the next video,
we'll see how NVC can help.
5:10