c# - MVC 3 中可用的网球场接口(interface) : Errors and Questions

Question

上下文:

您好，我正在开发网球俱乐部管理的在线应用程序...我想创建一个“可用网球场界面”，允许用户检查球场是否繁忙或空闲...所以在我的界面 我有一个 DatePicker、一张网球俱乐部的“Google map ”图像以及代表所有网球场的 13 个标签。因此，在这个界面中，如果网球场繁忙，我想将标签“着色”为红色，如果网球场空闲，则将标签“着色”为绿色......

这是我的界面:

代码

为此，我使用 Jquery、JavaScript 和 Json...这是我在 View 中尝试做的:

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

    $.post({
        type: 'POST',
        url: ({source:'@Url.Action("GetTennisCourt", "AvailableCourt")'}),
        data: "{ 'date' : " + maDate + " }",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        timeout: 8000,
        success: function(data) {
            alert('test');
            //How to use data and verify if a tennis is free or not ?                                   
        },
        error: function(x, t, m) {
            if (t === "timeout") {
                window.HandleTimeout();
            } else {
                alert(t);
            }

        }
    });
}
</script>

<h2>Emplacement(s) disponible(s)</h2>

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

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

//Here the label

<div class="AvailableCourt">
<div class="label1" align="center"> 
    @Html.Label("1")
</div>
<div class="label2" align="center">
    @Html.Label("2")
</div>
<div class="label2" align="center">
    @Html.Label("3")
</div>
<div class="label2" align="center">
    @Html.Label("4")
</div>
<div class="label3" align="center">
    @Html.Label("5")
</div>
<div class="label4" align="center">
    @Html.Label("6")
</div>
<div class="label5" align="center">
    @Html.Label("7")
</div>
<div class="label6" align="center">
    @Html.Label("8")
</div>
<div class="label7" align="center">
    @Html.Label("9")
</div>
<div class="label8" align="center">
    @Html.Label("10")
</div>
<div class="label9" align="center">
    @Html.Label("11")
</div>
<div class="label10" align="center">
    @Html.Label("12")
</div>
<div class="label11" align="center">
    @Html.Label("13")
</div>
}
</div>

Controller 方法

    //Get all the tennis courts and verify if a court is busy or not (Available attribute)
    public JsonResult GetTennisCourt(DateTime date)
    {
        System.Diagnostics.Debug.WriteLine("test");
        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);
        System.Diagnostics.Debug.WriteLine("test");
        return Json(courts, JsonRequestBehavior.AllowGet );
    }

当我使用 Firebug 时，我的函数“loadCourts”中出现错误，因此我的 Controller 的方法 (getTennisCourts) 永远不会到达)我不明白为什么:

问题

所以，我的问题是:

1) 为什么我在 Firebug 中出现错误？

2)为什么我的 Controller 的方法永远不会到达？

3)我如何在函数“loadCourts”中使用“data”来检查网球场是否空闲？

抱歉，篇幅较长，提前致谢...

达林·季米特洛夫:

Answer 1

尝试这样:

// get the underlying Date object from the datepicker instead
// of using .val()
var maDate = $('#datePicker').datepicker('getDate');

$.ajax({
    type: 'POST',
    url: '@Url.Action("GetTennisCourt", "AvailableCourt")',
    data: '{ "date":"\\/Date(' + maDate.getTime() + ')\\/" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    timeout: 8000,
    success: function(data) {
        // we loop through the collection of courts 
        // returned by the server and we can access each
        // element's properties
        $.each(data, function(index, court) {
            alert(court.ID);
        });
    },
    error: function(x, t, m) {
        if (t === 'timeout') {
            window.HandleTimeout();
        } else {
            alert(t);
        }
    }
});

请注意，我使用了 $.ajax 而不是 $.post。我使用了日期选择器的 getDate 方法来获取 native Date 对象并对其进行编码。