在 ASP.NET MVC 5 中使用 jquery AJAX 调用 Web API 出现错误答案

【问题标题】：Call Web API using jquery AJAX in ASP.NET MVC 5 getting error在 ASP.NET MVC 5 中使用 jquery AJAX 调用 Web API 出现错误
【发布时间】：2019-03-02 10:50:02
【问题描述】：

我将 web api 添加到可用的项目中。我的 api 控制器：

    namespace MyApplication.Controllers
{
    public class TaskApiController : ApiController
    {

        [HttpPost]
        public IHttpActionResult Create(string UserName, string Password, string DoingDateTime, int ReferenceFrom, int ReferenceTo, string MaturityDateTime = "", int? PersonCompany_AffiliationID = null, int? SubjectID = null, string Description = "", int? ImportanceDegreeID = null, int? StatusID = null, int CompletionPercentage = 0, int? DossierID = null)
        {
            ...
            return Ok();
        }
    }
}

WebApiConfig.cs：

config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

将以下代码添加到 web.config：

    <system.webServer>
<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

和 ajax：

$.ajax({
                    url: 'localhost:3641/api/TaskApi',
                    contentType: 'application/x-www-form-urlencoded',
                    dataType: 'json',
                    data: {
                        UserName: 'admin',
                        Password: '123',
                        Description: 'test',
                        DoingDateTime: '1397/12/10',
                        ReferenceFrom: 2,
                        ReferenceTo: 2
                    },
                    type: 'Post',
                    success: function (data) {
                        alert('success');
                    }
            , error: function (response) {
                        alert(response.responseText);
                    }
        });

当我在浏览器中测试 web api 时：

http://localhost:3641/api/TaskApi?UserName=admin&Password=312&Description=hkj&DoingDateTime=1397/02/05&ReferenceFrom=2&ReferenceTo=2

它工作正常。但是当aun ajax返回错误并且response.responseText返回“未定义”。

【问题讨论】：

如果您在正文中设置参数，您应该期望 WebApi 中有一个带有 FromBody-Attribute 的对象。
@Nikolaus：我将操作更改为：public IHttpActionResult PostNewTask([FromBody] string UserName, [FromBody] string Password, [FromBody] string DoingDateTime, [FromBody] int ReferenceFrom, [FromBody] int ReferenceTo, [FromBody] string MaturityDateTime = "", [FromBody] int? PersonCompany_AffiliationID = null, [FromBody] int? SubjectID = null, [FromBody] string Description = "", [FromBody] int? ImportanceDegreeID = null, [FromBody] int? StatusID = null, [FromBody] int CompletionPercentage = 0, [FromBody] int?DossierID = null) 但仍然返回“未定义”错误
@Miss 你不能有多个[FromBody]。这条规则的reason 是请求正文可能存储在只能读取一次的非缓冲流中。跨度>
你在使用 Visual Studio 吗？
@Nikolaus：是的

标签： ajax asp.net-mvc asp.net-web-api2

【解决方案1】：

解决您的问题的最快捷、更简洁的方法是创建一个 Viewmodel。

还请记住，对于复杂类型，Web Api 默认使用媒体类型格式化程序从消息正文中读取值。

 public class TaskViewModel
 {
        public string UserName { get; set; }
        public string Password { get; set; }
        public string DoingDateTime { get; set; }
        public int ReferenceFrom { get; set; }
        public int ReferenceTo { get; set;  }
        public string MaturityDateTime { get; set; }
        public int? PersonCompany_AffiliationID { get; set; }
        public int? SubjectID { get; set; }
        public string Description { get; set; }
        public int? ImportanceDegreeID { get; set; }
        public int? StatusID { get; set; }
        public int CompletionPercentage { get; set; }
        public int? DossierID { get; set; }
}

[HttpPost]
public IHttpActionResult Create(TaskViewModel taskViewModel)
{
   if (!ModelState.IsValid)
   {
       return BadRequest("");
   }
            return Ok();
}

【讨论】：

我不确定，默认情况下，复杂类型总是从正文中读取。我已经遇到了一个问题，我必须明确设置 FromBodyAttribute。
@Nikolaus：看看this。
我用 OP 的 AJAX 代码和上面的解决方案进行了测试，它工作正常。可能存在我们不知道的不同问题。

【解决方案2】：

在你的课上，我写了一个 AJAX，但还是失败了。

var task = new Object();

task.Description = 'kjk';
task.PersonCompany_AffiliationID = null;
task.SubjectID = null;
task.DoingDateTime = '1397/12/11';
task.MaturityDateTime = null;
task.ImportanceDegreeID = null;
task.StatusID = null;
task.CompletionPercentage = 0;
task.ReferenceFrom = 2;
task.ReferenceTo = 2;
task.DossierID = null;



var req = $.ajax({
    url: 'http://localhost:3641/api/TaskApi',
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    data: task,
    type: 'Post',
    success: function (data) {
        alert('success');
    }
    , error: function (response) {
                alert(response.responseText);
            }
});

我注意到的是由于信息发送到操作的方式而导致的错误... 我在第一行的动作上放了一个断点，但是程序没有动作。

【讨论】：

错误是什么？还要检查开发工具上的网络选项卡以查看它的发布位置
当我将[FromUri]添加到action时，执行action会调用action，但所有参数的值为空或null
你能试试远程调试吗，如link中所述

【解决方案3】：

感谢所有指导我的亲人

通过两件事解决了问题： 1- 模型中的必填字段之一未在 AJAX 中初始化 2- 也就是说，数据值设置为 JSON.stringify (task)

【讨论】：