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?

You don't need an EditorTemplate for such a simple thing. Why don't you just assign the class to a Html.TextBoxFor? — ataravati
– ataravati, Commented Apr 7, 2015 at 19:26

Yan F. · Accepted Answer · 2015-04-07 20:00:07Z

5

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).

edited Apr 7, 2015 at 20:00

answered Apr 7, 2015 at 19:32

Yan F.

1,6242 gold badges16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marnus Steyn Over a year ago

Wow this is great! Since I'm new to mvc this is really a helpful piece of code you shared here. Just one question, what is the placeholder you refer to, where in the markup does it get rendered?

ataravati · Accepted Answer · 2021-02-15 00:59:43Z

0

Instead of using an EditorTemplate for String, just use a TextBoxFor like this:

@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })

edited Feb 15, 2021 at 0:59

answered Apr 7, 2015 at 19:30

ataravati

9,1759 gold badges60 silver badges94 bronze badges

5 Comments

solidau Over a year ago

This is the correct answer, however I disagree with your analysis on why it is not a good idea to create an editor template for type String. I don't see anything wrong with having a default custom String editor template. If you need to have multiple editor templates for type String later down the road (for example, you want a <textbox> instead of <input type='text'>) then you can easily use [UIHint()] attribute to specify which template to use.

ataravati Over a year ago

Well, wouldn't it better to use [UIHint()] in cases when you need a custom template? I see your point, but I can't think of any real case scenario in which a default template for the type String is needed.

solidau Over a year ago

such as in this example, the person would be able to include the <div class="editor-field"> wrapper inside of the string editor template rather than typing/copy-paste the wrapper for each field.

Diego Frehner Over a year ago

I do not understand the the argumentation that the type string is too general for templates. To me it looks like a big benefit when i do not have to care to distinct between EditorFor and TextBoxFor and do not have to copy "form-control" everywhere. Could you further explain maybe?

ataravati Over a year ago

@DiegoFrehner If you want to use an EditorTemplate to add a class, you're absolutely right. I removed that from my answer.

Collectives™ on Stack Overflow

Creating EditorTemplate for string properties ASP.NET MVC4

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related