Accueil > .Net, ASP.Net, JQuery, MVC2 > [C# 4 MVC2 JQuery] Appeler une action depuis JQuery

[C# 4 MVC2 JQuery] Appeler une action depuis JQuery

La situation : j’ai un champ qui prend une date, selon cette date, je dois alimenter une combobox avec toutes les valeurs valides pour cette date.

Par exemple, je choisis le 24/12/2010 et je dois afficher tous les évènements de cette date dans ma combo.

Donc, coté HTML :

<tr>
    <td><%: Resources.GlobalResource.Date %></td>
    <td><%: Html.TextBox("InputDate", Model.InputDate) %></td>
</tr>
<tr>
    <td><%:Resources.GlobalResource.Events%></td>
    <td><select id="InputSelect" name="InputSelect"></select></td>
</tr>

J’ai utilisé le DatePicker qui est trouvable ici (http://www.eyecon.ro/datepicker/), même si je l’ai un poil modifié pour répondre aux besoins.

Il est pas mal, même si je l’ai trouvé un peu compliqué à skiner (mais mon goût pour faire de la CSS étant…discutable, je ne suis pas forcément partial sur ce point).

$(document).ready(function () {
    $("#InputDate").live('blur', function () {// binding sur l’action de blur (perte du focus)
        var date = $("#InputDate").val();
        if (date != "") {
            $.getJSON("/Controller/GetEvents", // action en question
                    { date: $("#InputDate").val() },// paramètre(s) passé(s) à l’action
                    function (data) {
                        $("#InputSelect").empty();
                        $.each(data, function (index, item) {//pour chaque item
$("#InputSelect").get(0).options[$("InputSelect").get(0).options.length] = new Option(item.Name, item.Code); //on ajoute un item à la combo
                        });
                    });
        }
    });
    $("#InputDate").blur();
});

Là, je renvois une liste d’entités contenant les deux propriétés Name et Code.

Il faut réellement bien faire attention aux fautes de frappe qui peuvent faire perdre un temps fou…

Coté controller, l’action prend en paramètre une string qui sera convertie en date et qui renvoie un JsonResult contenant une liste d’Events, objet qui possède deux propriétés : Name et Code.

public JsonResult GetEvents(string date)
{
   List<Events> list = new List<Events>();
   // Traitements
   return Json(list, JsonRequestBehavior.AllowGet);
}

Très important, en MVC 2, il FAUT ajouter le paramètres JsonRequestBehavior.AllowGet.

Sinon, ça ne marche tout simplement pas…

Catégories :.Net, ASP.Net, JQuery, MVC2
  1. Aucun commentaire pour l’instant.
  1. 08/02/2011 à 09:42
  2. 17/01/2012 à 19:51

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :