MVC - passing js variable to controller through ajax then using it in view

Question

script:

<script type="text/javascript">
$(function () {
    $('#datetimepicker').datetimepicker({
        disabledDates: [
            new Date()
        ],
        inline: true,
        format: 'L',
        daysOfWeekDisabled: [0, 6],
        minDate: new Date(),
        useCurrent: false
    });

    $('#datetimepicker').on('change.datetimepicker', function (event) {
        var formatted_date = event.date.format('M/DD/YYYY');
        $('#datetimepickerOut').val(formatted_date);

        $.ajax({
            url: '@Url.Action("Create")',
            contentType: 'application/html; charset=utf-8',
            data: { calendarDate: formatted_date },
            success: function (data) {
                $('#divTimeSlots').fadeIn("slow");
            },
            failure: function (result) {
                alert(errMsg);
            }
        });

    });

    $('#divTimeSlots input').on('change', function (event) {
        $('#SlotTimeOut').val($("[type='radio']:checked").val());
    });
});
</script>

controller:

public ActionResult Create(string calendarDate)
{
    testViewModel mvm = new testViewModel();

    mvm.myDate = calendarDate;
}

Create view:

<div class="col-md-5" id="divTimeSlots" style="display: none;">
@{
    var getDate = Model.myDate;

    foreach (var rTimeSlots in Model.ListSlotTimeForRadio.Where(n =>
        n.BranchCode == "MNL1" &&
        n.Slots > 0
        &&
        n.SlotCode == getDate
        ))
    {
        @Html.RadioButtonFor(model => model.ListSlotTimeForRadio, rTimeSlots.SlotTime,
        new { htmlAttributes =
            new Dictionary<string, object>
            {
                { "id", "timeSlots" },
                { "class", "form-control" }
            }
        })

        @rTimeSlots.SlotTime<br>
    }
}
</div>

as you can see in my script, that is inline datepicker. when i click on any date in the timepicker, the value will be pass on the variable formatted_date. formatted_date will also be pass on to controller through ajax (see calendarDate). then then calendarDate is passed to model as myDate (see controller). clicking on any date, the radiobutton will appear base on the foreach and .fadein("slow") in script. but, when i add the && n.SlotCode == getDate in foreach, the radiobutton list is not appearing. getDate is myDate.

when i use && n.SlotCode == "2/22/2019", that is working, radiobutton list is showing. but when i use == getDate, it doesn't work.

as i'm debugging it, i'm getting the date correctly. but the radiobutton list is not appearing, i placed it in the success function. but it seems that it is not working correctly.

i don't know what's wrong. please help. tia

Answer 1

You are missing a parameter on your ajax call. Add

    $.ajax({
        url: '@Url.Action("Create")',
        type: 'POST',
        contentType: 'application/html; charset=utf-8',
        data: { calendarDate: formatted_date },
        success: function (data) {}

At the moment you're sending nothing to the controller

Answer 2

Can you debug your view code and see if below code return true:

.SlotCode == getDate

I am assuming that below conditions are true

n.BranchCode == "MNL1" && n.Slots > 0

That is the only reason that you are not able to see the radio button.