javascript - 如何使用 ajax post 方法将复杂对象发送到 C# Controller ？

Question

我正在尝试将复杂的 javascript 对象发送到 mvc Controller post 方法。每次运行该方法时，我都会收到 BadRequest 响应。它不允许我使用 Visual Studio 进行调试，只能使用 Web 开发人员工具。我用 fiddler 检查发现我的 JSON 对象似乎与 View 模型的顺序相同。有人可以帮我解决这个问题吗？我正在使用 Asp.Net Core 1.0。如果我需要提供更多信息，请告诉我。

这是我的 View 模型:

public class RouteViewModel
    {
        public RouteViewModel() { }
        public List<CheckpointViewModel> Checkpoints { get; set; }
        public int TotalDistance { get; set; }
    } 
 public class CheckpointViewModel
    {
        public decimal Latitude { get; set; }
        public decimal Longitude { get; set; }
    }

编译对象的逻辑如下:

function createObject() {
    var routeModel = { Checkpoints: [] ,TotalDistance:totalDistance};
    for (var i = 0; i < markersOrders.length; i++) {
        var latlng = markersOrders[i].getPosition();
        var Checkpoint = {
            'Latitude': latlng.lat(),
            'Longitude': latlng.lng()
        };
        routeModel.Checkpoints.push(Checkpoint);
    }
    return JSON.stringify(routeModel);
}

这是我的ajax方法:

function saveRoute() {
    var apiUrl = location.origin + "/map/AddRoute";
    $.ajax({
        method: "POST",
        url: apiUrl,
        contentType: "application/json;charset=utf-8",
        data: (createObject())
    }).done(function (msg) {
        alert("Data saved: " + msg);
    }).error(function(msg){alert("Error: "+ msg)});
}

接收帖子的 Controller 如下:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult AddRoute([FromBody]RouteViewModel route)
        {
            RouteViewModel newRoute = route;
            if (ModelState.IsValid)
            {
                _context.AddRoute(newRoute.Checkpoints, newRoute.TotalDistance);
                _context.SaveRoute();
                return RedirectToAction("SavedRoutes");
            }
            else
            {
                return BadRequest(ModelState);
            }
        }

这是我的原始帖子:

POST https://localhost:44343/map/AddRoute HTTP/1.1
Host: localhost:44343
Connection: keep-alive
Content-Length: 290
Accept: */*
Origin: https://localhost:44343
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Content-Type: application/json;charset=UTF-8
Referer: https://localhost:44343/Map/Map
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Cookie: .AspNetCore.Antiforgery.4IsE6XVGxQo=CfDJ8HmVr1mwBStLrOG_4RXM-sje_SmjZYd-GboPG5E19rchqlC61XsNEwa7yOgIySC-U63iTH6cD0ggwqwmwdPJOibPKrxlctls_a_b3wmPvai80vYUx6j0Lckfn24GBf7X_xZhAl3eac892j7YDJWa9Oc; .AspNetCore.Identity.Application=CfDJ8HmVr1mwBStLrOG_4RXM-shK66Uthf3kfJJezCs7HCTztr-seJHxVj8l5MS66u4EWd72NEXUjebAIfHIxFZvHjZzjiQSVfLCxdHnmcsbYWXgGAmaA_sBjdimNQXnPAC-NMtp_fDeTCPJEoB1lBy1hl-GFQaAJdRzVrcc7OchWTSBVZ9jdHmm0htNyChcJ8BUCczH8FhVnPeFzlCM_reR8u2vsQrOxY_ZmczdUQ_mqCmTVLGDdRRJwHLhuafrZ2mmAXq1iDzQhprtv98qAx2zM4TSoAOBKoeALq_Oa2n1SDvFMMtGseDB1mLsj-LkPlKhcCmtB14kwDRctvOtxOqCbQTfFjhLlc5405_dccQjWJ3mITtn1ss3x1aHUP-pHHzFX9ZhusQ1-IqV4pPDs12c1q2B5Uz0qEOHaUByVEE5bKpzklTT2kxNW1V81aGMMmwbi9zFkuh9nUFnQmGCqf5VXSx-FTm-UDWZgyMnK0JpG7K4cpiSeycv9sOeP1qUlz-P28RXLhCvqYAX3FIccRfoQMf63tU5OfVhu1bhRdV_NQALhBpku9nrxFyxxECe5WRc4It-kCLiaOQBlYa9bewb80QiWIS-wHNDY5vVcdAkd2D5

{"Checkpoints":[{"Latitude":-34.004057732693184,"Longitude":25.649633891880512},{"Latitude":-34.00313273259371,"Longitude":25.65392542630434},{"Latitude":-34.001425013635725,"Longitude":25.653367526829243},{"Latitude":-34.00019756942711,"Longitude":25.650320537388325}],"TotalDistance":919}

根据@Kiran Challa的建议我在 Controller 中收集了模型状态错误并将其写入输出窗口，如下所示:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult AddRoute([FromBody]RouteViewModel route)
        {
            RouteViewModel newRoute = route;
            if (ModelState.IsValid)
            {
                _context.AddRoute(newRoute.Checkpoints, newRoute.TotalDistance);
                _context.SaveRoute();
                return RedirectToAction("SavedRoutes");
            }
            else
            {
                //Getting errors
                var errors = ModelState.Values.SelectMany(v => v.Errors);
                Debug.WriteLine("Errors found: "+ errors+"\nEnd Errors found");
                return BadRequest(ModelState);
            }
        }

在我的输出窗口中，当我触发 Controller 时，我收到的只是:

Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery header value "RequestVerificationToken" is not present.
   at Microsoft.AspNetCore.Antiforgery.Internal.DefaultAntiforgery.<ValidateRequestAsync>d__9.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ValidateAntiforgeryTokenAuthorizationFilter.<OnAuthorizationAsync>d__3.MoveNext()
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Warning: Authorization failed for the request at filter 'Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ValidateAntiforgeryTokenAuthorizationFilter'.
Microsoft.AspNetCore.Mvc.StatusCodeResult:Information: Executing HttpStatusCodeResult, setting HTTP status code 400
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 37.4837ms 400 

Answer 1

尝试让你的createObject()返回这个:

function createObject() {
    var routeModel = { Checkpoints: [] ,TotalDistance:totalDistance};
    for (var i = 0; i < markersOrders.length; i++) {
        var latlng = markersOrders[i].getPosition();
        var Checkpoint = {
            'Latitude': latlng.lat(),
            'Longitude': latlng.lng()
        };
        routeModel.Checkpoints.push(Checkpoint);
    }
    return JSON.stringify({route: routeModel});
}