Question

我正在开发网球俱乐部管理的在线申请...（MVC 3，实体框架代码首先......）

我有一个界面，允许用户咨询可用的网球场：

enter image description here

在我的“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>

我从来没有收到消息“测试”......所以我的Ajax功能或我的控制器的方法出错...我的目标是到网球场，检查他们是否有空并改变如果忙，则为红色，如果有空，则为绿色......

你能帮我找一下我做错了吗？抱歉:(但我是Ajax的初学者......

Answer 1

此行未在查询字符串中传递日期：

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

应该是：

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

编辑：您还没有正确获取该值：

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

应该是：

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

Answer 2

您的网址错误:-)

应该是：

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

Answer 3

我同意@CAbbott您的网址未正确创建。但是对于日期值（以及一般的多个查询字符串值），最好在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文档：

data选项可以包含表单的查询字符串 key1 = value1＆amp; key2 = value2，或形式为{key1：'value1'，key2的地图： '值'}。如果使用后一种形式，则将数据转换为a 在发送之前使用jQuery.param（）查询字符串。

Answer 4

你的datetimepicker（）调用必须发生在document.ready中。这是更正后的代码：

<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 5

更详细的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);
        }
    }
});

Ajax功能似乎不起作用

5 个答案: