Typically, a GET request displays the HTML form and the POST request validates and processed the submitted data. To make this work most effectively, we create two action methods with the same name, like this:
public class SomeController : Controller { public ViewResult MyAction() { /* Displays the form */
}
[HttpPost]
public ActionResult MyAction(MyModel incomingData) { /* Handles the POST */
} }
The HttpPost attribute is an action method selector, which we explained in Chapter 14. The process by which the MVC framework takes the data items from the submitted form and generates the MyModel object (or our project equivalent) is explained in Chapter 17.
Using Input Helpers
An HTML form is no use unless we also create some input elements. Table 4 shows the basic HTML helpers that are available to create input elements.
Table 4. The basic input HTML helpers HTML
Ele ment
Example
Check box Html.CheckBox("myCheckbox", false) Output:
<input id="myCheckbox" name="myCheckbox" type="checkbox" value="true" />
<input name="myCheckbox" type="hidden" value="false" />
Hidden field Html.Hidden("myHidden", "val")
Output: <input id="myHidden" name="myHidden" type="hidden" value="val" />
Radio button Html.RadioButton("myRadiobutton", "val", true)
Output: <input checked="checked" id="myRadiobutton" name="myRadiobutton" type="radio"
value="val" />
Password Html.Password("myPassword", "val")
Output: <input id="myPassword" name="myPassword" type="password" value="val" />
Text area Html.TextArea("myTextarea", "val", 5, 20, null)
Output: <textarea cols="20" id="myTextarea" name="myTextarea" rows="5">
val</textarea>
Text box Html.TextBox("myTextbox", "val")
Output: <input id="myTextbox" name="myTextbox" type="text" value="val" />
Each of these helpers is overloaded. The simplest version is the one that we have shown in the table – the first parameter is used to set attribute values in the generated HTML, such as id and name. The second parameter is used to set the value attribute of the input element (or the inner content for the TextArea).
Tip Notice that the check box helper (Html.CheckBox) renders two input elements - it renders a check box and then a hidden input of the same name. This is because browsers don’t submit a value for checkboxes when they are not selected – having the hidden control ensures that the MVC framework will get a value from the hidden field when this happens.
If we want to specify a value, we can do so by using the standard Razor @ syntax, like this:
@Html.CheckBox("myCheckBox", Model)
A more interesting overload takes a single string argument, which is then used to search the view data, view bag and view model. So, for example, if we call
@Html.TextBox("DataValue"), then the MVC framework tries to find some item of data that corresponds with the key DataValue. The following locations are checked:
ViewBag.DataValue
ViewData["DataValue"]
@Model.DataValue
The first value that is found is used to set the value attribute of the generated HTML (the last check, for @Model.DataValue, only works if the view model for the view contains a property or field called DataValue).
If we specify a string like DataValue.First.Name, then the search becomes more complicated – the MVC framework will try different arrangements of the dot-separated elements:
ViewBag.DataValue.First.Name
ViewBag.DataValue["First"].Name
ViewBag.DataValue["First.Name"]
ViewBag.DataValue["First"]["Name"]
ViewData["DataValue.First.Name"]
ViewData["DataValue"].First.Name
ViewData["DataValue.First"].Name
and so on. There are lots of permutations that will be checked. Once again, the first value that is found will be used, terminating the search. There is an obvious performance consideration to this technique, but bear in mind that there are usually only a few items in the ViewBag and ViewData, so it doesn’t take much time to search through them.
Tip The input helpers automatically encode data values to make them safe to display. See the section on Understanding Razor HTML String Encoding earlier in this chapter for details of why this is
important.
Using Strongly-Typed Input Helpers
For each of the basic input helpers that we described in Table 4, there are corresponding strongly-typed helpers, which we can use in strongly-typed views. Table 5 shows the strongly- typed input helpers and samples of the HTML they generate – these helpers can only be used with strongly-typed views.
Table 5. The strongly-typed input HTML helpers
HTML Ele ment
Example
Check box Html.CheckBoxFor(x => x.IsApproved) Output:
<input id="IsApproved" name="IsApproved" type="checkbox" value="true" />
<input name="IsApproved" type="hidden" value="false" />
Hidden field Html.HiddenFor(x => x.SomeProperty)
Output: <input id="SomeProperty" name="SomeProperty" type="hidden" value="value" />
Radio button Html.RadioButtonFor(x => x.IsApproved, "val")
Output: <input id="IsApproved" name="IsApproved" type="radio" value="val" />
Password Html.PasswordFor(x => x.Password)
Output: <input id="Password" name="Password" type="password" />
Text area Html.TextAreaFor(x => x.Bio, 5, 20, new{})
Output: <textarea cols="20" id="Bio" name="Bio" rows="5">
Bio value</textarea>
Text box Html.TextBoxFor(x => x.Name)
Output: <input id="Name" name="Name" type="text" value="Name value" />
The strongly-typed input helpers work on lambda expressions – the value that is passed to the expression is the view model object and we can select the field of property that will be used to set the value attribute.