Razor non reconnu par VS17 ?

Version imprimable

Bonjour à tous

Je suis entrain de suivre un tuto ASP.NET Core/MVC or mon code sur la page index.cshtml me surligne en stabilo la commande Razor ("@model" et "@") et ne renderise pas les containers d'images qui devraient naître de la boucle incluse dans le code... Le reste du html est visible cependant dans la page ce qui me laisse supposer que c'est la commande Razor qui n'est pas reconnue et qui est de ce fait surlignée...

Dois je activer une option spéciale pour pouvoir interpréter du Razor ou cela n'a t'il aucun rapport ?

Je n'ai aucune erreur sur le reste du code et la page index se renderise bien excepté le manque de div containers (même si je retire la boucle la div n'apparait pas comme si il ne trouvait pas le modèle)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@model SimpleImageGallery.Models.GalleryIndexModel
 
    <!DOCTYPE HTML>
    <html>
        <head>
            <title>
                Galerie de photos
            </title>
        </head>
    <body>
        <div class="container body-content">
            <div class="row gallery-content">
                @foreach (var image in Model.Images)
            {
                <div class="gallery-image-container">
                    <div class="gallery-image" style="background-image:url(@image.Url"></div>
                </div>
 
        }
            </div>
        </div>
    </body>
    </html>

le model:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
using SimpleImageGallery.Data.Models;
using System;
using System.Collections.Generic;
 
namespace SimpleImageGallery.Models
{
    public class GalleryIndexModel
    {
        public IEnumerable<GalleryImage> Images { get; set; }
        public string SearchQuery { get; set; }
 
    }
}

le CSS :

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
.gallery-content{
    padding:24px;
}
.gallery-image {
    padding: 8px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    height: 300px;
    width: 300px;
    margin: 12px;
    position: relative;
    box-shadow: 0 10px 18px rgba(0,0,0,0.2),0 5px 5px rgba(0,0,0,0.2);
}
 
 
body {
    padding-top: 50px;
    padding-bottom: 20px;
}
 
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
 
/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}
 
/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}
 
/* QR code generator */
#qrCode {
    margin: 15px;
}
 
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

Merci d'avance pour vos éclaircissements

08/01/2018, 10h06
Dokho1000

Ton web.config se trouvant dans le répertoire view est-il bien configuré...?
08/01/2018, 12h21
clickandgo

Je n'ai pas de fichier Web.config dans aucun dossier du projet !

Concernant mon problème on dirait comme si les pages css ne sont pas prises en compte, il n'y a pas besoin de les déclarer/lier si je ne me trompe dans ce type de projet ?

Merci
09/01/2018, 16h37
Dokho1000

Si tu n'as pas de fichiers web.config c'est que ton projet n'a pas été créé correctement. Ton problème vient certainement de là...

J'utilise NET.Core, je dispose des fichiers appsettings et bundleconfig.json, ne seraient ils pas les remplacants de web.config ?

Voici le code du bundleconfig qui fait bien référence au css de base du site :

(VS me demande d'ailleurs si je veux installer l'application tierce bundling et minification, dois-je le faire ?)
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 // Configure bundling and minification for the project. // More info at https://go.microsoft.com/fwlink/?LinkId=808241 [ { "outputFileName": "wwwroot/css/site.min.css", // An array of relative input file paths. Globbing patterns supported "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], // Optionally specify minification options "minify": { "enabled": true, "renameLocals": true }, // Optionally generate .map file "sourceMap": false } ]
malgré cela mon css n'affiche pas les containers d'images cités plus haut

Citation:
Envoyé par clickandgo
J'utilise NET.Core, je dispose des fichiers appsettings et bundleconfig.json, ne seraient ils pas les remplacants de web.config ?

Voici le code du bundleconfig qui fait bien référence au css de base du site :

(VS me demande d'ailleurs si je veux installer l'application tierce bundling et minification, dois-je le faire ?)
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 // Configure bundling and minification for the project. // More info at https://go.microsoft.com/fwlink/?LinkId=808241 [ { "outputFileName": "wwwroot/css/site.min.css", // An array of relative input file paths. Globbing patterns supported "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], // Optionally specify minification options "minify": { "enabled": true, "renameLocals": true }, // Optionally generate .map file "sourceMap": false } ]
malgré cela mon css n'affiche pas les containers d'images cités plus haut
Oui, effectivement, je n'avais pas vu qu'il s'agissait de la partie Core d'ASP.NET.
Il n'y a rien a faire de spécial. Il est parfois nécessaire de fermer la vue et da la ré-ouvrir pour qu'elle soit interprétée correctement lors de l'ajout d'un nouveau model mais ceci ne générera pas d'erreur lors de la compilation et le site devrait s'afficher correctement...

10/01/2018, 15h49
clickandgo

Merci pour cette réponse

Malheureusement rien à changé le css n'est toujours pas interprété sous aucun navigateur !!!

Que peut il bien se passer ?
11/01/2018, 13h37
Dokho1000

Citation:

Envoyé par clickandgo

Merci pour cette réponse

Malheureusement rien à changé le css n'est toujours pas interprété sous aucun navigateur !!!

Que peut il bien se passer ?

Lorsque tu mets le lien du fichier css dans ton navigateur est-ce que tu le récupères bien ? Sinon ta route pour le récupérer n'est p-e pas bonne...
11/01/2018, 17h00
clickandgo

Merci pour cette réponse

Le css est finalement bien interprété, j'ai créé des bords aux containers et je les vois mais ce sont les images qui devraient aller dedans qui ne s'affichent pas !
12/01/2018, 08h32
Dokho1000

Probablement ta route qui n'est pas bonne...

Tu veux dire le root ?

Ou faut il que je regarde ?

C'est bizarre car le css marche mais on dirait que la boucle des images n'est pas prise en compte ... Je ne vois pas les containers ni les images qui leurs sont attribuées.
Par contre je peux voir n'importe quel html qui serait intégré au container principal ... Bizarre

J'ai l'impression que c'est juste la boucle qui n'est pas interprétée car j'ai tout vérifié à la virgule près et les links d'images sont correctement écrits.

Voici le code du controller :

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
 
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using SimpleImageGallery.Models;
using SimpleImageGallery.Data.Models;
 
namespace SimpleImageGallery.Controllers
{
    public class GalleryController : Controller
    {
        public IActionResult Index()
        {
            var hikingImageTags = new List<ImageTag>();
            var cityImageTags = new List<ImageTag>();
 
            var tag1 = new ImageTag()
            {
                Description = "Adventure",
                Id = 0
            };
            var tag2 = new ImageTag()
            {
                Description = "Urban",
                Id = 1
            };
            var tag3 = new ImageTag()
            {
                Description = "NewYork",
                Id = 2
            };
 
 
            hikingImageTags.Add(tag1);
            cityImageTags.AddRange(new List<ImageTag>{ tag2, tag3 });
 
            var imageList = new List<GalleryImage>();
            {
                new GalleryImage()
                {
                    Titre = "Hiking Trip",
                    Url = "https://static.pexels.com/photos/784569/pexels-photo-784569.jpeg",
                    DateCreation = DateTime.Now,
                    Tags = hikingImageTags
                }; 
                new GalleryImage()
                {
                    Titre = "On the trail",
                    Url = "https://static.pexels.com/photos/784872/pexels-photo-784872.jpeg",
                    DateCreation = DateTime.Now,
                    Tags = hikingImageTags
                };
                new GalleryImage()
                {
                    Titre = "DownTown",
                    Url = "https://static.pexels.com/photos/784885/pexels-photo-784885.jpeg",
                    DateCreation = DateTime.Now,
                    Tags = cityImageTags
                };
            }
            var model = new GalleryIndexModel()
            {
                Images = imageList,
                SearchQuery=""
            };
            return View(model);
        }
    }
}

15/01/2018, 13h14
Dokho1000

Non je voulais bien dire la route mais par rapport à ce que je vous tu vas chercher les images sur un autre site donc ce n'est pas le problème.
Tu as vérifier via le developper tool que les images étaient bien téléchargées?
16/01/2018, 13h26
clickandgo

Citation:

Envoyé par Dokho1000

Non je voulais bien dire la route mais par rapport à ce que je vous tu vas chercher les images sur un autre site donc ce n'est pas le problème.
Tu as vérifier via le developper tool que les images étaient bien téléchargées?

Je n'ai toujours pas trouvé d'où cela venait mais en pointant sur les données d'une table plutôt que sur les links directs cela marche, donc je considère le problème résolu malgré le fait que l'on a pas trouvé le pourquoi ... :)

merci beaucoup