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

Question

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

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

这是我的 Controller :

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

回答

您使用了错误的 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 .我在工作版本中唯一更改的是用于解析 404 的 uri 和用于确保您收到 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

这会成功。

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

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

Controller

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 .