通过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

回答

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

回答跟进问题

你正在做的其他事情几乎都有效.解决404后,您会发现自己没有收到该值FromUri,并且您会有一个跟进问题.因此,您需要将路由配置更改为:

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

然后,您不仅要解析404,还要接收FromUri您作为查询字符串参数发送的值.

演示

这是一个证据的小提琴,它正在调用这个控制器,它在这里托管LIVE.我在工作版中唯一更改的是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!");
        }
    }        
}

您可以在此处阅读有关WebApi路由的更多详细信息.通过阅读,您可以在路线配置中找到替代解决方案.这篇博文中还有很多很棒的例子.