Question

背景：

您好，我正在开发网球俱乐部管理的在线应用...我想创建一个“可用的网球场界面”，允许用户检查球场是忙还是免费...所以在我的界面我有一个DatePicker，一个网球俱乐部的“谷歌地图”图像和代表所有网球场的13个标签。所以在这个界面中，如果网球场很忙，我想用红色“标记”标签，如果网球场是免费的，那就是绿色...

这是我的界面：

enter image description here

代码

为此，我正在使用Jquery，JavaScript和Json ......这是我在我的视图中尝试制作的内容：

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

控制器方法

    //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”出错，因此我的控制器方法（getTennisCourts）永远不会到达）我不明白为什么：

enter image description here

问题

所以，我的问题是：

1）为什么我在Firebug中出错？

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

3）我如何在我的“loadCourts”功能中使用“数据”来检查网球场是否免费？

对不起，请提前感谢...

对于Darin Dimitrov：

enter image description here

Answer 1

我不知道C＃，但这一行：

url: ({source:'@Url.Action("GetTennisCourt", "AvailableCourt")'}),

如果您有

，则将网址解析为对象

url : '/path/to/controller'

它可能有效

成功函数中的'data'是JSON，因此您可以将其视为对象。

data.xyz

Answer 2

试试这样：

// 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。我使用了datepicker的getDate方法来获取本机Date对象并对其进行编码。

MVC 3中可用的网球场界面：错误和问题

2 个答案: