Consider the following model:

public class BookingModel : RenderModel
{
        public BookingModel() : base(UmbracoContext.Current.PublishedContentRequest.PublishedContent){}

        [UmbracoDisplayName("Booking.DepartureDate")]
        public string booking_departure_date { get; set; }

        [UmbracoRequired("Booking.Validation.Required")]
        [UmbracoRegularExpression("Booking.Validation.Range", "[1-99]")]
        [UmbracoDisplayName("Booking.Passengers")]
        public int booking_passengers { get; set; }

        [UmbracoDisplayName("Booking.FirstName")]
        [UmbracoRequired("Booking.Validation.Required")]
        public string booking_firstname { get; set; }

        [UmbracoDisplayName("Booking.Surname")]
        [UmbracoRequired("Booking.Validation.Required")]
        public string booking_surname { get; set; }
}

On the front-end, when a user selects a date using a jQuery UI datepicker, an ajax call is fired to a service that returns some JSON and populates a select list for the number of passengers using the following jQuery snippet:

$('#booking_departure_date').datepicker({
            altField: '#booking_departure_date',
            altFormat: 'dd/mm/yy',
            dateFormat: 'dd/mm/yy',
            minDate: 0,
            defaultDate: new Date(),
            onSelect: function (date) {
                var $passengers_container = $('#booking_passengers_container');
                var $passengers = $('#booking_passengers');
                $passengers_container.hide();
                $.ajax({
                    url: '/umbraco/api/pricing/getprices',
                    type: 'POST',
                    data: { Id: page, Date: date},
                    dataType: 'json',
                    success: function (data){
                        $passengers.empty();
                        for (var i = 0; i < data.length; i++){
                            console.log(data[i]);
                            $passengers.append('<option value="' + data[i].People + '" data-price="' + data[i].Price + '" data-deposit="' + data[i].Deposit + '">' + data[i].People + '</option>');
                        }
                        $passengers_container.show();
                        $passengers.change();
                    }
                })
            }
        });

The passenger select dropdown starts off as hidden and is only shown when the user makes a selection.

As you can see, the script also returns values for data attributes to store some additional information such as the price and deposit amount to be displayed when a user selects the number of passengers.

This all works fine and I am happy with it however, my issue arises when it comes to model validation. If the model is valid everything is fine and it will proceed to payment validation however, if the model is invalid I begin to run into problems.

Firstly, because the values of the passenger select dropdown are dynamic, when the post back occurs the values returned from the JSON service call have disappeared meaning the value for this property is lost as well as the other available options. Secondly, the field is once again hidden.

Does anyone know how I can preserve the selected value for passengers on post back?