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
Now we’re ready to capture the request POST data.
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.3 -b using-model-binding-to-capture-post-data
Additional Learning
For a detailed explanation of how ASP.NET MVC model binding works, see this MSDN Magazine article.
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
You need to sign up for Treehouse in order to download course files.
Sign up