jquery - 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

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.responseText);
      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