I'm implementing Html.EditorForModel()
so that it's Bootstrap friendly. I have editor templates for all the data types, and one, Object.cshtml, that wraps each editor template with <div class="form-control"></div>
etc.
The issue is that when I have a property on a model that is marked as [ComplexType]
, I want to then list each property of the child class. This works fine, however, for [DataType(DataType.Upload)]
, which is an HttpPostedFileBase
data type, prop.IsComplexType
sees that as a complex data type and ends up listing its properties rather than rendering <input type="file" />
Here's Object.cshtml:
@model dynamic
@{
var modelMetaData = ViewData.ModelMetadata;
var properties = modelMetaData.Properties;
}
@foreach (var prop in properties.Where(p => p.ShowForEdit))
{
string propertyName = prop.PropertyName;
if (prop.TemplateHint == "HiddenInput")
{
@Html.Hidden(propertyName)
}
else
{
if (prop.IsComplexType)
{
<fieldset>
<legend>@propertyName</legend>
<div class="mt-ml-2em">
@foreach (var subProp in prop.Properties)
{
var propertyName1 = subProp.PropertyName;
string fullname = propertyName + "." + propertyName1;
<div class="form-group">
@Html.BootstrapLabel(propertyName1)
@Html.Editor(fullname, MyHelpers.TemplateHelpers.GetTemplateForProperty(subProp))
<p class="help-block">@subProp.Description</p>
@Html.ValidationMessage(fullname, new { @class = "color-red" })
</div>
}
</div>
</fieldset>
}
else
{
<div class="form-group">
@Html.BootstrapLabel(propertyName)
@Html.Editor(propertyName, MyHelpers.TemplateHelpers.GetTemplateForProperty(prop))
<p class="help-block">@prop.Description</p>
@Html.ValidationMessage(propertyName, new { @class = "color-red" })
</div>
}
}
}
My razor view:
@model MyMvc45Template.Areas.SampleTests.Models.Product
@{
ViewBag.Title = "ForModel";
}
@*<h2>BsFormGroupFor</h2>
@Html.BsFormGroupFor(m => m.ProductName)*@
<h2>For Model Test</h2>
@using (Html.BeginForm("ForModel", "FormTests", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.EditorForModel()
<div class="form-group">
<input type="submit" value="Save" class="btn btn-success" />
</div>
}
And my sample classes:
public class Product
{
public int Id { get; set; }
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
[HasChildProperties] //I am thinking I can use this custom ValidationAttribute as a flag in Object.cshtml
public Address Address { get; set; }
[DataType(DataType.PhoneNumber)]
public string Phone { get; set; }
[DataType(DataType.Upload)]
public HttpPostedFileBase File { get; set; }
[DataType(DataType.Url)]
public string Url { get; set; }
}
Address class:
[ComplexType]
public class Address
{
[Display(Description = "This is the help block text")]
public string Line1 { get; set; }
public string Line2 { get; set; }
public string City { get; set; }
}
And what the output looks like:
As the image shows, my File
property ends up having its members listed rather than rendering my Upload.cshtml
:
@model dynamic
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
new { @class = "form-control", placeholder = ViewData.ModelMetadata.Watermark,
type = "file" })
I was thinking I could use this ValidationAttribute as a flag in Object.cshtml
:
/// <summary>
/// This will make the editor template for Object.cshtml list any child properties in an edit form
/// </summary>
public class HasChildProperties : ValidationAttribute
{
}
But I can't find my custom ValidationAttribute
in the metadata. How can I access this attribute? Is there a more elegant solution?
I ended up using UIHint:
[UIHint("HasChildProperties")]
public Address Address { get; set; }
if (prop.TemplateHint == "HasChildProperties") {...}