return Json error from ASP.NET MVC

Question

I'm trying to return an error message via Json from ASP.NET MVC controller. I want to display carriage returns on the screen, so the error will look like:

Error 1.
Error 2.

instead of "Error1.\u003cbr/\u003eErro2.\u003cbr.\u003e"

Here's my ASP.NET MVC code

Response.StatusCode = (int)HttpStatusCode.BadRequest;
string str = "Error 1.<br/>Error 2.<br.>";
return Json(str);

JavaScript (redacted):

      .ajax({...
            error: function(xhr, textStatus, exceptionThrown) {
                $('#result').html(xhr.responseText);
            },

Debugging the xhr.responseText yields: ""Error1.\u003cbr/\u003eErro2.\u003cbr.\u003e""

Any ideas?

Answer 1

If you are using JSON you probably don't want to embed HTML (that sort of defeats the purpose of returning a "data" object that you will format on the view.)

If you want to return HTML you could do this in your controller:

Response.StatusCode = (int)HttpStatusCode.BadRequest;
return Content("Error 1.<br/>Error 2.<br/>"); 

Answer 2

Yea, you're defeating the purpose like @Hector said..

And if you want to return true JSON, maybe try returning a Json(Dictionary<String, Object>) instead of a Json(string).

Answer 3

It seems to me that you already made almost everything correct. The results which you have in the xhr.responseText is a JSON string. So you should insert only one additional call of the JSON.parse function

.ajax({...
    error: function(xhr, textStatus, exceptionThrown) {
        $('#result').html(JSON.parse(xhr.responseText));
    },

then the data like '"Error1.\u003cbr/\u003eErro2.\u003cbr.\u003e"' will be converted to the string 'Error 1.<br/>Error 2.<br/>'.

Inside of success event handler the ajax function call JSON.parse for you, but it do this not inside of the error handler. So converting the server response from JSON string you have to do manually.

Answer 4

would be nicer to return a list of errors and then build the html at the client.

Response.StatusCode = (int)HttpStatusCode.BadRequest;
List<string> errors = new List<string>();
//..some processing
errors.Add("Error 1");
//..some processing
errors.Add("Error 2");
return Json(errors);

and then at the client side

 .ajax({...
    error: function(xhr, textStatus, exceptionThrown) {
      var errorData = $.parseJSON(xhr.responseTex);
      var errorMessages = [];
      //this ugly loop is because List<> is serialized to an object instead of an array
      for (var key in errorData)
      {
         errorMessages.push(errorData[key]);
      }
       $('#result').html(errorMessages.join("<br />"));
  },

you can also return a more specific error object and use a template solution, but this is the idea