Available Tennis Court Interface in MVC 3: Errors and Questions

Question

Context:

Hello, I'm developing an on line application of Tennis Club Management... I would like to create an "Available Tennis Court Interface" that allows the user to check if a court is busy or free... So in my Interface I have one DatePicker, an image "Google Maps" of the Tennis Club and 13 labels that represents all tennis courts. So in this interface, if a tennis court is busy, I would like to "color" the label in red and if the tennis court is free, in green...

Here my Interface:

enter image description here

Code

For that, I'm using Jquery, JavaScript and Json... Here what I have tried to make in my 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 method

    //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 );
    }

When I'm using Firebug, I get an error in my function "loadCourts" and so my controller's method (getTennisCourts) is never reaches) I don't understand why:

enter image description here

Questions

So, my questions are :

1) Why get I an error in Firebug ?

2) Why is my Controller's method never reaches ?

3) How could I use "data" in my function "loadCourts" to check if a tennis court is free or not ?

Sorry for the length and thanks in advance...

For Darin Dimitrov :

enter image description here

score 1 · Answer 1 · answered Mar 22 '12 at 09:09

I dont know C# but this line:

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

Is resolving the url as an object, if you had

url : '/path/to/controller'

It might work

The 'data' in the success function is JSON so you can treat it as an object.

data.xyz

Darin Dimitrov · Accepted Answer · 2012-03-22T09:35:02.100

1

Try like this:

// 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);
        }
    }
});

Notice that I used $.ajax instead of $.post. And I have used the datepicker's getDate method to fetch the native Date object and encode it.

edited Mar 22 '12 at 09:35

answered Mar 22 '12 at 09:16

Darin Dimitrov

1,023,142
271
3,287
2,928

Error: maDate is null :( data: JSON.stringify({date:'/Date('+maDate.getTime()+')/'}), – Razor Mar 22 '12 at 09:35
@Francesco, yes, I have just realized my mistake. I have updated my answer to fix it. JSON.stringify is not needed in this case. – Darin Dimitrov Mar 22 '12 at 09:37
Error: maDate.getTime() is not a function... Maybe remove "getTime()? – Razor Mar 22 '12 at 09:43
If I remove getTime() maDate= "03/29/2012 07:21" but I get an other error : The parameters dictionary contains a null entry for parameter 'date' of non-nullable type 'System.DateTime' for method 'System.Web.Mvc.JsonResult GetTennisCourt(System.DateTime)' in 'TennisOnline.Controllers.AvailableCourtController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.< In my view, I must change the argument method type "DateTime date" to "string date" and make a cast ? – Razor Mar 22 '12 at 09:48
1

@Francesco, I have tested with `data: '{ "date":"\\/Date(' + maDate.getTime() + ')\\/" }'` and this worked fine with `public ActionResult GetTennisCourt(DateTime date) { ... }`. – Darin Dimitrov Mar 22 '12 at 10:16
He reaches my Controller's method ! Thanks ! But I get an other error when I return :return Json(courts, JsonRequestBehavior.AllowGet ); Error: http://localhost:4987/AvailableCourt/GetTennisCourt?%7B%20%22date%22%3A%22%5C%2FDate(1332393720000)%5C%2F%22%20%7D= Aborted Source: { "date":"\/Date(1332393720000)\/" } – Razor Mar 22 '12 at 10:33
Thank you for your response, I will upload an image in my first post... The error occurs after the return in my controller's method – Razor Mar 22 '12 at 10:43
The AJAX request seems to be aborted by the browser. How long does it take? Maybe it times out? – Darin Dimitrov Mar 22 '12 at 10:55
Now I get a : Circular Reference Serialization Error – Razor Mar 22 '12 at 11:13
This could help me : http://stackoverflow.com/questions/1153385/a-circular-reference-was-detected-while-serializing-an-object-of-type-subsonic – Razor Mar 22 '12 at 11:23
1

Indeed. Circular object graphs cannot be JSON serialized. You should use view models. – Darin Dimitrov Mar 22 '12 at 11:57

Available Tennis Court Interface in MVC 3: Errors and Questions

2 Answers2