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