Pass komplexe parameter zu Web-API-service via javascript

Antwort

Verwenden Sie die falschen uri. Sie müssen api/titleEstimate/getTitleEstimate. Das erklärt und aufgelöst wird, Ihre 404.

Antwort auf folgefrage

Alles, was Sie tun fast funktioniert. Nach beheben der 404, werden Sie feststellen, dass Sie nicht erhalten den Wert FromUri, und Sie werden eine follow-up-Frage. So müssen Sie Ihre route ändern config so:

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

Dann werden Sie nicht nur um Ihrer 404 erhalten aber auch die FromUri Wert, den Sie senden als query-string-Parameter.

Demo

Hier ist ein Turnschuh für Beweise, die Berufung in dieser controller, die gehostet wird LIVE hier. Das einzige, was ich geändert habe in der funktionierenden version werden die uri zu beheben, die 404 und die route config, um sicherzustellen, erhalten Sie das FromUri Wert. Das ist alles.

HTML

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

JavaScript

Dies auch gelingen wird.

Hinweis:, wir benötigen nur domain weil wir tun, cross-site-scripting-hier für demo-Zwecke.

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

Dies wird 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!");
        }
    }        
}

Lesen Sie mehr details über WebApi-routing hier. Von es zu Lesen, können Sie wahrscheinlich kommen mit einer alternativen Lösung innerhalb Ihrer route config. Es gibt auch viele tolle Beispiele in diesem blog-post.

Für komplexe Objekte, die ich in der Regel senden Sie Sie in den Textkörper der Meldung anstatt der URL.

Hätten Sie etwas dagegen, wenn ein ähnlicher Ansatz wie die Antwort auf diese Frage?
Wie gehen json POST-data-Web-API-Methode als Objekt

Wie es scheint, die einfacher/natürlicher Ansatz.

Etwas wie (ungetestet, aber sollte in der Nähe sein):

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