AJAX Post URL Cannot be Resolved (500) if String Includes HTML Tags

Question

I'm trying to take the contents of a TinyMCE wysiwyg and post it to a controller function for database insertion. This setup will always display Failed to load resource: the server responded with a status of 500 (Internal Server Error) citing my /admin/postnewarticle/ route as the data in the error console in Chrome:

$.ajax({
    url: '/admin/postnewarticle/',
    type: 'post',
    dataType: 'json',
    data: {
        content: tinyMCE.get('article-content').getContent(),
        title: $('#article-title').val(),
        articleType: $('#article-types option:selected').val()
    },
    success: function (result) {
        // success stuff
    }
});

When I debug in Chrome, placing tinyMCE.get('article-content').getContent() as a Watch Expression shows me that I'm getting the desired value here: whatever I've written in the TinyMCE text area, wrapped in a <p> tag. If I replace the value for "content" with some random static string value without any HTML tags in it, the controller method executes correctly.

Here is the controller method I'm trying to hit:

[HttpPost]
[Authorize(Roles = "Administrators")]
[ValidateInput(false)]
public JsonResult PostNewArticle(string title, HtmlString content, string articleType)
{
    // do stuff
}

Notice that the data type for "content" here is HtmlString... this was changed from just string after doing some research that eventually led me here. But whether it's string or HtmlString, the action still doesn't execute if the value for content contains an HTML tag.

Any and all help is appreciated!

Answer 1

It might help to url-encode your content before you send it

content: encodeURIComponent( tinyMCE.get('article-content').getContent() ),

and to turn it back to the real string on server side.