I am trying to find me feet with MVC4 Razor and I'm stuck with this simple problem.
When I use @Html.DisplayFor the model is always sent back as NULL, but when I use @Html.TextBoxFor this model is fully populated, what am I missing?
Thanks in advance
This is a common issue that many people miss in the asp.net mvc framework. Not just the difference in the helpers such as HiddenFor
, DisplayFor
, TextBoxFor
- but how exactly the framework sets up automatically collecting and validating these inputs. The magic is all done with HTML5's data-* attributes. You will notice when looking at the input tag generated that there are going to be some extra properties in the form of data-val
, data-val-required
, and perhaps some additional data properties for types, for example numerics would be data-val-number
.
These data attributes allow the jQuery extension jquery.validate.unobtrusive.js
to parse the DOM and then decide which fields to validate or generate error messages.
The actual collection of posted data is reflected from the name
property. This is what should map up to the model that is in the c# or vb [HttpPost]
method.
Use HiddenFor
when you want to provide posted data that the user does not need to be aware of.
Use DisplayFor
when you want to show records but not allow them to be editted.
Use TextBoxFor
when you want to allow user input or allow the user to edit a field.
EDIT
"the purpose of this view is to enable the user to view the data before submitting it to the database. Any ideas how I can achieve this?"
You could accomplish this with a duo of HiddenFor
and DisplayFor
. Use HiddenFor
to have the values ready to be posted, and DisplayFor
to show those values.
DisplayFor
will not do the Model binding. TextBoxFor
will do because it creates a input
element in the form and the form can handle it when it is being posted. If you want to get some data in the HttpPost action and you dont want to use the TextBoxFor, you can keep that pirticulare model proeprty in a hidden variable inside the form using the HiddenFor
HTML helper method like this.
@using(Html.BeginForm())
{
<p>The Type Name is</p> @Html.DisplayFor(x=>x.TypeName)
@Html.HiddenFor(x=>x.TypeName)
<input type="submit" value="Save" />
}
Use both DisplayFor
and HiddenFor
. DisplayFor
simply displays the text and is not an input field, thus, it is not posted back. HiddenFor
actually creates <input type="hidden" value="xxxx"/>
DisplayFor
builds out a HTML label, not an input. Labels are not POSTed to the server, but inputs are.
Do you mean during a form post? If you use DisplayFor, this creates a element which does not contain any form values. Typically you use these in conjunction with each other to create a label for your textbox, then using the Html.TextBoxFor to allow users to modify the data element.
Example:
@Html.DisplayFor(x=>x.Item)
@Html.TextBoxFor(x=>x.Item)
Will Render
Item <a text input field following>
Or in HTML
<label for="Item">Item</label><input type="Text" id="Item" name="Item"/>
I know this is a bit of an old question but you can roll your own, custom combined display control as shown below. This renders the model value followed by a hidden field for that value
@Html.DisplayExFor(model => Model.ItemCode)
Simply use what the framework already has in place
public static MvcHtmlString DisplayExFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex)
{
var sb = new StringBuilder();
sb.Append(htmlHelper.DisplayFor(ex));
sb.Append(htmlHelper.HiddenFor(ex));
return MvcHtmlString.Create(sb.ToString());
}