используйте bootstrap-4-carousel в репитере asp - PullRequest
Новая
       10

используйте bootstrap-4-carousel в репитере asp

0 голосов
/ 24 сентября 2018

Я пытаюсь использовать bootstrap-4-carousel в качестве примера в ссылке bootstrap-4-carousel в asp: repeater, чтобы изображение приводило форму базы данных.Я пытаюсь выбрать изображение в обычной функции следующим образом: 

     SqlDataAdapter da;

        da = new SqlDataAdapter(@"select * from ImageTable
                                                order by NEWID()", constr);

    DataTable dt = new DataTable();
    da.Fill(dt);
    rptImages.DataSource = dt;
    rptImages.DataBind();

, а также с пейджингом , например: 

  public int CurrentPageEN
{
    get
    {
        if (this.ViewState["CurrentPageEN"] == null)
            return 0;
        else
            return Convert.ToInt16(this.ViewState["CurrentPageEN"].ToString());
    }

    set { this.ViewState["CurrentPageEN"] = value; }
}
private void doPagingEN()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("PageIndexEN");
    dt.Columns.Add("PageTextEN");
    for (int i = 0; i < pdsEN.PageCount; i++)
    {
        DataRow dr = dt.NewRow();
        dr[0] = i;
        dr[1] = i + 1;
        dt.Rows.Add(dr);
    }
    dlPagingEN.DataSource = dt;
    dlPagingEN.DataBind();

}
protected void BindDataEN()
{

    DataSet ds = new DataSet();
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd;
    con.Open();

    cmd = new SqlCommand(@"select * from imageTable  order by NEWID()", con);

    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    adp.Fill(dt);

    pdsEN.DataSource = dt.DefaultView;
    pdsEN.AllowPaging = true;
    pdsEN.PageSize = 4;
    pdsEN.CurrentPageIndex = CurrentPageEN;



 //   Repeater1.DataSource = pdsEN;
  //  Repeater1.DataBind();

    doPagingEN();


}
protected void dlPaging_ItemCommandEN(object source, DataListCommandEventArgs e)
{
    if (e.CommandName.Equals("lnkbtENagingEN"))
    {
        CurrentPageEN = Convert.ToInt16(e.CommandArgument.ToString());
        BindDataEN();
    }
}

, и это aspx код 

<style>
    .blog .carousel-indicators {
        left: 0;
        top: auto;
        bottom: -40px;
    }

        /* The colour of the indicators */
        .blog .carousel-indicators li {
            background: #a3a3a3;
            border-radius: 50%;
            width: 8px;
            height: 8px;
        }

        .blog .carousel-indicators .active {
            background: #707070;
        }
</style>


<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row blog">
        <div class="col-md-12">
            <div id="blogCarousel" class="carousel slide" data-ride="carousel">

                <ol class="carousel-indicators">
                    <asp:Repeater ID="dlPagingEN" runat="server">
                        <ItemTemplate>
                            <li data-target="#blogCarousel" data-slide-to='<%#Eval("PageTextEN") %>'>
                                <asp:LinkButton ID="lnkbtENagingEN" runat="server" CommandName="lnkbtENagingEN" CommandArgument='<%#Eval("PageIndexEN")%>'></asp:LinkButton>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <asp:Repeater ID="Repeater1" runat="server">
                                <ItemTemplate>
                                    <div class="col-md-3">
                                        <a href="#">
                                            <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                                        </a>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                        <!--.row-->
                    </div>
                </div>
                <!--.carousel-inner-->
            </div>
            <!--.Carousel-->

        </div>
    </div>
</div>

но что бы я ни делал, слайдер не работает как пример в ссылке.Так что, пожалуйста, если у кого-нибудь есть решение, помогите мне.

Спасибо всем

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Я нашел решение asp и Bootstrap

Хитрость заключается в том, что «IF» идентифицирует первый индекс как «ACTIVE», а остальные добавляются без «ACTIVE» 

<div id="carousel" class="carousel slide" data-ride="carousel">
 <div class=" container carousel-inner">
  <asp:Repeater ID="rpt_Propiedades" runat="server">
    <ItemTemplate>
      <div class="carousel-item  <%# (IIf(Container.ItemIndex = 0, "active", ""))%>">
                 <%# Eval("Nombre Columna") %>
    </div>
   </ItemTemplate>
  </asp:Repeater>
 </div>
</div>
0 голосов
/ 25 сентября 2018

По сути, у вас есть один «слайд» для карусели, и вы помещаете все изображения в этот слайд.

Теперь ссылка, приведенная в верхней части вопроса, содержит 3 маленьких изображения на «слайд» карусели.Это немного сложнее в отношении привязанного элемента управления, поэтому давайте вернемся назад и просто начнем получать 1 изображение на слайд.

Чтобы получить 1 изображение на каждый слайд, вам нужно изменить aspx повторителя, чтобы он работал следующим образом: 

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate>
              <div class="carousel-item">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
          </ItemTemplate>
   </asp:Repeater>
</div>

Дело в том, что каждый слайд - это div с классом"Карусель-предмет".Включив его в ItemTemplate ретранслятора, это означает, что каждое изображение будет одним уникальным слайдом.

Теперь для ретранслятора dlPagingEn вы захотите избавиться от встроенной в него кнопки ссылки.Концепция состоит в том, что все изображения для слайдов должны быть включены на страницу, а элемент управления dlPagingEn позволит клиентскому доступу к различным слайдам.Вам не нужно выполнять обход в обход сервера для этого поведения.

Теперь о плохих новостях.Получить этот повторитель, чтобы выложить код для 3 изображений на слайд, как в приведенной ссылке, значительно сложнее.Вероятно, самый простой способ, о котором я упоминал в коде повторителя, показанном ниже, - включить функцию в ItemTemplate.Эта функция должна отслеживать номер записи элемента данных и для каждого третьего изображения закрывать строки и элементы карусельного элемента, а затем снова открывать их.

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <headerTemplate>
             <div class="carousel-item">
               <div class="row">
         </headerTemplate>
         <ItemTemplate>
             <%# BuildCarouselItemSeperator() %>
              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
          </ItemTemplate>
          <footerTemplate>
                  </div>
               </div>
          </footerTemplate>
   </asp:Repeater>
</div>

Теперь, если вы можете изменить SQL (или запрос, или саму таблицу), чтобы каждая строка возвращаемого набора данных, который вы связываете с повторителем, имела 3 разных записи изображения вместоВо-первых, это становится намного проще.В этом случае вы должны использовать описанный ниже стиль декларации повторителя: 

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate>
              <div class="carousel-item">
               <div class="row">
              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_A")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>

              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_B")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>

              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_C")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
                  </div>
               </div>
          </ItemTemplate>
   </asp:Repeater>
</div>

По правде говоря, для получения 3 изображений на слайде вам, возможно, повезет больше при построении HTML-кода с использованием StringBuilder в кодеПозади, а затем положить это в буквальный контроль, чем пытаясь сделать это с помощью повторителя.

...