Функция Ajax не работает

Question

Я разрабатываю онлайн-приложение для управления теннисным клубом ... (MVC 3, Entity Framework Code, сначала ...)

У меня есть интерфейс, который позволяет пользователю обращаться к доступному теннисному корту :

В моем "AvailableCourtController" есть функция, которая возвращает теннисные корты:

 [HttpPost]
 public JsonResult GetTennisCourt(DateTime date)
    {
        var reservations = db.Reservations.Include(c => c.Customer);

        foreach (var reservation in reservations)
        {

            //Verify that a court is available or not
            if (reservation.Date ==date)
            {
                if (date.Hour > reservation.FinishTime.Hour || date.Hour < reservation.StartTime.Hour)
                {
                    var id = reservation.TennisCourtID;

                    TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(t => t.ID == id);
                    tennisCourt.Available = true;
                    db.Entry(tennisCourt).State = EntityState.Modified;
                    db.SaveChanges();
                }
                else
                {
                    var id = reservation.TennisCourtID;
                    TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(s => s.ID == id);
                    tennisCourt.Available = false;
                    db.Entry(tennisCourt).State = EntityState.Modified;
                    db.SaveChanges();
                    break;
                }
            }
        }

        var courts = from c in db.TennisCourts
                     select c;
        courts = courts.OrderBy(c => c.ID);

        return Json(courts, JsonRequestBehavior.AllowGet );
    } 

Итак, я хотел бы изменить цвет моей этикетки, если теннисный корт занят или свободен ... Для этого я использую «Ajax»:

"Просмотр" (что я пытался сделать)

<input id="datePicker" type= "text" onchange="loadCourts"/>
<script type="text/javascript">
$('#datePicker').datetimepicker();
</script>           

<script type="text/javascript">
function loadCourts() {
var myDate = $('#datePicker').value();

$.ajax({
    url: ("/AvailableCourt/GetTennisCourt?date=myDate "),
    success: function (data) {
        alert('test');
        //change label's color                                    
    }
});
}
</script>

Я никогда не получаю сообщение "test" ... Так что я что-то не так сделал с моей функцией Ajax или методом моего контроллера ... Моя цель - получить теннисный корт, проверить, свободны они или нет, и изменить цвет красный, если занят, и зеленый, если свободен ...

Можете ли вы помочь мне выяснить, что я делаю неправильно, пожалуйста? Извините :( Но я новичок в Ajax ...

Answer 1

Эта строка не передает дату в строке запроса:

url: ("/AvailableCourt/GetTennisCourt?date=myDate "),

должно быть:

url: ("/AvailableCourt/GetTennisCourt?date=" + myDate),

EDIT : Вы также не получаетеправильное значение:

var myDate = $('#datePicker').value();

должно быть:

var myDate = $('#datePicker').val();

Answer 2

Более подробный вызов AJAX:

$.ajax({
    type: 'POST',
    data: "{ 'date' : " + myDate + " }",
    url: '/AvailableCourt/GetTennisCourt',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    timeout: 8000, // 8 second timeout
    success: function (msg) {
    },
    error: function (x, t, m) {
        if (t === "timeout") {
            HandleTimeout();
        } else {
                    alert(t);
        }
    }
});

Answer 3

Ваш вызов datetimepicker () должен происходить внутри документа. Вот исправленный код:

<input id="datePicker" type= "text"/>

<script type="text/javascript">
    $(document).ready(function () {
        $('#datePicker').datetimepicker();
        $('#datePicker').change(loadCourts);
    });

    function loadCourts() {
        var myDate = $('#datePicker').val();

        $.post({
            data: "{ 'date' : " + myDate + " }",
            url: (@Url.Action("AvailableCourt", "GetTennisCourt"),
            success: function (data) {
                alert('test');
                //change label's color                                    
            }
        });
    }
</script>

}

Answer 4

Я согласен с @CAbbott, что ваш URL был создан неправильно.Но со значениями даты (и несколькими значениями строки запроса в целом) вам лучше добавить параметр даты в литерал объекта данных в вызове ajax:

function loadCourts() {
    var myDate = $('#datePicker').val();

    $.ajax({
        url: ("/AvailableCourt/GetTennisCourt"),
        data: { date: myDate },
        success: function (data) {
            alert('test');
            //change label's color                                    
        }
    });
}

jQuery добавит ваши данные в строку запросаи отформатируйте его соответствующим образом.

Из jQuery API документы:

Параметр данных может содержать любую строку запроса в виде key1 = value1 & key2 =значение2 или карта вида {ключ1: «значение1», ключ2: «значение2»}.Если используется последняя форма, данные перед отправкой преобразуются в строку запроса с помощью jQuery.param ().

Answer 5

Ваш URL неверен :-)

Должно быть:

$.ajax({
    url: "/AvailableCourt/GetTennisCourt?date="+myDate, // without ( )
    success: function (data) {
        alert('test');
        //change label's color                                    
    }
});