Google QPX Api Format Response c#

Question

I am calling qpx search api and take response but response format is quite complex. Is Someone has c# code sample for formatting qpx result like google qpx demo page.

Answer 1

This will get you pretty close. Firstly, add the latest version of knockout and knockout.mapping to your scripts directory. (If you use nuget, search for knockout mapping and install it. You will need to get the latest version of knockout directly from knockout's site at http://knockoutjs.com/) Make sure to reference those scripts in your _Layout.cshtml or directly in your view. Below are the major components of the view. Note, even though you mentioned that you are getting the response back correctly, I added an example of calling your controller method from JavaScript using jQuery / AJAX. I'm also using bootstrap here for the layout. HTH.

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

  });
});
});

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