Ajax调用未将参数传递给控制器​​方法

Question

在Controller中，我添加了一种方法来对div执行一些实时数据交换。

public class TextItemsController : Controller
{

    //[HttpPost]       
    public JsonResult SpinText(string Body)
    {
        SpinningResult spinningResult = new SpinningResult();

        spinningResult.Spintext = "This is the result text";

        string jsonResult = JsonConvert.SerializeObject(spinningResult);

        return Json(jsonResult);
    }
}

这通常可以正常工作，并且结果被发送回调用的Ajax方法，并且div使用预期的结果文本进行更新。因此，一般的交流似乎有效。但是我从没有收到来自Ajax调用的输入字符串。

function doSpinning() {
    //var token = $('input[name="__RequestVerificationToken"]', $('#textForm')).val();
    var myData = { Body : "Hello" };    
    //var dataWithAntiforgeryToken = $.extend(myData, { '__RequestVerificationToken': token });
    var requestData = JSON.stringify(myData);

    $.ajax({
        url: "/TextItems/SpinText",
        type: "POST",        
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: requestData,
        success: function (data) {
            var json = JSON.parse(data);
            document.getElementById("PreviewText").innerHTML = json["Spintext"];              
        },
        error: function () {
            document.getElementById("PreviewText").innerHTML = "Error";    
        }
    });
}

$("#spinButton").on('click', doSpinning);

data在发布前似乎具有正确的值"{"Body":"Hello"}"，但是string Body始终是null。

Answer 1

您是否可以像这样用[FromBody]为参数加上前缀：

public JsonResult SpinText([FromBody] DtoBody Body)

并使用数据传输对象，以便JsonSerializer知道如何映射发送的数据

public class DtoBody 
{ 
   public string Body {get;set;}
}

Answer 2

您要发布一个具有object属性的Body，并且您的方法需要一个string值。这些显然不匹配，但是当您只想传递基元时，就不需要发布对象：

$.ajax({
    url: "/TextItems/SpinText",
    type: "POST",        
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: "Hello",
    success: function (data) {
        var json = JSON.parse(data);
        document.getElementById("PreviewText").innerHTML = json["Spintext"];              
    },
    error: function () {
        document.getElementById("PreviewText").innerHTML = "Error";    
    }
});

---

请注意，这并不是您唯一的问题，因为您正在对Action进行双重JSON序列化：

// serialize to JSON
string jsonResult = JsonConvert.SerializeObject(spinningResult);

//serialize the serialized object
return Json(jsonResult);

您不必显式序列化为JSON，这就是帮助程序为您完成的工作。

只需使用：

public IActionResult SpinText(string Body)
{
    SpinningResult spinningResult = new SpinningResult();
    spinningResult.Spintext = "This is the result text";

    return Json(spinningResult);
}

同样，您不需要对AJAX结果上的JSON进行双重解析：

success: function (data) {
    document.getElementById("PreviewText").innerHTML = data.spintext;              
},

Answer 3

非常感谢，我得到了您的帮助。

DTO

public class SpinningInput
{
    public string Title { get; set; }
    public string Body { get; set; }
    public string Tags { get; set; }
    public string Keyword { get; set; }
}

控制器

public JsonResult SpinText([FromBody]SpinningInput spinningInput)
{
    SpinningResult spinningResult = new SpinningResult();
    spinningResult = Utility.Spinning.SpinText(spinningInput);

    return Json(spinningResult);
}

JavaScript

function doSpinning() {
    const textBody = document.getElementById("Body").value;
    const textTitle = document.getElementById("Title").value;
    const textTags = document.getElementById("Tags").value;
    const textKeyword = document.getElementById("Keyword").value;
    var textData = { Title: textTitle, Body: textBody, Tags: textTags, Keyword: textKeyword };    
    var requestData = JSON.stringify(textData);

    $.ajax({
        url: "/TextItems/SpinText",
        type: "POST",        
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: requestData,
        success: function (data) {
            document.getElementById("PreviewText").innerHTML = data.spintext;     
            document.getElementById("WordCount").innerHTML = data.wordCount;
            document.getElementById("KeywordDensity").innerHTML = data.keywordDensity + "%";
        },
        error: function () {
            document.getElementById("PreviewText").innerHTML = "Error";    
        }
    });
}

$("#spinButton").on('click', doSpinning);