Remplir un carousel par un pas de deux enregistrements

**wperle** · 04/07/2018, 21h27

Bonjour,

J'utilise la carousel (orbit) du foundation et j'arrive la remplir par les enregistrements via le contrôle repeater.

Mais le problème rencontrer c'est que dans chaque slide (li) je veux le remplir par deux enregistrements.

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
 
<% Dim i As Integer %>
 
<asp:Repeater ID="rptArticles" runat="server">
    <HeaderTemplate>
        <div class="grid-container full">
            <div class="grid-x">
                <div class="orbit" role="region" aria-label="Favorite Text Ever" data-orbit>
                    <ul class="orbit-container">
                        <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>◀</button>
                        <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</button>
    </HeaderTemplate>
     <ItemTemplate>  
 
        <li class="is-active orbit-slide">
            <div class="grid-x"> 
 
                <article class="cell small-6 medium-6 large-6">                    
                        <asp:HyperLink ID="PhotoLien" runat="server" rel="canonical"><asp:Image  ID="photo" runat="server" BorderStyle="none" /></asp:HyperLink>                        
                          <h2 class="text-center"><asp:HyperLink ID="titre" runat="server" rel="canonical"></asp:HyperLink></h2>
                </article>
            </div>
        </li>
 
    </ItemTemplate>
    <FooterTemplate>
        </ul>
            <nav class="orbit-bullets">                  
                <%  For i = 1 To NombreLigne %>    
                <button data-slide="<%= i %>" type="reset"><span class="show-for-sr">slide details</span><span class="show-for-sr">Current Slide</span></button>           
                <%    Next %>   
            </nav>
        </div>
    </div>
</div>
    </FooterTemplate>
</asp:Repeater>

Mais ce que je souhaite afficher deux articles dans un li

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 <li class="is-active orbit-slide">
            <div class="grid-x">                
                <article class="cell small-6 medium-6 large-6">                    
                        image 1                        
                        titre 1
                </article>
 
               <article class="cell small-6 medium-6 large-6">                    
                         image 2                       
                        titre 2
                </article>
            </div>
        </li>

J'ai même pensé de ne pas utiliser le repeater et de le coder manuellement, mais je n'y arrive pas :

Code :

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

1
2
3
4
5
 
                For Each rowView As Data.DataRowView In objDataviewItems
                    Dim row As Data.DataRow = rowView.Row                  
                    Response.Write("<br>" & row(0))                       
                Next

**StringBuilder** · 06/07/2018, 14h45

J'aurais tendance à dire que le plus simple serait de créer une structure "CoupleArticle" avec "ArticleA" et "ArticleB".
Recopier ta liste d'articles dans une liste de CoupleArticle en les regroupant par deux.
Et t'as plus qu'à Binder sur la liste de CoupleArticle.

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
48
49
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageCoupleArticle.aspx.cs" Inherits="WebApplication1.PageCoupleArticle" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Test de couples articles :
            <asp:Repeater ID="rptArticles" runat="server" ItemType="Couple<Article>">
                <HeaderTemplate>
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    Colonne 1
                                </th>
                                <th>
                                    Colonne 2
                                </th>
                            </tr>
                        </thead>
                </HeaderTemplate>
                <ItemTemplate>  
                        <tbody>
                            <tr>
                                <td><%# Item[0].Name %></td>
                                <td><%# Item[1]?.Name %></td>
                            </tr>
                        </tbody>
                </ItemTemplate>
                <FooterTemplate>
                        <tfoot>
                            <tr>
                                <th colspan="2">-- Fin --</th>
                            </tr>
                        </tfoot>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

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
48
49
50
51
52
53
54
55
56
57
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace WebApplication1
{
    public partial class PageCoupleArticle : System.Web.UI.Page
    {
        public class Article
        {
            public string Name { get; set; }
        }
 
        public class Couple<T>
        {
            private readonly T[] Items = new T[2];
 
            public T this[int index]
            {
                get
                {
                    return Items[index];
                }
                set
                {
                    throw new NotImplementedException();
                }
            }
 
            public Couple(T item1, T item2)
            {
                Items[0] = item1;
                Items[1] = item2;
            }
        }
 
 
        List<Article> articles = new List<Article>() { new Article() { Name = "Article 1" }, new Article() { Name = "Article 2" }, new Article() { Name = "Article 3" }, new Article() { Name = "Article 4" }, new Article() { Name = "Article 5" }, new Article() { Name = "Article 6" }, new Article() { Name = "Article 7" }};
 
        protected void Page_Load(object sender, EventArgs e)
        {
            List<Couple<Article>> couples = new List<Couple<Article>>();
 
            for (int i = 0; i < articles.Count; i += 2)
            {
                couples.Add(new Couple<Article>(articles[i], (i + 1 < articles.Count) ? articles[i + 1] : null));
            }
 
            rptArticles.DataSource = couples;
            rptArticles.DataBind();
        }
    }
}

Remplir un carousel par un pas de deux enregistrements

VB.NET

Vue hybride

Discussions similaires

Partager

Partager