Question

我正在调用qpx搜索API并做出回应但响应格式非常复杂。是否有人使用c＃代码示例来格式化qpx结果，如google qpx演示页面。

Answer 1

这会让你非常接近。首先，将最新版本的knockout和knockout.mapping添加到您的脚本目录中。（如果您使用nuget，请搜索淘汰赛映射并安装它。您需要直接从淘汰赛网站http://knockoutjs.com/获取最新版本的淘汰赛。）确保在_Layout.cshtml中引用这些脚本或直接在您的视图中。以下是该视图的主要组成部分。请注意，即使您提到正确地获得了响应，我还添加了一个使用jQuery / AJAX从JavaScript调用控制器方法的示例。我也在这里使用bootstrap进行布局。 HTH。

＆＃13;

var qpxResponse = {};

$(document).ready(function() {
      //this is a button click event. Your button should have id of checkAir
      $("#checkAir").click(function() {
            $.ajax({
                  method: "POST",
                  url: "@Url.Action("
                  Replace with Method Name In Your Controller ", "
                  Replace - With - Controller.Home
                  for HomeController ")",
                  data: {
                    "request": {
                      "slice": [{
                            "origin": "CLE",
                            "destination": "SFO",
                            "date": "2017-01-01' }], "
                            passengers ": { "
                            adultCount ": 1, "
                            infantInLapCount ": 0, "
                            infantInSeatCount ": 0, "
                            childCount ": 0, "
                            seniorCount ": 0 }, "
                            solutions ": 2, "
                            refundable ": false } }
                       })
  .done(function (response) {
    console.log(response);
    qpxResponse = ko.mapping.fromJS(response);  //populate the flights
    ko.applyBindings(qpxResponse); //using knockout to quickly map object to web page elements

  });
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<button id="checkAir">Submit</button>

<div class="results">
  <div class="col-md-12">
    <h1>Results</h1>
  </div>
  <div id="tripOps" data-bind="foreach:trips.tripOption">
    <div class="col-md-12">
      <div class="col-md-1">Solution</div>
      <div class="col-md-1" data-bind="text:$index() + 1"></div>
      <div class="col-md-1 col-md-offset-1">Sale Price:</div>
      <div class="col-md-8" data-bind="text:saleTotal"></div>
    </div>
    <div data-bind="foreach: slice">
      <div class="col-md-12">
        <div class="col-md-1 col-md-offset-1">Slice</div>
        <div class="col-md-10" data-bind="text:$index() + 1"></div>
        <div data-bind="foreach: segment">
          <div class="col-md-offset-2 col-md-1" data-bind="text:flight.carrier"></div>
          <div class="col-md-9" data-bind="text:flight.number"></div>
          <div data-bind="foreach: leg">
            <div class="col-md-offset-3 col-md-2" data-bind="text:origin"></div>
            <div class="col-md-2" data-bind="text:departureTime"></div>
            <div class="col-md-offset-1 col-md-2" data-bind="text:destination"></div>
            <div class="col-md-2" data-bind="text:arrivalTime"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Google QPX Api格式响应c＃

1 个答案: