MVC 4: Creating Form Elements

• by Samuele Resca

helper method

Input Helpers

La tabella mostra alcuni helpers method della classe HTML che permettono la generazione dei controlli comunemente utilizzati nei form:

  HTML Element   Code behind

Radio button

 Html.RadioButton(“myRadioButton”,”val”,true)HTML code:<input checked=”checked” id=”myRadioButton” name=”myRadioButton” type=”radio” value=”val”/>

Text area

Html.TextArea(“myTextArea”, “val” ,5,20,null)

HTML code:

<textarea cols=”20″ id=”myTextArea” name=”myTextArea” rows=”5″>val</textarea>

Text box

Html.TextBox(“myTextBox”, “val”)

HTML code:

<input id=”myTextBox” name=”myTextBox” type=”text” value=”val”/>

Hidden field

Html.Hidden(“myHidden”, “val”)

HTML code:

<input id=”myHidden” name=”myHidden” type=”hidden”  value=”val”/>

Checkbox

Html.CheckBox(“myCheckBox”, false)

HTML code:

<input id=”myCheckBox” name=”myCheckBox” type=”checkbox” value=”true”/><input name=”myCheckBox” type=”hidden” value=”false”/>

Password

Html.Password(“myPassword”,”val”)

HTML code:

<input id=”myPassword” name=”myPassword” type=”password” value=”val”/>

Strongly-typed input helpers

Per ogni helper method esiste un strongly-typed helper method che può essere utilizzato solo nelle Strongly-typed view. I metodi elencati generano automaticamente gli attributi necessari per  la client-side validation.

  HTML Element   Code behind

Radio button

 Html.RadioButtonFor(x=>x.IsApproved, “val”)HTML code:<input checked=”checked” id=”IsApproved” name=”IsApproved” type=”radio” value=”val”/>

Text area

Html.TextAreaFor(x=>x.Bio, “val” ,5,20,new{})

HTML code:

<textarea cols=”20″ id=”Bio” name=”Bio” rows=”5″>Bio value</textarea>

Text box

Html.TextBoxFor(x=>x.FirstName)

HTML code:

<input id=”FirstName” name=”FirstName” type=”text” value=””/>

Hidden field

Html.HiddenFor(x=>x.FirstName)

HTML code:

<input id=”FirstName” name=”FirstName” type=”hidden”  value=””/>

Checkbox

Html.CheckBoxFor(x=> x.IsApproved)

HTML code:

<input id=”IsApproved” name=”IsApproved” type=”checkbox” value=”true”/><input name=”IsApproved” type=”hidden” value=”false”/>

Password

Html.PasswordFor(x=>x.Password)

HTML code:

<input id=”Password” name=”Password” type=”password” value=”val”/>