- 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
Using Model Binding to Capture POST Data
8:34Now we’re ready to capture the request POST data.
We just added an action method to process
form post for the Entries/Add path.
0:00
Now we're ready to capture
the request post data.
0:06
Make sure that you've got a breakpoint
in the AddPost action method like you
0:09
see here.
0:14
Press F5 to start the app.
0:14
Then browse to the Add Entry page.
0:17
Enter 1/1/2016 for the date field
value and click the Save button.
0:22
And now we're at our breakpoint.
0:31
Let's see if we can find the request
form data in the Autos window.
0:34
I'll make the window a little larger.
0:37
If we expand this, and Request,
0:42
we can see that it has
a property named Form.
0:49
And to the right in the value column,
we can see our form data.
0:53
Let's go ahead and stop the app.
0:57
The Request Form property can be used
to extract our form values like this.
1:00
string date = Request.Form,
1:04
a pair of brackets, and the string Date.
1:10
This approach is similar to how we index
into an array to get a reference to
1:18
a specific element.
1:22
But instead of using a number for
the index, we use a string that
1:24
matches the form field name we
want to retrieve the value for.
1:28
This line of code just extracts
the date form field value.
1:34
We'd need to repeat this line of code for
each form field..
1:39
ActivityId, Duration,
1:45
Intensity, Exclude and Notes.
1:52
Repeating this line of code for
each form field would get ugly real fast.
2:01
Luckily, MVC provides us with a much
better way of capturing our form data.
2:06
We can simply define method parameters for
each form field value we need to capture.
2:11
string date, for the date field.
2:18
string activityId, for the activity field.
2:22
string duration, for the duration field.
2:28
string intensity, for the intensity field.
2:33
string exclude, for the exclude field.
2:38
And lastly, string notes,
for the notes field.
2:41
Also, now that we've added
parameters to our method, we
2:45
can change the name of the method back to
Add, and remove the ActionName attribute.
2:48
This is possible because
our method signature
2:56
now differs from the other Add method.
2:58
Let's run our app again and
see how this works.
3:01
I'll enter the values 1/1/2016,
3:06
1 for Activity, 23 for Duration, Low for
3:10
Intensity, and
leave Exclude and Notes blank.
3:15
Then click the Save
button to post the form.
3:20
Okay, here we are at our breakpoint again.
3:25
In the Autos window, we can see that
the date, activity, duration and
3:28
intensity parameters all contain
the values that we provided in the form.
3:34
How does this work?
3:39
At a high level, when MVC has rendered
a request to an action method,
3:41
it looks at that method's parameters.
3:45
And attempts to set their values by
looking for request form fields,
3:47
route data or request query string
parameters with the same names.
3:50
This process, which is an important
part of MVC is called model binding.
3:56
The part of MVC that's responsible for
4:01
model binding is known
as the model binder.
4:03
If you'd like to learn more
about how model binding works,
4:07
see the teacher's notes for
links to additional resources.
4:10
Go ahead and press F5 to continue.
4:14
Notice that when the form is re-displayed,
we're losing our values that we provided.
4:16
Why is this a problem?
4:22
Well, sometimes it's necessary to
re-display the form back to the user.
4:23
For instance, if the user doesn't
supply all the required values,
4:28
we'd want to re-display
the form along with a message
4:32
asking the user to provide
the missing values.
4:36
This is called form validation.
4:39
We'll see how to implement form
validation later in this course.
4:41
For now, let's use ViewBag to flow our
parameter values back to our form.
4:49
ViewBag.Date = date.
4:55
ViewBag.ActivityId = activityId.
5:03
ViewBag.Duration = duration.
5:11
ViewBag.Intensity = intensity.
5:17
ViewBag.Exclude = exclude.
5:24
ViewBag.Notes = notes.
5:31
Then, in our View, we need to set
the input element value attributes to
5:39
the corresponding ViewBag property values.
5:43
value= @ViewBag.Date.
5:46
Value= @ViewBag.ActivityId.
6:01
Value= @ViewBag.Duration.
6:15
Value= @ViewBag.Intensity.
6:29
Value= @ViewBag.Exclude.
6:41
And then, for the text area element,
6:47
Just set its inner content to
the ViewBag Notes property value.
6:53
Let's test our app again.
7:07
This time, let's provide a value for
7:10
every field to ensure that
they all persist correctly.
7:14
Date, Activity, Duration,
7:18
Intensity, Exclude, and then Notes.
7:22
Then click Save.
7:31
Here's our breakpoint again.
7:40
Press F5 to continue, and
here's all of our values.
7:42
Go ahead and stop the app.
7:49
If you're using GitHub,
let's commit our changes.
7:52
Enter a commit message of Updated the Add
7:55
action method to capture POST data,
8:00
and click the Commit All button.
8:05
As we were fixing the flow
of values to our form,
8:11
you were probably getting the feeling
there's a better way to do this.
8:14
And, you're right, of course.
8:18
But don't worry,
by the end of this section,
8:21
we'll have all of
the necessary pieces in place.
8:24
So we don't have to do
these kinds of workarounds.
8:26
In the next video, we'll continue
to improve our Add action method.
8:30