Using Model Binding to Capture 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