|
| 1 | +--- |
| 2 | +title: Hidden Fields |
| 3 | +page_title: Hidden Fields |
| 4 | +description: "Get started with the Telerik UI Form HtmlHelper for {{ site.framework }} and learn how to set hidden fields." |
| 5 | +slug: htmlhelpers_form_aspnetcore_hiddenfields |
| 6 | +position: 8 |
| 7 | +--- |
| 8 | + |
| 9 | +# Hidden Fields |
| 10 | + |
| 11 | +The Telerik ASP.NET {{ site.framework }} Form component provides built-in support for hidden fields. You can use this feature to perform a number of actions such as hiding the `ID` property. |
| 12 | + |
| 13 | +The following example demonstrates how to configure a Form with two visible and one hidden field (`UserID`). |
| 14 | + |
| 15 | +```Razor |
| 16 | + @(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.UserViewModel>() |
| 17 | + .Name("formExample") |
| 18 | + .HtmlAttributes(new { action = "Index", method = "POST" }) |
| 19 | + .Validatable(v => |
| 20 | + { |
| 21 | + v.ValidateOnBlur(true); |
| 22 | + v.ValidationSummary(vs => vs.Enable(false)); |
| 23 | + }) |
| 24 | + .Items(items => |
| 25 | + { |
| 26 | + items.AddGroup() |
| 27 | + .Label("Sign up form") |
| 28 | + .Items(i => |
| 29 | + { |
| 30 | + i.Add() |
| 31 | + .Field(f => f.UserID) |
| 32 | + .Editor(editor => editor.Hidden()); |
| 33 | + i.Add() |
| 34 | + .Field(f => f.UserName) |
| 35 | + .Label(l => l.Text("Username:")); |
| 36 | + i.Add() |
| 37 | + .Field(f => f.Password) |
| 38 | + .Label(l => l.Text("Password:")) |
| 39 | + .EditorTemplateHandler("setPasswordEditor"); |
| 40 | + i.Add() |
| 41 | + .Field(f => f.Email) |
| 42 | + .Label(l => l.Text("Email:")); |
| 43 | + }); |
| 44 | + }) |
| 45 | + ) |
| 46 | +``` |
| 47 | + |
| 48 | +To add support for the `HiddenInput` attribute, use the following implementation: |
| 49 | + |
| 50 | +```Model |
| 51 | + [HiddenInput] |
| 52 | + public int UserID |
| 53 | + { |
| 54 | + get; |
| 55 | + set; |
| 56 | + } |
| 57 | +``` |
| 58 | + |
| 59 | +```View |
| 60 | + @(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.UserViewModel>() |
| 61 | + .Name("formExample") |
| 62 | + .HtmlAttributes(new { action = "Index", method = "POST" }) |
| 63 | + .Items(items => |
| 64 | + { |
| 65 | + items.Add() |
| 66 | + .Field(model => model.UserID); |
| 67 | + }) |
| 68 | + ) |
| 69 | +``` |
| 70 | +{% if site.core %} |
| 71 | +To add a method for enabling the injection of the `AntiForgeryToken` input in: |
| 72 | + |
| 73 | +```Razor |
| 74 | + @(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.UserViewModel>() |
| 75 | + .Name("formExample") |
| 76 | + .HtmlAttributes(new { action = "Index", method = "POST" }) |
| 77 | + .Items(items => |
| 78 | + { |
| 79 | + items.AddAntiForgeryToken(Html.AntiForgeryToken()); |
| 80 | + }) |
| 81 | + ) |
| 82 | +``` |
| 83 | +{% else %} |
| 84 | +To add a method for enabling the injection of the `AntiForgeryToken` input in: |
| 85 | + |
| 86 | +```Razor |
| 87 | + @(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.UserViewModel>() |
| 88 | + .Name("formExample") |
| 89 | + .HtmlAttributes(new { action = "Index", method = "POST" }) |
| 90 | + .Items(items => |
| 91 | + { |
| 92 | + items.AddAntiForgeryToken(); |
| 93 | + }) |
| 94 | + ) |
| 95 | +``` |
| 96 | +{% endif %} |
| 97 | + |
| 98 | +## See Also |
| 99 | + |
| 100 | +* [Hidden Fields Demo of the Form HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/form/hidden-fields) |
| 101 | +* [Server-Side API](/api/form) |
0 commit comments