How to return HTML from controller using ajax?

Question

My controller code:

    public async Task<ActionResult> GetHtml(int id)
    {
        var myModel = await db.Models.FindAsync(id);

        return Json(new { jsonData = myModel.MyHtml }, JsonRequestBehavior.AllowGet); 
    }

My View code:

$('#MyDropDownList').on('change', function() {
    var myModelId = $(this).val();
    var urlGetMyHtml = '@Url.Action("GetHtml", "MyHtmlController")';
    $.getJSON(
        urlGetMyHtml,
        { id: myModelId },
        function(jsonData) {
            console.log(jsonData);                
            $('textarea#MyHtmlArea').val(jsonData);
    });
});

The success function never executes... I checked Fiddler and Firebug, and the code runs successfuly on controller and delivers on client. But then the function is not executed...

Researching, I discovered the success function executes only if we have a valid JSON, then my guess is that my JSON contains HTML code (its for an WYSIWYG editor, like tinymce) getJSON says it is not valid...

So, whats the correct way to send my html snippet using ajax?

The typical way to do this is have your controller return a view or a partial view instead of json. — Caleb Haldane
– Caleb Haldane, Commented Jan 3, 2017 at 22:32
well.. HTML isn't JSON. so if you want to return JSON, either format the HTML within a JSON string, or... return HTML instead. — user400654
– user400654, Commented Jan 3, 2017 at 22:34
Have you tried HttpServerUtility.HtmlEncode ? that would encode any html into safe string. — Bishoy Hanna
– Bishoy Hanna, Commented Jan 3, 2017 at 23:07

Carl-Evert Kangas · Accepted Answer · 2017-01-03 22:59:16Z

1

To me it seems a little bit far fetched to return HTML as JSON even though it would be possible.

You can simply return Content(myModel.MyHtml) if you want to just return a string of HTML-code.

In your javascript you then need to replace your call to $.getJSON with a simple $.get which like $.getJSON but does not expect JSON-data in the response.

    $.get(urlGetMyHtml,
          { id: myModelId },
          function(response) {
              $('textarea#MyHtmlArea').val(response);
          });

answered Jan 3, 2017 at 22:59

Carl-Evert Kangas

3122 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to return HTML from controller using ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related