javascript - 如何使用ajax从 Controller 返回HTML？

Question

我的 Controller 代码:

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

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

我的查看代码:

$('#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);
    });
});

成功函数永远不会执行...我检查了Fiddler和Firebug，代码在 Controller 上成功运行并在客户端上交付。但随后该函数没有执行...

研究后，我发现成功函数仅在我们有有效的 JSON 时才会执行，那么我的猜测是我的 JSON 包含 HTML 代码(适用于所见即所得编辑器，如tinymce)getJSON 说它无效...

那么，使用 ajax 发送 html 片段的正确方法是什么？

Answer 1

对我来说，将 HTML 作为 JSON 返回似乎有点牵强，尽管这是可能的。

如果您只想返回 HTML 代码字符串，则可以简单地返回 Content(myModel.MyHtml)。

在你的 JavaScript 中，你需要用一个简单的 $.get 替换对 $.getJSON 的调用，它类似于 $.getJSON 但响应中不需要 JSON 数据。

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