1

This is my model class:

public class SearchForFlight
{
    public SearchForFlight()
    {
        Segments = new otherType();
    }
    public int AdultCount { get; set; }
    public JourneyType JourneyType { get; set; }
    public string Sources { get; set; }

    public otherType Segments { get; set; }
}
public class otherType
{
    public string Origin { get; set; }
    public string Destination { get; set; }
    public FlightCabinClass FlightCabinClass { get; set;}
    public DateTime PreferredDepartureTime { get; set;
    public DateTime PreferredArrivalTime { get; set; }
}

Now, My requirement is to post objects along with nested object to an external api. The required form is something like this:

{
   AdultCount: $("#AdultCount").val(),
   JourneyType: $("#JourneyType :selected").text(),
   PreferredAirlines: null,
   Segments: [
              {
               Origin: $("#Origin").val(),
               Destination: $("#Destination").val(),
               FlightCabinClass: $("#FlightCabinClass").val(),
               PreferredDepartureTime:$("#PreferredDepartureTime").val(),
               PreferredArrivalTime: $("#PreferredArrivalTime").val(),
              }
             ]
        }

So, i have created another class OtherType and put all those nested objects into it. I got the idea from this so question How to send nested json object to mvc controller using ajax Now, this is my Script tag with all the code inside to post simple objects along with nested objects.But nested objects value comes out to be null. How should i model this code here.

  <script>
                $(document).ready(function () {                 
                    $("#btnPost").click(function () {
                        var sof = {
                            AdultCount: $("#AdultCount").val(),
                            JourneyType: $("#JourneyType :selected").text(),
                            PreferredAirlines: null,
                                Segments: [
                                {
                                    Origin: $("#Origin").val(),
                                    Destination: $("#Destination").val(),
                                    FlightCabinClass: $("#FlightCabinClass").val(),
                                    PreferredDepartureTime: $("#PreferredDepartureTime").val(),
                                    PreferredArrivalTime: $("#PreferredArrivalTime").val(),
                                }
                            ],
                        };

                        $.ajax(
                            {
                                url: "/api/Flight/SearchFlight",
                                type: "Post",
                                data: sof,
                                success: function (data) {
                                    alert(data);
                                }
                            });        
                    });
                });
        </script>

Posted Properties values for Origin, Destination comes out to be null.

The textbox rendered on view page are something like this:

 @Html.TextBoxFor(model => model.Segments.Origin)

Any hint please.

Community
  • 1
  • 1
duke
  • 1,816
  • 2
  • 18
  • 32
  • what is your FlightCabinClass model ? – Karthik M R May 16 '16 at 11:50
  • `Segments` is an object, not a collection so you cannot create an array. Just use `data: $('form.Serialize(),` to serialize all values of all form controls, or if you do want to write all this manually, then use `Segments.Origin = $("#Segments_Origin").val(),` etc (and note that your element will have `id="Segments_Origin"`, not `id="Origin"`) –  May 16 '16 at 11:50
  • YUPP u r right i have changed those id values already but i have to post all these values to certain air portal rest api so i was trying to post data as given in documentation of api otherwise it replies Bad Request @StephenMuecke – duke May 16 '16 at 11:55
  • 1
    using `$('form').serialize()` will correctly serialize all your form controls assuming you have generated you view correctly. –  May 16 '16 at 11:57

1 Answers1

1

Remove the array [] for Segments. Use contentType and stringify in your $.ajax func. Use the generated id for the Origin. It might not be "Origin". So,pls change it accordingly.

 <script>
            $(document).ready(function () {                 
                $("#btnPost").click(function () {
                    var sof = {
                        AdultCount: $("#AdultCount").val(),
                        JourneyType: $("#JourneyType :selected").text(),
                        PreferredAirlines: null,
                        Segments: {
                                Origin: $("#Origin").val(),
                                Destination: $("#Destination").val(),
                                FlightCabinClass: $("#FlightCabinClass").val(),
                                PreferredDepartureTime: $("#PreferredDepartureTime").val(),
                                PreferredArrivalTime: $("#PreferredArrivalTime").val(),
                            },
                    };

                    $.ajax(
                        {
                            url: "/api/Flight/SearchFlight",
                            type: "Post",
                            contentType: 'application/json',
                            data: JSON.stringify(sof),
                            success: function (data) {
                                alert(data);
                            }
                        });        
                });
            });
    </script>
Karthik M R
  • 980
  • 1
  • 7
  • 12
  • for the good sake, at last api returned 200 status code. i was just strict about to give rest api data in format mentioned in document however ur suggesstion worked @Karthik M R – duke May 16 '16 at 12:12
  • If you are using nested objects, the best practise is to use JSON.stringify function and mention application/json. If you don't use JSON.stringify then, the default behaviour of jquery is to send the data as application/x-www-form-urlencoded – Karthik M R May 16 '16 at 12:26