WYSIWYG Text Editor SummerNote Entered data is not persisting - asp.net

Question

Above is a picture of my edit page. The issue I have is that this editor (summernote) does not persist it's data when I save
**I have however, narrowed down the problem. **
Fields on the form persist the data in the value field on the HTML elements
SummerNote does not store the text I've written into the editor in the value element
If I use the default editor and put a value in (which is stored in the value element), then use summernote, the value in the value field will be there, but not displayed.
Editing this value field in the inspector will then cause the value to be persisted on save.
The line containing the value field:
<input class="form-control text-box single-line" id="Content_Content" name="Content.Content" type="text" value="I am the text that is not shown but would be persisted!" style="display: none;">
The note-editing-area div:
<div class="note-editing-area"><div class="note-handle"><div class="note-control-selection" style="display: none;"><div class="note-control-selection-bg"></div><div class="note-control-holder note-control-nw"></div><div class="note-control-holder note-control-ne"></div><div class="note-control-holder note-control-sw"></div><div class="note-control-sizing note-control-se"></div><div class="note-control-selection-info"></div></div></div><textarea class="note-codable"></textarea><div class="note-editable panel-body" contenteditable="true" style="height: 320px;"><h1>Help!</h1><p>What I type here will not be persisted when i click the <b>save </b>button.</p></div></div>
My question therefore is this:
How can I Either
Have the html between the ::before and ::after of the summernote editor (The value that the user types into the control) be put into the value tag aswell so that it is persisted
Do something else to make it work.
Additional Information:
Here is My Model:
Article.cs:
public class Article
{
#region Constructors
public Article(string title, string subTitle = "")
{
InitializeCollections();
Title = title;
SubTitle = subTitle;
}
public Article(string title, Article parentArticle, string subTitle = "")
{
InitializeCollections();
Title = title;
SubTitle = subTitle;
ParentArticles.Add(parentArticle);
}
public Article()
{
InitializeCollections();
}
void InitializeCollections()
{
ParentArticles = new List<Article>();
ChildArticles = new List<Article>();
}
#endregion
[Key]
public int ArticleId { get; set; }
public virtual ArticleContent Content { get; set; }
[StringLength(GUIConstants.MaxCharactersInMenuItemText)]
public string Title { get; set; }
[StringLength(100)]
public string SubTitle { get; set; }
public int? Sequence { get; set; }
public bool Published { get; set; }
public DateTime? PublishedDate { get; set; }
public virtual ICollection<Article> ParentArticles { get; set; }
public virtual ICollection<Article> ChildArticles { get; set; }
public string Notes { get; set; }
Article Content (It's the Content's Content property that has the WYSIWYG Editor, however if i use the WYSIWYG for a property dirrectly on the article model (like Title) I get the same issue.
public class ArticleContent
{
[Key, ForeignKey("Article")]
public int ArticleId { get; set; }
public virtual Article Article { get; set; }
[AllowHtml]
public string Content { get; set; }
}
}
Controller:
// GET: Articles/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var article = db.Article.Include(a => a.Content).SingleOrDefault(a => a.ArticleId == id);
if (article == null)
{
return HttpNotFound();
}
return View(article);
}
// POST: Articles/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[ValidateInput(false)]
[HttpPost, ActionName("Edit")]
public ActionResult EditPost(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var articleToUpdate = db.Article.Include(a => a.Content).SingleOrDefault(a => a.ArticleId == id);
if (TryUpdateModel(articleToUpdate, "",
new string[] { "Title", "SubTitle", "Sequence", "Content" }))
{
try
{
db.SaveChanges();
return RedirectToAction("Index");
}
catch (RetryLimitExceededException /* dex */)
{
//Log the error (uncomment dex variable name and add a line here to write a log.
ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists, see your system administrator.");
}
}
return View(articleToUpdate);
}
View:
**#model Catalyst.Models.Article
#{
ViewBag.Title = "Edit Article";
}
#section styles{
#Styles.Render("~/Content/summernote")
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.ArticleId)
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SubTitle, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SubTitle, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SubTitle, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Sequence, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Sequence, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Sequence, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Content.Content, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Content.Content, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Content.Content, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index", "Articles", new { #class = "btn btn-default" })
</div>
#section scripts {
#Scripts.Render("~/bundles/SummerNote", "~/bundles/SummerNoteArticleContentEditor")
}**
The Javascript turning the content textbox into summernote
(function ($) {
function HomeIndex() {
var $this = this;
function initialize() {
$('#Content_Content').summernote({
focus: true,
height: 320,
codemirror: {
theme: 'united'
}
});
}
$this.init = function () {
initialize();
}
}
$(function () {
var self = new HomeIndex();
self.init();
})
}(jQuery))
I followed this guide:
http://www.c-sharpcorner.com/UploadFile/3d39b4/bootstrap-wysiwyg-editor-in-Asp-Net-mvc/