Select et option avec (selected="selected") automatique en fonction du mois

Version imprimable

Bonjour à tous,

Je viens de (pardonnez moi l'expression) bidouiller une liste déroulante avec les douze mois de l'année et un selected automatique en fonction du mois en cours...

ça fonctionne mais je trouve ça un peu lourd, ma question est : Est-il possible de simplifier ce code ?

Je suis à cours d'idées, merci pour votre aide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
 @{
 
                           int Mois = DateTime.Now.Month;
                           string MoisAnnée1 = "";
                           string MoisAnnée2 = "";
                           string MoisAnnée3 = "";
                           string MoisAnnée4 = "";
                           string MoisAnnée5 = "";
                           string MoisAnnée6 = "";
                           string MoisAnnée7 = "";
                           string MoisAnnée8 = "";
                           string MoisAnnée9 = "";
                           string MoisAnnée10 = "";
                           string MoisAnnée11 = "";
                           string MoisAnnée12 = "";
 
 
                           switch (Mois)
                           {
 
                               case 1:
                                   MoisAnnée1 = "selected=\"selected\"";
                                   break;
                               case 2:
                                   MoisAnnée2 = "selected=\"selected\"";
                                   break;
                               case 3:
                                   MoisAnnée3 = "selected=\"selected\"";
                                   break;
                               case 4:
                                   MoisAnnée4 = "selected=\"selected\"";
                                   break;
                               case 5:
                                   MoisAnnée5 = "selected=\"selected\"";
                                   break;
                               case 6:
                                   MoisAnnée6 = "selected=\"selected\"";
                                   break;
                               case 7:
                                   MoisAnnée7 = "selected=\"selected\"";
                                   break;
                               case 8:
                                   MoisAnnée8 = "selected=\"selected\"";
                                   break;
                               case 9:
                                   MoisAnnée9 = "selected=\"selected\"";
                                   break;
                               case 10:
                                   MoisAnnée10 = "selected=\"selected\"";
                                   break;
                               case 11:
                                   MoisAnnée11 = "selected=\"selected\"";
                                   break;
                               case 12:
                                   MoisAnnée12 = "selected=\"selected\"";
                                   break;
                           }
 
                       }
 
                   <select id="Select1">
                       <option @MoisAnnée1 value="1">Janvier</option>
                       <option @MoisAnnée2 value="2">Février</option>
                       <option @MoisAnnée3 value="3">Mars</option>
                       <option @MoisAnnée4 value="4">Avril</option>
                       <option @MoisAnnée5 value="5">Mai</option>
                       <option @MoisAnnée6 value="6">Juin</option>
                       <option @MoisAnnée7 value="7">Juillet</option>
                       <option @MoisAnnée8 value="8">Août</option>
                       <option @MoisAnnée9 value="9">Septembre</option>
                       <option @MoisAnnée10 value="10">Octobre</option>
                       <option @MoisAnnée11 value="11">Novembre</option>
                       <option @MoisAnnée12 value="12">Décembre</option>
                   </select>
 
valeur 1 = texte 1
valeur 2 = texte 2
 
<p>ici le texte selon la valeur</p>

Peut-on mieux faire que cette procédure ?
Le but principal étant d'afficher du texte différent dans une balise (<p>ici le texte</p>) en fonction des douze mois, dont le mois en cours à l'ouverture de la page.
Le changement de texte est en réflexion...je ne sais pas encore si il sera en JS ou en C#...c'est encore un autre sujet....

Merci

Citation:

Envoyé par BRUNO71

Peut-on mieux faire que cette procédure ?

Oui on peut meme faire beaucoup mieux ! Tu es complement passé a cote de la logique MVC ;)

Je pars du postulat que tu utilises ASP.NET Core MVC 2.0. Si ce n'est pas le cas, merci de preciser la version que tu utilises.

D'abord on cree un ViewModel specifique :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class MonthsViewModel
{
    /// <summary>
    /// On utilise une propriete readonly pour charger les mois en Anglais.
    /// Pour avoir les mois dans la langue en cours, il faut utiliser CurrentInfo au lieu de InvariantInfo.
    /// </summary>
    public IEnumerable<SelectListItem> Months
    {
        get
        {
            var months = DateTimeFormatInfo
                   .InvariantInfo
                   .MonthNames
                   .Select((monthName, index) => new SelectListItem
                   {
                       // On recupere l'index du mois
                       Value = (index + 1).ToString(),
                       // On recupere le nom du mois
                       Text = monthName
                   });
 
            // On filtre une seconde fois car je ne sais pas pourquoi, il y a 13 resultats...
            return months.Where(x => !string.IsNullOrEmpty(x.Text));
        }
    }
 
    /// <summary>
    /// On utilise cette propriete pour definir le mois en cours dans le Controller.
    /// </summary>
    public int CurrentMonth { get; set; }
}

Ensuite dans le Controller, on va charger notre ViewModel, indiquer le mois en cours et envoyer le tout a la vue :

Code:

1
2
3
4
5
6
7
8
9
10
public IActionResult Index()
{
    // On charge le ViewModel
    var viewModel = new MonthsViewModel();
 
    // On defini le mois en cours
    viewModel.CurrentMonth = DateTime.Now.Month;
 
    return View(viewModel);
}

Enfin, dans la vue, on va binder la dropdown list avec notre list de mois et le mois en cours, en utilisant la fonctionnalite Tag Helper :

Code:

1
2
<select asp-for="CurrentMonth" asp-items="@(new SelectList(Model.Months, "Value", "Text"))">
</select>

Resultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="CurrentMonth" id="CurrentMonth" data-val-required="The CurrentMonth field is required." data-val="true">
    <option value="1">January</option>
    <option selected="selected" value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

10/02/2018, 14h18
BRUNO71

Bonjour DotNetMatt,

Merci pour ta réponse, en fait j'ai réalisé mon site en asp.net MVC 2 mais pas Core...
Du coup pour essayer ton code, qui dans mon cas ne fonctionne pas, j'ai essayé de réaliser rapidement un site asp.net core mvc 2 depuis VS2017.

Je viens de poster un message suite à ça, car je ne comprend pas comment le publier.

Dans l'attente de trouver ma réponse...je garde précieusement ton code.

Merci
10/02/2018, 21h41
DotNetMatt

Ok, en MVC classique avec Razor, il suffit juste de changer le contenu de la vue :

Code:

@Html.DropDownListFor(model => model.CurrentMonth, Model.Months)

Et il y a une etape que j'ai oublie de rajouter dans le post precedent egalement. Il faut declarer le model, juste en rajoutant ceci tout en haut de la Vue :

Code:

@model Namespace1.Namespace2.MonViewModel

Il faut remplacer les Namespaces par ceux de ton projet.
11/02/2018, 09h30
BRUNO71

Bonjour DotNetMatt,

Merci, je viens d'essayer avec Core MVC et MVC ça fonctionne bien.
Je comprends d'avantage le principe du Modèle-Vue-Contrôleur...

Mon select de départ n'était vraiment pas terrible...

Je vais améliorer mon projet...

Bon dimanche à toi.