将参数从Javascript发送到控制器

Question

I'm modifying an ASP.NET project that I didn't worked on before. I added a datepicker object :

<input id="datepicker" />
<script>
    $("#datepicker").kendoDatePicker({
        value: new Date()
        change: UpdateVehiculesSurSite
    });
</script>

And tried to modify the "UpdateVehiculesEnAttente" method to send the date picked to my controller :

function UpdateVehiculesEnAttente(){
    var datepicker = $("#datepicker").data("kendoDatePicker");
    console.log(typeof datepicker);
    if (datepicker!==null && typeof datepicker !== "undefined"){
        var value = datepicker.value();
        console.log(value);
        value = kendo.toString(value,"dd/MM/yyyy")
        alert(value);

        $(document).ready($.ajax({
            url: 'Entrees_Sorties/Get_Vehicules_EnAttente',
            type: 'POST',
            data: {'date' : value},
            contentType: 'application/json',
            success: function (retour) {
                $("#DivVehiculesEnAttente").html(retour);
                console.log("update attente success");
            },
            error: function (xhr, status, error) {
                montrerNotificationNoConnexion();
            }
        }));
    //}
    return false;    
}

The first problem is that the project run the javascript file first, so the datepicker isn't initialized. To try my Controller method, I gave "value" a date.
My controller method is the following :

public ActionResult Get_Vehicules_EnAttente([DataSourceRequest] DataSourceRequest request, string date){
    try{
        List<List<Vehicule>> Data = new List<List<Vehicule>>();               
        DateTime dt = Convert.ToDateTime(date);
        Data.Add(Models.Vehicule.Get_Vehicules_EnAttente_ByDate(dt, true));
        return PartialView("VehiculesEnAttente", Data);               
    } catch (Exception e) {
        WorkflowWCF.Log.enregistrer_erreur(new Exception("Une erreur est survenue lors de la récupération des véhicules planifiés", e));
        return Json(new List<Vehicule>().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }
}

The result is that my Ajax request return error and launch the "montrerNotificationNoConnexion" method.

Any idea why ?

EDIT : Using Firebug, I get this

Do you think the problem could be that "date" contain "17%2F02%2F2016" instead of "17/02/2016" ?

EDIT2 : One of the problem was the string format. I changed it to "02/17/2016" but still not working.

Answer 1

You have to send the date in ISO 8601 format, then the MVC modelbinder can bind it.

var GlobalJsHelpers = GlobalJsHelpers || {};
/// <summary>
/// Takes a utc js date and converts it to a iso8601 utc string
/// </summary>
GlobalJsHelpers.Iso8601FromUtc = function(utcDate) {
    //create a two digit month string (01-12)
    var month = ('0' + (utcDate.getUTCMonth() + 1)).substr(-2);
    //create a two digit day string (01-31)
    var day = ('0' + utcDate.getUTCDate()).substr(-2);
    return utcDate.getUTCFullYear() + '-' + month + '-' + day;
};

Usage:

data: {'date' :  GlobalJsHelpers.Iso8601FromUtc(dateValueInUtc)}

Answer 2

You are defining your content type as contentType: 'application/json', and then send data as simple text.

You should remove so that jquery uses the default 'application/x-www-form-urlencoded; charset=UTF-8' 'application/x-www-form-urlencoded; charset=UTF-8' type.