Creating EditorTemplate for string properties ASP.NET MVC4

Question

When I'm using the Html.EditorFor helper in my form, I wish to be able to customize the look of the tag and so I defined a EditorTemplate to be able to do just that. This is what my form looks like in my view :

@model Models.SimpleUserClass
@{
    ViewBag.Title = "Create User";
}

<div class="row">
    <div class="col-lg-6" id="FromPlaceHoler">

        @using (Html.BeginForm("CreateUser", "Users"))
        {

            <fieldset>
                <legend>Create One Way Trip</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.UserName)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserName)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.UserSurname)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserSurname)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.UserAge)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserAge)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.UserGender)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.UserGender)
                </div>

                <p>
                    <input type="submit" value="Create" />
                </p>
            </fieldset>
        }
    </div>
</div>

Properties like UserName and Surname are of type String, so in my Shared folder I Created the EditorTemplates folder and created a String.cshtml file to define the way a editor for a String should look like. When running a test of the form, it seems to be working well since the input fields that is generated has appearance that I specified - problem is when I submit a form using these custom input fields, mvc cannot map my form fields to my model. The reason for this is the properties that the tag needs to support this binding to models. Here follows an example:

Here is my code in the String.cshtml EditorTemplate :

<input type="text" class="form-control">

and when using the default EditorFor without customization it generates the following markup:

<input data-val="true" data-val-required="The User Name field is required." id="UserName" name="UserName" type="text" value="" />

As we can see above, my code does not have the 'id' and 'name' properties that correlate to the name of my properties in my class and which is used to bind values to my class. So how to I change the code in the String.cshtml to include these properties and set their values dynamically? since it should be used for various properties in my class?

Answer 1

You can use this:

@model string

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue,
                new
                {
                    @class = "form-control",
                    placeholder = ViewData.ModelMetadata.Watermark 
                                  ?? ViewData.ModelMetadata.DisplayName 
                                  ?? ViewData.ModelMetadata.PropertyName
                })

Remove placeholder, if you don't want it.

Re: placeholder, this is a hint to the user of what can be entered in the input. You can decorate your model properties with annotations:

[Display(Name = "Client")]
public int ClientId { get; set; }

[Display(Prompt = "Please enter mailing Name")]
public string MailingName { get; set; }

If you use something like this, then your inputs will have placeholder attribute with values taken from these annotations, in the order specified in the editor template (Prompt (watermark), Name, then name of the property).