edited text in model is always null

I'm loading up some text from a database into a html editor, making some changes to the text and saving back to the database.  The editor is populated with text, I can change it, but when I save the model back to the controller, the text is always null.  here's how I create the editor

                       .HtmlEditorFor(model => model.MarketCommentary.MarketComment)

I populate it from an ajax call like this

if ("htmlEditorMarketComment_source" in frm.elements) {
                            $("#htmlEditorMarketComment").igHtmlEditor("setContent", data.MarketComment, "html");

the text is loaded into the editor ok and i can edit it.  I subsequently save the text in the submit event of the form using this javascript code

$('#frmAddMarketCommentary').on('submit', function (e) {
                var $form = $(e.target);
                if ($form.valid()) {

                        url: '@Url.Action("Create", "MarketCommentary")',
                        data: $form.serialize(),
                        async: true,
                        type: 'POST',
                        success: function (returnval) {
                            if (returnval.success == true) {
                                // Hide the dialog
                                bootbox.alert('Market Commentary Saved.');
                            if (returnval.success == false) {
                                bootbox.alert({ title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>', message: returnval['responseText'] });
                        error: function (returnval) {

in my controller actionMethod (C#) when I inspect the commentary, its null

item.Commentary  ---- > null

public async Task<ActionResult> Create([Bind(Prefix = "MarketCommentary")]MarketCommentaryViewModel item)

all the other properties have data, its only the one associated with the html editor thats null.  can you help ?

  • 138233
    Offline posted

    Hello Mark,

    Thank you for your post. I have been looking into it and I can suggest you first serialize the form and then stringify it using JSON like this:

    var result = JSON.stringify({ 'item': form.serializeArray() });

    then set the result as data to the ajax. Please let me know if this helps you or you need further assistance on this matter.

    Looking forward for your reply.