This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

ASP.NET MVC Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating Forms Using the HTML Helpers

6:43 with James Churchill

Let’s see how we can leverage MVC’s HTML helper methods to create our form.

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.6 -b creating-forms-using-the-html-helpers

Using the Value HTML Helper Method

As an alternative to using the TextBox and TextArea HTML helper methods to render our form fields, we could continue to manually write out the markup for the <input> and <textarea> elements and use the Value HTML helper method to set the element values.

If we used this approach, the “Date” field’s <input> element would look like this.

<input type="text" id="Date" name="Date" class="form-control" value="@Html.Value("Date")" />

And the “Notes” field’s <textarea> element would look like this.

<textarea id="Notes" name="Notes" class="form-control" rows="14" cols="20">
    @Html.Value("Notes")
</textarea>

The Value HTML helper method internally uses ModelState to ensure that the user’s provided values are properly preserved. While this approach works fine, in the video I opted to use the most commonly used approach, which is to render the entire element using an HTML helper method.

Additional Learning

For more information about the C# using statement, see this page on the MSDN website.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    We're currently doing a lot of manual work to create our form and 0:00
    to manage our form's post data. 0:05
    Let's see how MVC could make our lives easier. 0:07
    Here's our view for the Add Entry page. 0:10
    To start with, 0:12
    we can use MVC's begin form HTML helper method to render the form element. 0:14
    Forms have both an opening and closing element, and 0:19
    MVC gives us a convenient way to ensure that the closing element is rendered. 0:22
    We just need to wrap the call to the begin form method in a using statement. 0:28
    @using parentheses, followed by a set of curly braces. 0:32
    Then, inside of the parentheses, html.BeginForm. 0:39
    Then we can cut and 0:44
    paste our form content in between our using statement's curly braces. 0:45
    And remove our old form element. 0:53
    Typically, the using statement is used with unmanaged resources 0:57
    to ensure that they're properly released and cleaned up. 1:01
    Used in this context, the using statement is being used to ensure that the closing 1:04
    form element is rendered after all of the form's content is rendered. 1:08
    See the teacher's notes for more information about the using statement. 1:13
    Now let's work on the heart of our form, our form fields. 1:17
    To render a label element, we can use the Label HTML helper method. 1:22
    The Label method requires that we supply the name of the property 1:29
    to render a label for. 1:33
    For the date field, we just need to supply the string, Date. 1:35
    Our label element also needs a CSS class. 1:39
    So we'll use the second method, overload, 1:42
    which allows us to pass in an anonymous object for the label's HTML attributes. 1:45
    Remember, we need to prefix the class property with an @ symbol 2:00
    as the word class is a reserved keyword in C#. 2:05
    To render an input element of type text, we can use the TextBox HTML helper method. 2:08
    The first parameter is the name of our field, which again is the string date. 2:14
    The second parameter is the value for the field. 2:20
    We're going to pass null, 2:25
    which will cause the helper method to use model state to get the field value. 2:26
    And lastly, we'll pass an anonymous object to set the CSS class to form-control. 2:30
    Before we test our changes, let's go ahead and update the remaining fields. 2:46
    I'll copy and paste the date field contents to the activity field. 2:50
    Remove the key values. 2:55
    Then copy and paste that code to the other fields, including the notes field. 2:59
    Removing the key values before we replace the other fields reduces the amount of 3:13
    typing that we need to do and helps ensure that we don't get sloppy and 3:17
    forget the change of field name. 3:21
    Now let's fill in the missing values. 3:24
    ActivityId. 3:27
    Duration. 3:36
    Intensity. 3:45
    And exclude. 3:52
    For the Notes field, we can render the label like we did for the other fields. 3:56
    But for the text area element, we need to use the TextArea HTML helper method. 4:01
    Change the TextBox method name to TextArea, 4:10
    And add the rows and columns parameter values just after the second parameter. 4:17
    That leaves just the button element. 4:31
    There's not an HTML helper method to render buttons, 4:33
    so we'll just leave it as it is. 4:36
    All in all, these changes really didn't remove much code, yet. 4:39
    We've got one more change to make. 4:44
    Now that we're using the MVC HTML helper methods to render our form elements, 4:46
    we can remove code from the controller's Add method. 4:51
    All of this code that we needed to flow the user-provided values back to our 5:00
    form can be removed. 5:05
    We can do this because the HTML helper methods 5:08
    that we're using to render our form field input or text area elements 5:11
    internally use ModelState to get the user's attempted values. 5:16
    This is a huge time saver. 5:20
    Now, let's test our updates by pressing F5 to run our app. 5:23
    I'll enter a value for each field. 5:32
    1/1/2016, 1, 23, 5:36
    Low, False, and, This is my note. 5:41
    And save the form. 5:49
    Here at our break point in the Add method, we can see in the Locals window that all 5:54
    of the method parameters have the correct values. 5:58
    Let's continue by pressing F5. 6:01
    We're back at our form and all of our values have been correctly redisplayed. 6:05
    Nice. 6:09
    Go ahead and stop the app. 6:11
    If you're using GitHub, let's commit our changes. 6:14
    Enter a commit message of, 6:19
    Updated the Add Entry view to use HTML helper methods. 6:23
    And click the Commit All button. 6:30
    Next, we'll take our controller and view one step further towards the ideal 6:34
    approach by updating both to use our entry data model. 6:39

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up