@Ajax.ActionLink 有效，但 $.ajax 无效答案

【问题标题】：@Ajax.ActionLink works, but $.ajax doesn't@Ajax.ActionLink 有效，但 $.ajax 无效
【发布时间】：2018-04-27 12:35:45
【问题描述】：

我是 MVC 和 Ajax 的新手，但对 C# 有良好的工作知识和经验。

作为测试，我创建了一个具有 4 个方法的 ApiController，2 个使用 GET，2 个使用 POST。

所有 4 种方法都可以与 @Ajax.ActionLink 完美配合，但（据我所知）等效的 $.ajax 调用失败 POST（但通过 GET）。

这是我的 ApiController：

public class ValuesController : ApiController
{
    [HttpGet] // GET api/values
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    [HttpGet] // GET api/values/5
    public string Get(int id)
    {
        return $"id={id}, ~id={~id}";
    }

    [HttpPost] // POST api/values
    public string PostData(string value="123")
    {
        var x = Request;
        return new string(value.Reverse().ToArray());
    }

    [HttpPost] // POST api/values
    public JsonResult<object> PostData(string value, int i)
    {

        return Json((object)new { s=new string(value.Reverse().ToArray()), i });
    }
}

以及来自 .cshtml 文件的相应调用：

@Ajax.ActionLink("Click me for Get()", "Get", "api/Values", null, new AjaxOptions() { HttpMethod = "GET", OnSuccess = "res0", OnFailure = "fail0", UpdateTargetId = "status0" })
<script language="javascript">
    function res0(res) {
        $('#status00')[0].innerText = "Result: " + res;
    }
    function fail0(a, b, c) {
        $('#status000')[0].innerText = "Error\n" + b + '\n' + c;
    }
</script>
<form action="" id="form0">
    <input type="submit" />
</form>
<div id="status0"></div>
<div id="status00"></div>
<div id="status000"></div>

@Ajax.ActionLink("Click me for Get(5)", "Get", "api/Values", new { id = 5 }, new AjaxOptions() { HttpMethod = "GET", OnSuccess = "res1", OnFailure = "fail1", UpdateTargetId = "status1" })
<script language="javascript">
    function res1(res) {
        $('#status11')[0].innerText = "Result: " + res;
    }
    function fail1(a, b, c) {
        $('#status111')[0].innerText = "Error\n" + b + '\n' + c;
    }
</script>
<form action="" id="form1">
    <input type="submit" />
</form>
<div id="status1"></div>
<div id="status11"></div>
<div id="status111"></div>

@Ajax.ActionLink("Click me for PostData('Hello')", "PostData", "api/Values", new { value = "Hello" }, new AjaxOptions() { HttpMethod = "POST", OnSuccess = "res2", OnFailure = "fail2", UpdateTargetId = "status2" })
<script language="javascript">
    function res2(res) {
        $('#status22')[0].innerText = "Result: " + res;
    }
    function fail2(a, b, c) {
        $('#status222')[0].innerText = "Error\n" + b + '\n' + c;
    }
</script>
<form action="" id="form2">
    <input type="submit" />
</form>
<div id="status2"></div>
<div id="status22"></div>
<div id="status222"></div>

@Ajax.ActionLink("Click me for PostData(\"Hello\", 3)", "PostData", "api/Values", new { value = "Hello", i = 3 }, new AjaxOptions() { HttpMethod = "POST", OnSuccess = "res3", OnFailure = "fail3", UpdateTargetId = "status3" })
<script language="javascript">
    function res3(res) {
        $('#status33')[0].innerText = "Result: " + JSON.stringify(res);
    }
    function fail3(a, b, c) {
        $('#status333')[0].innerText = "Error\n" + b + '\n' + c;
    }
</script>
<form action="" id="form3">
    <input type="submit" />
</form>
<div id="status3"></div>
<div id="status33"></div>
<div id="status333"></div>

<script language="javascript">
    document.getElementById('form0').onsubmit = function (e) { e.preventDefault(); form0_submit(); };
    document.getElementById('form1').onsubmit = function (e) { e.preventDefault(); form1_submit(); };
    document.getElementById('form2').onsubmit = function (e) { e.preventDefault(); form2_submit(); };
    document.getElementById('form3').onsubmit = function (e) { e.preventDefault(); form3_submit(); };

    function form0_submit() {
        $.ajax({
            type: 'GET',
            url: '/api/Values/Get',
            success: function (res) {
                $('#status0')[0].innerText = res;
            },
            error: function (jqXHR, tStatus, errThrown) {
                $('#status00')[0].innerText = tStatus;
                $('#status000')[0].innerText = errThrown;
            }
        });
    }

    function form1_submit() {
        $.ajax({
            type: 'GET',
            url: '/api/Values/Get',
            data: {id:@DateTime.Now.TimeOfDay.Seconds},
            success: function (res) {
                $('#status1')[0].innerText = res;
            },
            error: function (jqXHR, tStatus, errThrown) {
                $('#status11')[0].innerText = tStatus;
                $('#status111')[0].innerText = errThrown;
            }
        });
    }

    function form2_submit() {
        $.ajax({
            type: 'POST',
            url: '/api/Values/PostData',
            data: JSON.stringify({ value: "Test string" }),
            contentType: 'application/json; charset=UTF-8',
            dataType: 'json',
            success: function (res) {
                $('#status2')[0].innerText = res;
            },
            error: function (jqXHR, tStatus, errThrown) {
                $('#status22')[0].innerText = tStatus;
                $('#status222')[0].innerText = errThrown;
            }
        });
    }

    function form3_submit() {
        // not implemented yet, need to get form2_submit() working
    }
</script>

我曾经收到404 - Not found 错误，直到在public string PostData(string value="123") 中我将value 设为可选参数。现在使用默认的"123" 值调用该函数，而不是我传递的值。在form2_submit() 中，我尝试了data 参数的不同组合。

使用 Chrome 开发者工具分析响应（右键单击->检查，然后 Network 选项卡），我可以看到 ActionLink 以 Query String Parameters 发送参数，而 $.ajax 调用执行此操作作为Request Payload 或Form Data 取决于我传递给data 参数的确切内容。在这两种情况下，参数名称/值对都是正确的，但 C# ApiController 似乎忽略了该值（我也尝试过 [FromBody] 属性）。

我查看了这里和其他网站上的其他帖子，但无法弄清楚为什么数据传输方式不同

编辑：

根据要求，Get-Package的输出：

PM> Get-Package

Id                                  Versions         ProjectName
--                                  --------         -----------
Antlr                               {3.4.1.9004}     WebApplication1
bootstrap                           {3.0.0}          WebApplication1
jQuery                              {1.10.2}         WebApplication1
Microsoft.ApplicationInsights       {2.2.0}          WebApplication1
Microsoft.ApplicationInsights.Ag... {2.0.6}          WebApplication1
Microsoft.ApplicationInsights.De... {2.2.0}          WebApplication1
Microsoft.ApplicationInsights.Pe... {2.2.0}          WebApplication1
Microsoft.ApplicationInsights.Web   {2.2.0}          WebApplication1
Microsoft.ApplicationInsights.Wi... {2.2.0}          WebApplication1
Microsoft.ApplicationInsights.Wi... {2.2.0}          WebApplication1
Microsoft.AspNet.Mvc                {5.2.3}          WebApplication1
Microsoft.AspNet.Razor              {3.2.3}          WebApplication1
Microsoft.AspNet.Web.Optimization   {1.1.3}          WebApplication1
Microsoft.AspNet.WebApi             {5.2.3}          WebApplication1
Microsoft.AspNet.WebApi.Client      {5.2.3}          WebApplication1
Microsoft.AspNet.WebApi.Core        {5.2.3}          WebApplication1
Microsoft.AspNet.WebApi.HelpPage    {5.2.3}          WebApplication1
Microsoft.AspNet.WebApi.WebHost     {5.2.3}          WebApplication1
Microsoft.AspNet.WebPages           {3.2.3}          WebApplication1
Microsoft.CodeDom.Providers.DotN... {1.0.8}          WebApplication1
Microsoft.jQuery.Unobtrusive.Ajax   {3.2.5}          WebApplication1
Microsoft.Net.Compilers             {2.4.0}          WebApplication1
Microsoft.Web.Infrastructure        {1.0.0.0}        WebApplication1
Modernizr                           {2.6.2}          WebApplication1
Newtonsoft.Json                     {6.0.4}          WebApplication1
Respond                             {1.2.0}          WebApplication1
WebGrease                           {1.5.2}          WebApplication1

PM>

【问题讨论】：

如果来自 NuGet 控制台的以下命令 Get-Package 可以发布输出
您正在向 /api/Values/Get 发送请求，请尝试仅向 /api/Values 发送请求。
@Hackerman，如果有什么不同，所有 NuGet 包都已更新到最新版本，但我会在回家后发布输出。
@WeslleyRamos，GET 工作正常，POST 有问题。我玩过不同的 C# 函数名称并添加了 ActionName 属性，所以我怀疑 Get（如动作名称）是一个问题。如果您坚持，我可以尝试，但同样，它的 POST 不起作用，GET 很好......
你能把你在浏览器的开发者工具的网络标签中看到的内容粘贴到这里吗？我很确定那里有什么问题的暗示。编辑：（我的意思是屏幕的图片）

标签： jquery ajax asp.net-mvc razor

【解决方案1】：

默认情况下，如果您的 web api 方法的参数是简单类型，如 string 或 int，则 Web API 会尝试从 uri 中获取值。

如果您在请求正文中发送字符串，则应显式使用 FromBody 属性装饰器，以便 web api 知道它应该从请求正文中读取数据。当FromBody 属性存在时，web api 将使用content-type 标头值来选择一个可以处理接收到的内容的格式化程序。

[HttpPost] // POST api/values
public string PostData([FromBody]string value)
{
    if (value == null) value = "some non null";
    var x = Request;
    return new string(value.Reverse().ToArray());
}

现在在客户端，确保您发送的是您要发送的字符串的 JSON 字符串版本，同时将内容类型指定为 application/json

$.ajax({
    type: 'POST',
    url: '/api/Values/PostData',
    data: JSON.stringify("My Test string"),
    contentType: 'application/json',
    success: function (res)
    {
        console.log(res);
    },
    error: function (jqXHR, tStatus, errThrown)
    {
        console.log(errThrown);
    }
});

【讨论】：

谢谢@Shyju，这确实是我的问题。我自己尝试了最后一个函数，偶然发现了Ca't bind multiple parameters ('value' and 'i') to the request's content. 异常并找到了答案here，这解释了为什么一个更复杂的对象可以自动从主体中识别出来（不同的项目），但是一个简单的string 不是不。我试图找到$.ajax 的文档，结果我只需要在ApiController 上阅读更多内容