Markitup editor doesn't load text back

Question

I have the edit action method pair:

[HttpGet]
public ActionResult Edit(Guid id) {
    return View(this.session.Load<Article>(id));
}

[HttpPost, ValidateAntiForgeryToken]
public ActionResult Edit(Article article) {
    if(ModelState.IsValid) {
        article.ProblemContext = BBCode.ToHtml(article.ProblemContext);
        article.AuthorId = this.userService.GetActiveDirectoryUserId(User.Identity.Name);
        article.CreatedOn = DateTime.Now;

        this.session.Store(article);
        this.session.SaveChanges();

        TempData["Message"] = String.Format("Article '{0}' was saved successfully", article.Title);
        return RedirectToAction("Index", "Home", new { area = "" });
    }
    return View(article);
}

Everything's alright except when editing the entry there's no content loaded back in MarkitUp-ish textarea.

Edit view looks like this:

@using(Html.BeginForm("Edit", "Article", new { area = "" }, FormMethod.Post, new { enctype = "multipart/form-data" })) {

    @Html.ValidationSummary()
    @Html.AntiForgeryToken()

    <fieldset>
        <legend>Create/Edit</legend>
        @Html.HiddenFor(model => model.Id)
        <div class="editor-label">@Html.LabelFor(model => model.Title)</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
        </div>
        <hr />
        <div class="editor-field">
            <textarea class="markitupEditor" cols="15" rows="10" name="ProblemContext"> </textarea>            
        </div>
        <hr />        
        <input type="submit" value="Save" />
        <input type="reset" value="Clear" />        
    </fieldset>
} @* using(Html.BeginForm("Edit", "Article", new { area = "" }, FormMethod.Post)) { *@


<script type="text/javascript">
    $(function() {
        $("#content textarea.markitupEditor").markItUp(mySettings);
    });
</script>

@section Stylesheets {
    <link href="@Url.Content("~/Scripts/MarkitUpEditor/skins/markitup/style.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/MarkitUpEditor/sets/bbcode/style.css")" rel="stylesheet" type="text/css" />
}
@section Javascript {
    <script src="@Url.Content("~/Scripts/MarkitUpEditor/jquery.markitup.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MarkitUpEditor/sets/bbcode/set.js")" type="text/javascript"></script>
}

What have I done wrong?

Answer 1

There is no content in the textarea because you haven't specify any content in your markup:

<textarea class="markitupEditor" cols="15" rows="10" name="ProblemContext"> 
</textarea>

Either put there the content explicitly:

<textarea class="markitupEditor" cols="15" rows="10" name="ProblemContext"> 
    @Html.Raw(Model.ProblemContext)
</textarea>

Or use the use the built TextAreaFor helper:

<div class="editor-field">                     
    @Html.TextAreaFor(model => model.ProblemContext, 
      columns: 15, rows: 10, htmlAttributes:  new { @class = "markitupEditor" } )
</div>