通过 javascript 将复杂参数传递给 Web API 服务

Question

我正在制作一个 ASP.NET Web API Web 服务和一个 HTML/javascript 页面来测试它。我遇到的问题是传递一个复杂的数据参数并让它在 Web API 控制器中正确通过。

我知道有很多类似的问题，我已经阅读并尝试了解决方案，但都没有解决。我还阅读了一些 JQuery 文档。

这是我的控制器：

public class TitleEstimateController : ApiController
{
    public IHttpActionResult GetTitleEstimate([FromUri] EstimateQuery query)
    {
            // All the values in "query" are null or zero
            // Do some stuff with query if there were anything to do
    }
}

public class EstimateQuery
{
    // Various fields
}

WebApiConfig.cs 中的路由映射：

config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{query}"
            );

还有 javascript：

var uri = 'api/titleEstimate/';
var query = {
            "username": $("#user").val(),
            // other fields
        };

      $.getJSON(uri,query)
          .done(function (data) {
              $('#product').text("OK");
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });

目前我收到的是 404。我尝试了$.getJSON(uri + '/' + query)，但也没有用。在传递此对象之前，我已成功调用它，因此我认为路由通常没问题。我尝试了一个类型转换器，但没有帮助，仍然是 404。有没有人看到我错过了什么/做错了什么？

Answer 1

对于复杂的对象，我通常在消息体而不是 URL 中发送。

您对类似于这个问题的答案的方法有任何异议吗？ How to pass json POST data to Web API method as object

这似乎是更直接/自然的方法。

类似的东西（未经测试，但应该接近）：

[RoutePrefix("api/titleestimate")]
public class TitleEstimateController : ApiController
{
   [HttpGet]
    public IHttpActionResult GetTitleEstimate([FromBody] EstimateQuery query)
    {
        // All the values in "query" are null or zero
        // Do some stuff with query if there were anything to do
     }
}

public class EstimateQuery
{
    public string QueryName{ get; set; }
    public string Whatever{ get; set; }
}

$(function () {
   var query = {QueryName:"My Query",Whatever:"Blah"};
   $.ajax({
       type: "GET",
       data :JSON.stringify(query),
       url: "api/titleEstimate",
       contentType: "application/json"
   })
      .done(function (data) {
          $('#product').text("OK");
      })
      .fail(function (jqXHR, textStatus, err) {
        $('#product').text('Error: ' + err);
      });
});

Answer 2

首先，我会尝试像这样使用 web.api 的属性路由功能：

[RoutePrefix("api/titleestimate")]
public class TitleEstimateController : ApiController
{
    [HttpGet]
    public IHttpActionResult GetTitleEstimate([FromUri] EstimateQuery query)
    {
            // All the values in "query" are null or zero
            // Do some stuff with query if there were anything to do
    }
}

在您的开发工具中查看请求也会有所帮助。我不同意 Colin 的观点，即您应该将其设为 POST，因为 HTTP POST 应该用于创建新项目。您正在尝试获取信息，因此 HTTP GET 有意义。

我认为 Web.Api 默认假定方法是 GET，但使用 HttpGet 属性声明它肯定会解决这个问题。

Answer 3

回答

您使用了错误的uri。你需要api/titleEstimate/getTitleEstimate。这解释了并将解决您的 404。

回答后续问题

你正在做的所有其他事情几乎都有效。解决 404 后，您会发现您没有收到值 FromUri，并且您将有一个后续问题。因此，您需要将路由配置更改为：

config.Routes.MapHttpRoute(
    name: "Default",
    routeTemplate: "api/{controller}/{action}"
);

那么您不仅会解析 404，还会收到您作为查询字符串参数发送的 FromUri 值。

演示

这里是a fiddle for evidence，它正在调用this controller，它是is hosted LIVE here。我在工作版本中唯一更改的是 uri 来解析 404 和路由配置以确保您收到 FromUri 值。就是这样。

HTML

<label>Username:
    <input id="user" />
</label>
<button id="submit">Submit</button>
<button id="submit-fail">Submit Fail</button>
<div id="product"></div>

JavaScript

这会成功。

请注意，我们只需要domain，因为我们在这里进行跨站点脚本是为了演示目的。

var domain = "https://cors-webapi.azurewebsites.net";

$("#submit").click(function () {

    var uri = domain + '/api/titleEstimate/getTitleEstimate';

    var query = {
        "username": $("#user").val(),
        // other fields
    };

    $.getJSON(uri, query)
        .done(function (data) {
        $('#product').text(data);
    })
        .fail(function (jqXHR, textStatus, err) {
        $('#product').text('Error: ' + err);
    });
});

这将是 404。

$("#submit-fail").click(function () {

    var uri = domain + '/api/titleEstimate';

    var query = {
        "username": $("#user").val(),
        // other fields
    };

    $.getJSON(uri, query)
        .done(function (data) {
        $('#product').text(data);
    })
        .fail(function (jqXHR, textStatus, err) {
        $('#product').text('Error: ' + err);
    });
});

控制器

public class TitleEstimateController : ApiController
{
    public class EstimateQuery
    {
        public string username { get; set; }
    }

    public IHttpActionResult GetTitleEstimate([FromUri] EstimateQuery query)
    {
        // All the values in "query" are null or zero
        // Do some stuff with query if there were anything to do
        if(query != null && query.username != null)
        {
            return Ok(query.username);
        }
        else
        {
            return Ok("Add a username!");
        }
    }        
}

您可以阅读更多详细信息about WebApi routing here。通过阅读它，您可能会在您的路线配置中提出替代解决方案。还有很多terrific examples in this blog post。