Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s see how to update our app so that it can handle invalid values.
Follow Along
To follow along commiting your changes to this course, you'll need to fork the aspnet-fitness-frog repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork>
cd aspnet-fitness-frog
git checkout tags/v2.5 -b invalid-values-and-modelstate
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
You need to sign up for Treehouse in order to download course files.
Sign up