IHtmlHelper.BeginForm on .NET Core v3

When creating web forms in ASP.NET MVC, using the HtmlHelper class in the namespace System.Web.Mvc. In the ASP.NET Core MVC provide IHtmlHelper in Microsoft.AspNetCore.Mvc.Rendering namespaces. So, it describe the IHtmlHelper.BeginForm.

Introduction

These aren't different between HtmlHelper and IHtmlHelper from a user's perspective. The usage is almost the same.

Example 1

CSHTML:

1
2
3
4
5
@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post))
{
    @Html.Label("item", "item")
    @Html.TextBox("item", "value")
}

HTML:

1
2
3
4
5
<form action="/ControllerName/ActionName" method="post">
  <label for="item">item</label>
  <input id="item" name="item" type="text" value="value">
  <input name="__RequestVerificationToken" type="hidden" value="foo-foo-foo">
</form>

<input>, DOM interface: HTMLInputElement

The <input> has the type attribute that could set various value.

The available types are as follows:

  1. button

  2. checkbox

  3. color

  4. date

  5. datetime-local

  6. email

  7. file

  8. hidden

  9. image

  10. month

  11. number

  12. password

  13. radio

  14. range

  15. reset

  16. search

  17. submit

  18. tel

  19. text

  20. time

  21. url

  22. week

Still, it probably the most frequently encountered the following.

  1. button

  2. checkbox

  3. email

  4. file

  5. hidden

  6. number

  7. password

  8. radio

  9. reset

  10. submit

  11. tel

  12. text

Example 2

Based on the above, I created an HTML form.

Image:

./images/figure_01.gif

CSHTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@using (Html.BeginForm("Entry", "Home", FormMethod.Post))
{
    @Html.Label("Name", "Name")
    @Html.TextBox("Name", "John", new { @required = "required" })
    <br />
    @Html.Label("Email", "Email")
    @Html.TextBox("Email", "john@example.com", new { @type = "email", @multiple = "multiple", @minlength = 3, @maxlength = 128, @pattern = ".+@example.com", @title = "example.com のメールアドレスを入力します。" })
    <fieldset>
        <legend>Animals:</legend>
        @Html.TextBox("Animal-Item-1", "true", new { @type = "checkbox", @id = "Animal-Item-1", @value = "Bird", @checked = "checked" })
        @Html.Label("Animal-Item-1", "Bird")
        @Html.CheckBox("Dog", true, new { @id = "Animal-Item-2" })
        @Html.Label("Animal-Item-2", "Dog")
        @Html.CheckBox("Cat", true, new { @id = "Animal-Item-3" })
        @Html.Label("Animal-Item-3", "Cat")
    </fieldset>
    @Html.Label("File", "File")
    @Html.TextBox("File", "", new { @type = "file" })
    <br />
    @Html.Label("Number", "Number")
    @Html.TextBox("Number", "100", new { @type = "number", @step = "10" })
    <br />
    @Html.Label("Password1", "Password1 (10 charcaters minimum)")
    @Html.TextBox("Password1", "", new { @type = "password", @required = "required", @minlength = 12, @maxlength = 32, @placeholder = "password1" })
    <br />
    @Html.Label("Password2", "Password2 (12 charcaters minimum)")
    @Html.Password("Password2", "", new { @type = "password", @required = "required", @minlength = 12, @maxlength = 32, @placeholder = "password2" })
    <br />
    <fieldset>
        <legend>Device:</legend>
        @Html.TextBox("Device", "None", new { @type = "radio", @id = "Device-Value-1", @checked = true })
        @Html.Label("Device", "None")
        <br />
        @Html.TextBox("Device", "MacBook Air", new { @type = "radio", @id = "Device-Value-1" })
        @Html.Label("Device", "MacBook Air")
        <br />
        @Html.TextBox("Device", "MacBook Pro", new { @type = "radio", @id = "Device-Value-2" })
        @Html.Label("Device", "MacBook Pro")
        <br />
        @Html.TextBox("Device", "Mac mini", new { @type = "radio", @id = "Device-Value-3" })
        @Html.Label("Device", "Mac mini")
        <br />
        @Html.TextBox("Device", "iMac", new { @type = "radio", @id = "Device-Value-4" })
        @Html.Label("Device", "iMac")
        <br />
        @Html.TextBox("Device", "iMac Pro", new { type = "radio", id = "Device-Value-5" })
        @Html.Label("Device", "iMac Pro")
        <br />
        @Html.TextBox("Device", "Mac Pro", new { type = "radio", id = "Device-Value-6" })
        @Html.Label("Device", "Mac Pro")
    </fieldset>
    <fieldset>
        <legend>Web Browser:</legend>
        @Html.RadioButton("WebBrowser", "Edge", true, new { @id = "WebBrowser-Value-1" })
        @Html.Label("WebBrowser", "Edge")
        <br />
        @Html.RadioButton("WebBrowser", "Safari", new { @id = "WebBrowser-Value-2" })
        @Html.Label("WebBrowser", "Safari")
    </fieldset>
    @Html.Label("PhoneNumber", "Phone number")
    @Html.TextBox("PhoneNumber", "000-0000-0000", new { @type = "tel", @minlength = 3, @maxlength = 128, @pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" })
    <br />
    @Html.TextBox("item-8", "Button", new { @type = "button" })
    <br />
    @Html.TextBox("Submit", "Send", new { @type = "submit" })
    <br />
    @Html.TextBox("Reset", "Reset", new { @type = "reset" })
    <br />
    @Html.TextBox("Hidden-Item-1", "Hidden-Value-1", new { @type = "hidden" })
    @Html.Hidden("Hidden-Item-2", "Hidden-Value-2")
}

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<form action="/Home/Entry" method="post">
  <label for="Name">Name</label>
  <input id="Name" name="Name" required="required" type="text" value="John">
  <br>
  <label for="Email">Email</label>
  <input id="Email" maxlength="128" minlength="3" multiple="multiple" name="Email" pattern=".+@example.com" title="example.com のメールアドレスを入力します。" type="email" value="john@example.com">
  <fieldset>
    <legend>Animals:</legend>
	<input checked="checked" id="Animal-Item-1" name="Animal-Item-1" type="checkbox" value="true">
    <label for="Animal-Item-1">Bird</label>
    <input checked="checked" id="Animal-Item-1" name="Dog" type="checkbox" value="true">
    <label for="Animal-Item-2">Dog</label>
    <input checked="checked" id="Animal-Item-2" name="Cat" type="checkbox" value="true">
    <label for="Animal-Item-3">Cat</label>
  </fieldset>
  <label for="File">File</label><input id="File" name="File" type="file">
  <br>
  <label for="Number">Number</label><input id="Number" name="Number" step="10" type="number" value="100">
  <br>
  <label for="Password1">Password1 (12 charcaters minimum)</label>
  <input id="Password1" maxlength="32" minlength="12" name="Password1" placeholder="password1" required="required" type="password" value="">
  <br>
  <label for="Password2">Password2 (12 charcaters minimum)</label>
  <input id="Password2" maxlength="32" minlength="12" name="Password2" placeholder="password2" required="required" type="password" value="">
  <br>
  <fieldset>
    <legend>Device:</legend>
    <input checked="True" id="Device-Value-1" name="Device" type="radio" value="None">
    <label for="Device">None</label>
    <br>
    <input id="Device-Value-1" name="Device" type="radio" value="MacBook Air">
    <label for="Device">MacBook Air</label>
    <br>
    <input id="Device-Value-2" name="Device" type="radio" value="MacBook Pro">
    <label for="Device">MacBook Pro</label>
    <br>
    <input id="Device-Value-3" name="Device" type="radio" value="Mac mini">
    <label for="Device">Mac mini</label>
    <br>
    <input id="Device-Value-4" name="Device" type="radio" value="iMac">
    <label for="Device">iMac</label>
    <br>
    <input id="Device-Value-5" name="Device" type="radio" value="iMac Pro">
    <label for="Device">iMac Pro</label>
    <br>
    <input id="Device-Value-6" name="Device" type="radio" value="Mac Pro">
    <label for="Device">Mac Pro</label>
  </fieldset>
  <fieldset>
    <legend>Web Browser:</legend>
    <input checked="checked" id="WebBrowser-Value-1" name="WebBrowser" type="radio" value="Edge">
    <label for="WebBrowser">Edge</label>
    <br>
    <input id="WebBrowser-Value-2" name="WebBrowser" type="radio" value="Safari">
    <label for="WebBrowser">Safari</label>
  </fieldset>
  <label for="PhoneNumber">Phone number</label>
  <input id="PhoneNumber" maxlength="128" minlength="3" name="PhoneNumber" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" type="tel" value="000-0000-0000">
  <br>
  <input id="item-8" name="item-8" type="button" value="Button">
  <br>
  <input id="Submit" name="Submit" type="submit" value="Send">
  <br>
  <input id="Reset" name="Reset" type="reset" value="Reset">
  <br>
  <input id="Hidden-Item-1" name="Hidden-Item-1" type="hidden" value="Hidden-Value-1">
  <input id="Hidden-Item-2" name="Hidden-Item-2" type="hidden" value="Hidden-Value-2">
  <input name="__RequestVerificationToken" type="hidden" value="CfDJ8HdfQnw02XdOqapkMU2ywGqJFwwjoMnYW9Ss3AKZwQI2l4HrovfqWz7rsjMLyooXp55kBdaEwW1Ol3xBWxXO7OdniwXii4c_KneoR9ZSaSwM9v_41iRu_eWnvBfZE0VvV7ZwWLi0fjfe_ZGS9I42eAg">
  <input name="Dog" type="hidden" value="false">
  <input name="Cat" type="hidden" value="false">
</form>

Conclusion

Due to time constraints, this post didn't talk about that @Html.LabelFor, @Html.TextBoxFor and etc… at all. I would like to do it next time.

References

  1. Microsoft Docs - IHtmlHelper

  2. Microsoft Docs - HtmlHelper

  3. MDN - <input>: The Input (Form Input) element

  4. MDN - <label>