Html.TextArea generates extra line break by default

Question

I'm rendering a usual textarea like this:

@Html.TextAreaFor(x => x.Description)

I expected to see an empty textarea but here is what I see instead (I selected the first line to make it more clear):

enter image description here

I checked out the generated html and it contains a line break between an opening and closing tags:

<textarea class="form-control" cols="20" id="Description" name="Description" rows="2">
</textarea>

Is that done by design? Can I change this behaviour?

I think the only way you could achieve that is if the value of `Description` is `Environment.NewLine` ("\r\n") — , Nov 12 '14 at 22:56

score 6 · Accepted Answer · edited May 23 '17 at 12:22

After saw your question, I research on Google to see what is the issue behind extra line in @Html.TextAreaFor. Have a look.

There are some articles those are related to your issue:-

http://www.peschuster.de/2011/11/new-line-bug-in-asp-net-mvcs-textarea-helper/

ASP.NET MVC Textarea HTML helper adding lines when using AntiXssLibrary

Articles suggested that basic issue in TextAreaHelper class which is used by @Html.TextAreaFor.

private static MvcHtmlString TextAreaHelper(HtmlHelper htmlHelper, 
        ModelMetadata modelMetadata, string name, IDictionary<string, 
        object> rowsAndColumns, IDictionary<string, object> htmlAttributes)
{
    // Some initialization here...

    TagBuilder tagBuilder = new TagBuilder("textarea");

    // Some more logic...

    tagBuilder.SetInnerText(Environment.NewLine + attemptedValue);
    return tagBuilder.ToMvcHtmlString(TagRenderMode.Normal);
}

and the issue in above code is

tagBuilder.SetInnerText(Environment.NewLine + attemptedValue);

That's why actual output of @Html.TextAreaFor will be like this and extra line shows up:-

<textarea>&#13;&#10;This is the content...</textarea>

The workaround of this problem is to

1st Workaround Implementing a Javascript onLoad fix to remove the offending encoding from all textareas:

$("textarea").each(function () { $(this).val($(this).val().trim()); });

2nd Workaround create your own helper for rendering textarea markup in views

public static MvcHtmlString FixedTextAreaFor<TModel, TProperty>(
  this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
    return new MvcHtmlString(htmlHelper.TextAreaFor(expression)
        .ToHtmlString()
        .Replace(">&#13;&#10;", ">" + Environment.NewLine));
}

These articles also suggested that this problem will be fixed in MVC 4 Developer Preview!

I would not recommend using trim as a workaround. This would also remove any whitespaces that were intented to be displayed. $("textarea").each(function () { $(this).val($(this).val().substr(1))); }); will only remove the first newline char — Rob, Feb 10 '15 at 10:25
@Rob while the accepted answer may remove intentional whitespace(s), your alteration could possibly remove an alphabetical character. To target the first newline, I'd recommend using REGEX `$("textarea").each(function () {$(this).val($(this).val().replace(/\n/, ''));});` — Mr.Z, Aug 11 '16 at 21:36
@Mr.Z, you won't have to worry about removing an alphabetical character, the bugged TextArea always inserts a newline as first char. Therefore I would still recommend my solution since it's simpler and more performant. — Rob, Aug 12 '16 at 06:21
There are some useful comments on this page if you happen to be using webforms. Particularly with regard to the controlRenderingCompatibilityVersion property for in the web.config http://protection976.rssing.com/chan-6501402/all_p2.html — Stuart, Feb 09 '18 at 09:24

Html.TextArea generates extra line break by default

1 Answers1