Sending strings to MVC Controller via AJAX

Question

I am trying to send data via AJAX to MVC Controller method. I am trying to make booking system app. I want to check that user input exists in Entity Model. Ajax is pushing parameters to method controller but i don't get response.

Here is my AJAX call in View:

   var check = document.getElementById('check');
        //starttime.onchange = checkvalidate(startdate, starttime);
        $(check).click(function (datevalue, timevalue) {
            var startdate = document.getElementById('startdate');
            var starttime = document.getElementById('starttime');
            var log = document.getElementById('log');
            var datevalue = startdate.value;
            var timevalue = starttime.value;
            $.ajax({
                type: "POST",
                url: "/Home/CheckValidate",
                data: { 'start': datevalue, 'time': timevalue },
                dataType: "Boolean",
                success: function (response) {
                    console.log = response;
                    if (response == true) {
                        log.value = "YES";
                    } else
                    {
                        log.value = "NO";
                    }
                }
            })
        })

And method in controller:

public bool CheckValidate(string start, string time)
        {
            string datastart =  start + " " + time;
            DateTime startDate = Convert.ToDateTime(datastart);
            EventsEntities dc = new EventsEntities();
            var MatchedElements = dc.Events.Where(x => x.start <= startDate && startDate < x.end).FirstOrDefault();
            if (MatchedElements == null)
            {
                return true;
            } else
            {
                return false;
            }

        }

I want to send string inputs and get back data to show message that is possible to book that room. Where did I mistake?

Answer 1

There are a few things missing from your ajax call. You need to specify data you're sending in such way so that it is sent as JSON and properly. To do that you need to stringify your javascript json object and declare that you're sending a JSON data type. Here is your click event handler code with changes:

$(check).click(function () {
    var data = {
       start: datevalue,
       time: timevalue
    };
    $.ajax({
       type: "POST",
       url: "/Home/CheckValidate",
       data: JSON.stringify(data),
       contentType: "application/json; charset=utf-8",
       dataType: "boolean",
       success: function (response) {
          if (response) {
             log.val = "YES";
          } else {
             log.val = "NO";
          }
       }
    })
 });

You can read more about it here: jquery ajax documentation

There are also other existing question here that already answer your question such as this one .

Answer 2

You can do like this.

var obj = {};
    obj.startdate = document.getElementById('startdate');
    obj.starttime = document.getElementById('starttime');
    
        $.ajax({
            type: "POST",
            url: "/Home/CheckValidate",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                //failure  message
            }
        });
        function OnSuccess(response) {
            //do your stuff after success response
        }