Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Invalid Values and ModelState

5:13 with James Churchill

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
  • 0:00

    Let's face it, life isn't perfect, and

  • 0:03

    neither will our form field values be perfect, far from it.

  • 0:07

    Our app needs to be able to handle invalid values.

  • 0:10

    Press F5 to start the app and browse to the Add Entry page.

  • 0:15

    What happens when we supply an invalid value for the date field?

  • 0:20

    I'll enter ASDF, and save the form.

  • 0:24

    Here in the Locals window, we can see that the day parameter is null.

  • 0:33

    This makes sense though the MPC model binder

  • 0:36

    wasn't able to convert the text ASDF to a date time value.

  • 0:41

    Ideally, we display a message back to the user asking,

  • 0:44

    asking them to provide a valid value for the date field.

  • 0:48

    We'll see how to do this in the later video.

  • 0:50

    For now, let's figure out how to redisplay the invalid value back to the user.

  • 0:56

    If we look at the request form value, we can see the value that we provided.

  • 1:01

    So, we could use the request form property to get the provided value when it's

  • 1:06

    invalid but, just like the last time we considered using the request object,

  • 1:11

    NVC provides a better way, the controller's model state property.

  • 1:15

    The model state contains a collection of the name value pairs that were posted

  • 1:19

    to the server along with a collection of error messages for each value submitted.

  • 1:24

    Here is a collection of the keys that together represent our model,

  • 1:28

    and here's a collection of the values.

  • 1:37

    Each key is defined by the intersection of our action methods parameter names and

  • 1:43

    the posted form field names.

  • 1:45

    We can add a key to ModelState by adding a parameter to our action methods parameter

  • 1:50

    list, provided that the posted form data also contains a field with the same name.

  • 1:56

    Removing a key from ModelState is as simple as removing the parameter

  • 1:59

    from the action method parameter list, or removing the field from the view.

  • 2:04

    Each value is actually a ModelState object that contains errors in value properties.

  • 2:10

    The errors property is a collection allowing each value to have one or

  • 2:15

    more errors.

  • 2:16

    We can see that the first element, which is the value for

  • 2:19

    the date field, has one error.

  • 2:21

    The parameter conversion from type system string to type system date time failed.

  • 2:27

    If we expand the value property, we can see that it in turn

  • 2:31

    contains an AttemptedValue property that contains our invalid value.

  • 2:35

    We can use the AttemptedValue properties instead of our parameters for

  • 2:39

    the values that we flow back to the form.

  • 2:47

    ModelState[''] .value.AttemptedValue,

  • 2:54

    then copy and paste this code down to

  • 2:59

    each of our view bag properties.

  • 3:16

    Then go back and fill in the ModelState keys.

  • 3:23

    Date.

  • 3:24

    Activity ID.

  • 3:29

    Duration.

  • 3:32

    Intensity.

  • 3:36

    Exclude.

  • 3:41

    And notes.

  • 3:44

    Let's test our form again.

  • 3:50

    If I enter 1/1/2016 for the date, and save the form

  • 3:57

    We can see in the Locals window, that the date parameter has the correct day

  • 4:02

    time value, and the view bag date property has the original form field value.

  • 4:08

    So far so good.

  • 4:09

    Now let's enter ASDF, and save the form.

  • 4:16

    The day parameter value is now null, but

  • 4:19

    the view bag day property still contains the original form field value.

  • 4:25

    Success.

  • 4:27

    Go ahead and stop the app.

  • 4:30

    If you're using GitHub, let's commit our changes.

  • 4:33

    [Blank Audio] Enter a commit message of,

  • 4:40

    Updated the EntriesController Add

  • 4:46

    method to handle invalid values, and click the Commit All button.

  • 4:56

    So while we came up with a solution for handling invalid form field values,

  • 5:01

    we're having to do a lot of manual lifting, which is not ideal.

  • 5:05

    We don't want to write all of this code if we don't have to.

  • 5:09

    Right?

  • 5:10

    In the next video, we'll see how NVC can help.

You need to sign up for Treehouse in order to download course files.

Sign up