Transmettre des valeurs de MVC contrôleur de code javascript

J'ai besoin de passer de la liste/json/tableau de dates de l'information à un Jquery UI Datepicker dynamiquement par un jsonresult dans un contrôleur MVC.

Suivant le lien ci-dessous, je suis en mesure de mettre en évidence certaines dates dans le contrôle datepicker.
http://jquerybyexample.blogspot.com/2012/05/highlight-specific-dates-in-jquery-ui.html

    < script type ="text/javascript">
    $(document).ready( function () {

    var SelectedDates = {};
    SelectedDates[ new Date('05/28/2012' )] = new Date( '05/28/2012' );
    SelectedDates[ new Date('05/29/2012' )] = new Date( '05/29/2012' );
    SelectedDates[ new Date('05/30/2012' )] = new Date( '05/30/2012' );
    //want to replace the above three lines with code to get dates dynamically
    //from controller

    $( '#releasedate' ).datepicker({
        dateFormat: "mm/dd/yy" ,
        numberOfMonths: 3,
        duration: "fast" ,           
        minDate: new Date(),
        maxDate: "+90" ,
    beforeShowDay: function (date) {
        var Highlight = SelectedDates[date];
        if (Highlight) {
            return [true , "Highlighted", Highlight];
        }
        else {
            return [true , '', '' ];
        }
    }
});

Le code ci-dessus met en évidence ces trois dates sur le calendrier de contrôle(UIDatepicker).Au lieu de codage en dur des dates comme ci-dessus... Mon défi est d'obtenir ces dates dynamiquement à partir d'un contrôleur et de la transmettre à la var SelectedDates dans le code javascript ci-dessus.

Contrôleur jsonresult code:

  public JsonResult GetReleasedDates(string Genre)
{

    var relDates = service.GetDates(Genre)//code to get the dates here

    return Json(relDates, JsonRequestBehavior .AllowGet);

    //relDates will have the dates needed to pass to the datepicker control.

}

Merci pour l'aide.

êtes-vous de faire un appel ajax?
Je n'ai pas fait quelque chose.. encore. Je sais que j'ai les dates à venir à partir de la manette et j'ai le uidatepicker code... j'ai fait appel ajax pour transmettre des valeurs à partir de l'interface utilisateur du contrôleur avant.. maintenant je veux l'autre façon de contrôleur de l'interface utilisateur
l'interface utilisateur aura toujours de tirer la manette. c'est la façon de le http fonctionne aujourd'hui.

InformationsquelleAutor ZVenue | 2012-05-21

La première possibilité est d'utiliser un modèle qui sera directement sérialisé en JSON:

public ActionResult Index()
{
    //TODO: obviously those will come from your service layer
    var selectedDates = new Dictionary<string, DateTime> 
    { 
        { new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
        { new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
        { new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
    };
    return View(selectedDates);
}

et dans la vue:

@model IDictionary<string, DateTime>

<script type ="text/javascript">
    $(document).ready(function () {

        var selectedDates = @Html.Raw(Json.Encode(Model));

        $('#releasedate').datepicker({
            dateFormat: "mm/dd/yy",
            numberOfMonths: 3,
            duration: "fast",
            minDate: new Date(),
            maxDate: "+90",
            beforeShowDay: function (date) {
                var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                var highlight = selectedDates[key];
                if (highlight) {
                    return [true, "Highlighted", highlight];
                }
                else {
                    return [true, '', ''];
                }
            }
        });
    });
</script>

L'autre possibilité est d'utiliser AJAX pour récupérer les selectedDates plus tard:

public ActionResult Index()
{
    return View();
}

public ActionResult GetSelectedDates()
{
    //TODO: obviously those will come from your service layer
    var selectedDates = new Dictionary<string, DateTime> 
    { 
        { new DateTime(2012, 5, 28).ToString("yyyy-M-dd"), new DateTime(2012, 5, 28) },
        { new DateTime(2012, 5, 29).ToString("yyyy-M-dd"), new DateTime(2012, 5, 29) },
        { new DateTime(2012, 5, 30).ToString("yyyy-M-dd"), new DateTime(2012, 5, 30) },
    };
    return Json(selectedDates, JsonRequestBehavior.AllowGet);
}

et puis:

<script type ="text/javascript">
    $(document).ready(function () {
        $.getJSON('@Url.Action("GetSelectedDates")', function(selectedDates) {
            //Only inside the success callback of the AJAX request you have
            //the selected dates returned by the server, so it is only here
            //that you could wire up your date picker:
            $('#releasedate').datepicker({
                dateFormat: "mm/dd/yy",
                numberOfMonths: 3,
                duration: "fast",
                minDate: new Date(),
                maxDate: "+90",
                beforeShowDay: function (date) {
                    var key = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                    var highlight = selectedDates[key];
                    if (highlight) {
                        return [true, "Highlighted", highlight];
                    }
                    else {
                        return [true, '', ''];
                    }
                }
            });
        });
    });
</script>

Comme toujours Darin, c'est excellent détail.. merci beaucoup.
après avoir fait ces changements d'ajax (méthode).. je ne peux pas obtenir le contrôle de calendrier pop-up cliquez sur plus... la uidatepicker ne s'affiche pas
Le code fonctionne pour moi, j'ai testé les deux cas. Il doit y avoir quelque chose d'autre se passe avec certains autres partie de votre code. Êtes-vous d'obtenir des erreurs de javascript? Est la requête AJAX est envoyé? Est le contrôleur de l'action d'être touché? Lorsque vous examinez la requête AJAX dans FireBug que voyez-vous?
Dans la console j'ai un Réseau d'erreur 500 .. localhost/..../[email protected](%22GetSelectedDates%22)
Lorsque vous développez la demande, vous pouvez voir plus de détails quant à la nature exacte de la demande envoyée, la réponse et bien sûr de l'erreur.
Détails de l'erreur montre.. :caractères Illégaux dans le chemin...
Pourquoi est-il @Url.Action dans l'url finale? N'êtes-vous pas utiliser de Rasoir? Est-ce dans un autre fichier javascript? Si c'est dans un autre fichier javascript de toute évidence vous ne pouvez pas utiliser côté serveur aides.
Je ne suis pas à l'aide de Rasoir et ce n'est pas dans un autre fichier js.
Si vous n'êtes pas à l'aide de Rasoir puis adapter la syntaxe quelque soit le moteur d'affichage que vous utilisez. Je suppose que c'est WebForms. Dans ce cas, utilisez <%= Url.Action("GetSelectedDates") %>. Puisque vous n'avez pas indiqué le moteur d'affichage que vous utilisez dans votre question, je suppose Rasoir.

InformationsquelleAutor Darin Dimitrov

Il y a une bibliothèque pour échanger des données de contrôleur pour javascript, sans la nécessité d'un nouvel appel ajax ou javascript en ligne.
Si vous avez besoin des données sur chaque page, vous pouvez l'utiliser dans un filtre.

http://jsm.codeplex.com

Avec la bibliothèque, vous pouvez simplement écrire le code suivant dans votre MVC Action de Contrôleur:

//Add the dates as objects to javascript - The object should only contain data
//which should be exposed to the public.
this.AddJavaScriptVariable("DatePickerController.Dates", service.GetDates(Genre));
//Execute the initialization function when the DOM has been loaded
//The function can be in a javascript file
this.AddJavaScriptFunction("DatePickerController.Ready");

Votre fichier javascript pourrait ressembler à ceci:

var DatePickerController = {
    Dates: null,
    Ready: function() {
        $("#releasedate").datepicker({
            dateFormat: "mm/dd/yy" ,
            numberOfMonths: 3,
            duration: "fast" ,           
            minDate: new Date(),
            maxDate: "+90" ,
            beforeShowDay: function (date) {
                var Highlight = DatePickerController.Dates[date];
                if (Highlight) {
                    return [true , "Highlighted", Highlight];
                }
                else {
                    return [true , '', '' ];
                }
            }
        });
    }
};

Remarque: Vous aurez peut-être même de créer un modèle spécial pour les dates que vous passez avec cette.AddJavaScriptVariable qui est compatible pour le datepicker.

InformationsquelleAutor acuntex

Faire un appel ajax:

<script type ="text/javascript">
    $(document).ready( function () {

    var SelectedDates = {};
    //SelectedDates[ new Date('05/28/2012' )] = new Date( '05/28/2012' );
    //SelectedDates[ new Date('05/29/2012' )] = new Date( '05/29/2012' );
    //SelectedDates[ new Date('05/30/2012' )] = new Date( '05/30/2012' );

    $.ajax({
        url:'url'
        ,data:{}
        ,type:'get'
        ,success:function(data) {

        for(var i = 0, i < data.length; i++) {
            SelectedDates.push(new Date(data[i]));
        }

        $( '#releasedate' ).datepicker({
            dateFormat: "mm/dd/yy" ,
            numberOfMonths: 3,
            duration: "fast" ,           
            minDate: new Date(),
            maxDate: "+90" ,
            beforeShowDay: function (date) {
            var Highlight = SelectedDates[date];
                if (Highlight) {
                    return [true , "Highlighted", Highlight];
                }
                else {
                    return [true , '', '' ];
                }
            }
        });
    });
});
</script>

Je vous remercie..qui a du sens.

InformationsquelleAutor Vismari

1

faire un appel ajax pour obtenir les dates. en cas de succès de la requête ajax, configurer le datapickers avec les résultats.
```
var configureDatePickers = function(dates){
    //setup datepicker in here...
};
$.get('url to get dates', {Genre: smoething}).success(configureDatePickers);
```
Une autre recommandation. la valeur par défaut sérialiseur json ne joue pas bien avec l'objet datetime. c'est pourquoi je voudrais vous suggérons de retourner les dates comme des chaînes de caractères avant de sérialisation. exemple:
```
var dates = Data.GetDates(genre).Select(x=>x.ToString("MM-dd-yyyy")).ToArray();
return Json(dates);
```
- +1 pour la recommandation..
InformationsquelleAutor Jason Meckley

Vous devez vous connecter pour publier un commentaire.