Как сохранить перенос строки из Textarea?

Есть форма блога для поста: Название статьи и тело поста.

@using (Html.BeginForm("PostSave", "Account", FormMethod.Post))
{
    @Html.TextAreaFor(x => x.Headline, new { @id= "tw", cols = "40", rows = 
 "2" })
    <br />
    <br />
    @Html.TextAreaFor(x => x.BodyText, new { @id = "bw", cols = "40", rows = 
"10" })
    <br />
    <br />
    <input id="Submit1" class="btn btn-default" type="submit" value="Пост" />
}

Далее при нажатии кнопки вызывается метод в контроллере:

 public async Task<IActionResult> PostSave(Post model)
    {
        db2.Post.Add(new Post { Headline = model.Headline, BodyText = 
 model.BodyText});
        await db2.SaveChangesAsync();
        return View("~/Views/Home/Blog.cshtml");
    }

Далее при загрузке DOM-дерева автоматом работает код JQuery:

<script type="text/javascript">
   function getData(data) {
    var url = "/api/Blog"
    $.getJSON(url, function (data) {
        $("#idfirst").before('<div id="post" class="post">' +
            '<div id = "posthead" class= "posthead"></div >' +
            '<div id="postbody" class="postbody"></div></div >');
        $("#posthead").append('<p>' + data[6] + '</p>');
        $("#postbody").append('<p>' + data[7] + '</p>');
    });
}

$(document).ready(function () {
    getData();
})

Тут всё просто – перед блоком idfirst вставляем подготовленный блок со вложенными блоками для поста, со своими стилями. Тут всё работает. Но проблема в том, что он не сохраняет перенос на след строку.

Так я его вбил: Так я его вижу:

Как это исправить?