Discussion :

[clickandgo]

Bonjour à tous

J'ai mis en place un site en ASP.net Cloud qui me permet de telecharger et effacer des images en tant que blobs sur Azure directement qui fonctionne indépendament d'une autre base contenant entre autre les coordonnées client / chantier / blob d'image ou fichiers sur Azure.

J'aurai besoin d'incruster dans la page ASP.net ou se trouve la galerie d'images une listbox laquelle proposerait une liste extraite de ma base de données DATA sur Azure et après mise à jour rafraichirait la page courante avec les miniatures correspondantes au container actif.

Or, j'ai comme premier problème dans l'interface de VS qu'il ne me propose pas ce genre de contrôle dans la boite à outils et d'autre-part je ne vois pas non-plus dans le bas de ma fenêtre de code la liste des balises hiérarchisées... (mes pages sont en cshtml).

Je serai très reconnaissant que l'on m'aiguille concernant le remplissage de la listbox depuis Azure et ensuite sur le processus à mettre en place pour actualiser la page courante contenant le code qui suit et faire en sorte que la liste de miniatures corresponde au container choisi.

Merci d'avance

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
@{
    ViewBag.Title = "Telecharger des images";
}
 
<h3>Télecharger des images</h3>
<p></p>
<p>
    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="image" />
        <input type="submit" value="Télecharger" />
    }
 
</p>
 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="150px" valign="top" align="center" style="border-right:3px solid #EEEEEE">
            <div id="ImageGallery" style="overflow:auto; height:500px; width:130px; display:inline-block;">
                <asp:Repeater id="Repeater1" runat="server">
                    <ItemTemplate>
                        @foreach (var item in Model)
                        {
                            <img src="@item" alt="Image" width="100" height="100" style="cursor:pointer" />
                            <a id="@item" href="#" onclick="DeleteImage('@item');">X</a>
                        }
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </td>
        <td valign="top" align="center">
            <img  id="bigImage" alt="bigImage" width="500" height="500" />
        </td>
    </tr>
</table>
 
<script src="Scripts/jquery-1.7.1.js"></script>
 
<script>
    function DeleteImage(item) {
        var url = "/Home/DeleteImage";
        $.post(url, { Name: item }, function (data) {
            window.location.href = "/Home/Upload";
        });
 
    }
</script>

[DotNetMatt]

Or, j'ai comme premier problème dans l'interface de VS qu'il ne me propose pas ce genre de contrôle dans la boite à outils et d'autre-part je ne vois pas non-plus dans le bas de ma fenêtre de code la liste des balises hiérarchisées... (mes pages sont en cshtml).

Ces fonctionnalites ne sont disponibles qu'avec ASP.NET WebForms. La, tu utilises ASP.NET MVC, donc c'est normal car la toolbox sert a voir les controles utilisateur (UserControls) qui n'existent pas en MVC (ou du moins, pas dans la meme forme).

Je serai très reconnaissant que l'on m'aiguille concernant le remplissage de la listbox depuis Azure et ensuite sur le processus à mettre en place pour actualiser la page courante contenant le code qui suit et faire en sorte que la liste de miniatures corresponde au container choisi.

En gros dans le controlleur, quand tu renvoies la vue, tu dois initialiser ton Model / ViewModel (cad une classe qui permet de passer des valeurs a la vue). Ensuite dans la vue, il te suffit d'implementer la logique qui va utiliser les donnees transmises par ton ViewModel. Voici un exemple tout simple :

1 - Le Model / ViewModel :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
public class MonViewModel
{
    public string Name { get; set; }
 
    public int Value { get; set; }
}

2 - Le controller :

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
public class MonController : Controller
{
    public ActionResult Index()
    {
        var viewModel = new MonViewModel
        {
            Name = "A",
            Value = 123
        };
 
        return View(viewModel);
    }
}

3 - La vue :

Code CSHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
@model MonViewModel
@{
    ViewBag.Title = "Details";
}
<h2>Contenu du ViewModel : Name : @Model.Name // Value : @Model.Value</h2>

A l'affichage on aura :

Contenu du ViewModel : Name : A // Value : 123

Quelques remarques par rapport a ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
            <div id="ImageGallery" style="overflow:auto; height:500px; width:130px; display:inline-block;">
                <asp:Repeater id="Repeater1" runat="server">
                    <ItemTemplate>
                        @foreach (var item in Model)
                        {
                            <img src="@item" alt="Image" width="100" height="100" style="cursor:pointer" />
                            <a id="@item" href="#" onclick="DeleteImage('@item');">X</a>
                        }
                    </ItemTemplate>
                </asp:Repeater>

Le controle Repeater ne peut etre utilise qu'avec ASP.NET WebForms. Encore une fois, ici tu fais du MVC... Pour afficher des listes, tu peux t'inspirer de ce tuto : List data using ViewModel in ASP.NET MVC.

Plus generalement, je te conseille de suivre un tuto de zero pour te familiariser avec MVC : Getting Started with ASP.NET MVC 5. Cela te sera tres utile car ASP.NET WebForms et ASP.NET MVC sont tres differents...

[clickandgo]

Bonjour à toi DotNetMatt

Tout d'abord te remercier pour ton aide précieuse et le temps que tu as passé à composer cette réponse

Il me reste toute fois une petite question épineuse

1/ Peut on utiliser un genre de combobox pour faciliter le choix d'un élément servant de filtre dans la même page ou doit on obligatoirement créer une page contenant une liste et qui conduise ensuite à la page des photos ?

Merci d'avance

[DotNetMatt]

Non tu peux le faire directement sur la meme page. A toi d'implementer la logique en utilisant du jQuery (ou autre derives de JavaScript).

Par exemple voici 2 facons de proceder (il y en a d'autres) :
1 - Lors du changement de valeur de la dropdown list, tu vas faire une requete HTTP POST vers ton controller, qui va te renvoyer les bonnes donnes en JSON. Ensuite tu vas mettre a jour ta liste avec le JSON.
2 - Lors du changement de valeur de la dropdown list, tu vas faire une requete HTTP POST vers ton controller, qui va te renvoyer une vue partielle contenant la liste mise a jour.

[clickandgo]

Merci pour ta prompte réponse

Je n'ai pas trouvé de Dropdown list dans la boite à outils, uniquement un contrôle qui y ressemble et qui s'appelle "Select", peut on le peupler avec la liste de containers ?

Sinon, est il obligatoire de continuer en MVC ?
Quel est l'avantage par rapport à du ASP conventionnel ?

[DotNetMatt]

Je n'ai pas trouvé de Dropdown list dans la boite à outils, uniquement un contrôle qui y ressemble et qui s'appelle "Select", peut on le peupler avec la liste de containers ?

C'est du HTML basique : HTML <select> Tag, il ne s'agit pas d'un control au sens d'ASP.NET WebForms. Encore une fois, les controls n'existent pas dans MVC, on fait du HTML. Il est possible de faire des sortes de controls sous MVC notamment en utilisant le nouveau Tag Helper et/ou en utilisant un middleware par exemple... Mais par defaut, c'est juste du HTML.

Sinon, est il obligatoire de continuer en MVC ?

Non, c'est toi qui choisit ce que tu veux utiliser lorsque tu crees ton projet.

Quel est l'avantage par rapport à du ASP conventionnel ?

Comparer WebForms et MVC est un vaste sujet. Je t'invite a te documenter :
- WebForms vs MVC, lequel?
- Microsoft précise l'avenir de ses technologies de développement Web
- 8 différences à connaitre entre ASP.NET Webforms et ASP.NET MVC