IHtmlHelper.BeginForm on .NET Core v3

March 13, 2021
Programming
.NET WEB

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.

当サイトでは利便性向上のために外部サービスにクッキー(Cookie)を送信します。
詳しくはプライバシーポリシーをご参照ください。