Question

我是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中，我尝试了Network参数的不同组合。

使用Chrome开发者工具分析响应（右键单击 - ＆gt;检查，然后ActionLink标签），我可以看到Query String Parameters将参数发送为$.ajax，而Request Payload调用将其视为Form Data或data，具体取决于我传递给Get-Package参数的确切内容。在这两种情况下，参数名称/值对都是正确的，但C＃ApiController似乎忽略了该值（我也试过了[FromBody]属性）。

我已在此处和其他网站上查看了其他帖子，但无法弄清楚为何数据传输方式不同

编辑：

根据要求，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>的输出：

channels

Answer 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);
    }
});

@ Ajax.ActionLink可以工作，但$ .ajax没有

1 个答案: