Auto Adjust height of multiline editor for in MVC using bootstrap - twitter-bootstrap-3

Question

I have below editorfor which is multiline, I need to auto adjust height when user starts adding multiple email address in separate lines using bootstrap. Any code example is highly appreciated.
Model:
[DataType(DataType.MultilineText)]
public string AdditionalEmailAddressesText { get; set; }
View:
<div class="form-group">
#Html.LabelFor(m => m.AdditionalEmailAddressesText, new { #class = "col-sm-2 control-label" })
<div class="col-sm-10">
#Html.EditorFor(m => m.AdditionalEmailAddressesText, new { htmlAttributes = new { #class = "form-control", placeholder = #Strings.Porting_AdditionalEmailAddressesSubtext } })
#Html.ValidationMessageFor(m => m.AdditionalEmailAddressesText)
</div>
</div>

Answer 1

For textarea tag, there's no auto-height attribute to make it adjust the height automatically. And for the [DataType(DataType.MultilineText)] annotation, it doesn't provide feature for setting rows and colums as well. So you have to write script code to add oninput event listener to change the style.
#model NewEvent
<h1>#ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
<div class="form-group">
#Html.LabelFor(m => m.Body, new { #class = "col-sm-2 control-label" })
<div class="col-sm-10">
#Html.EditorFor(m => m.Body, new { htmlAttributes = new { #class = "form-control", placeholder = "placeholder" } })
#Html.TextAreaFor(model => model.Body, new {cols = 2, rows = 5})
#Html.ValidationMessageFor(m => m.Body)
</div>
</div>
#section scripts {
<script>
$("#Body").each(function () {
this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
this.style.height = "auto";
this.style.height = (this.scrollHeight) + "px";
});
</script>
}