Passing HTML over AJAX call to C# MVC Controller. 500 Error

Question

So I'm getting a bit stumped by this one. I've got multiple pages making lots of successful Ajax calls to my C# controllers on the back end with a variety of data, but now I'm trying to build a simple little content management functionality, and hence update the HTML in a database with new HTML from a JS editor.

Long story short, I've taken out all the heavy Database code and narrowed it down to the fact that either my controller won't accept anything with html tags, or my ajax code is having trouble sending it.

The Ajax function is:

$.ajax({
            type: "POST",
            url: '@Url.Action("UpdateContent", "Admin")',
            data: {
                elementId: elementId,
                newContent: newContent
            },
            dataType: "json",
            success: function (data) {
                if (data.result == 'true') {
                    infoMessage('Content Updated!', 'success');
                } else {
                    infoMessage('Error: ' + data.result + '. Nothing has been updated!', 'error');
                }
            },
            error: function () {
                alert('There was a problem contacting the server.');
            }
        });

And on my Controller side, I've taken away all the code to just leave some debugging write lines.

[HttpPost]
    public ActionResult UpdateContent(string elementId, string newContent)
    {
        System.Diagnostics.Debug.WriteLine("!" + elementId);
        System.Diagnostics.Debug.WriteLine("!" + newContent);
        string _result = "true";
        return Json(new { result = _result });
    }

Now the interesting thing is that when I have newContent in the data paramater in the Ajax request set to anything like <p>hello</p> those writelines don't even get called and the whole ajax call fails. Yet when I just use a normal string e.g. hello it works fine. I've further narrowed it down to just the opening html bracket, so even <p would fail.

With this in mind, what is happening here? And secondly, what is the correct way to send html back to the controller via Ajax so this doesn't happen?

Answer 1

ASP.NET has request validation enabled by default to help protect against XSS. You can disable this by adding the ValidateInput attribute to your action:

[HttpPost]
[ValidateInput(false)]
public ActionResult UpdateContent(string elementId, string newContent)
{
    System.Diagnostics.Debug.WriteLine("!" + elementId);
    System.Diagnostics.Debug.WriteLine("!" + newContent);
    string _result = "true";
    return Json(new { result = _result });
}

You'll also need to add the following to your web.config:

<httpRuntime requestValidationMode="2.0" />

A newer (and better) alternative is to use the AllowHtml attribute which you would apply to a property on your model. This is preferred because you're only allowing this prop to bypass validation instead of the entire request.

class MyModel
{
    [AllowHtml]
    public string MyHtml { get; set; }
}