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

我正在制作一个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’/’查询),但这也没有用.在我传递这个对象之前,我正在成功调用它,所以我认为路由通常是正常的.我试过一个类型转换器,但这没有帮助,仍然是404.有人看到我错过了什么/做错了吗？

解决方法:

回答

你使用的是错误的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的

这将成功.

注意,我们只需要域名,因为我们在这里为了演示目的而进行跨站点脚本编写.

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.

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

相关推荐