将 bootstrap 手风琴和图库与 asp-classic 中的旧数据库图库集成

Question

我正在尝试更新在 asp-classic 中完成的站点，并将其与 bootstrap 集成。我成功地将 table 布局更改为 bootstrap 网格布局。我有一个画廊页面需要合并，我需要一些帮助来为 bootstrap 手风琴面板组件创建数据库结果 loop。

我已经设法让面板标题从数据库中提取数据并显示它，但是对于面板的内容我迷路了。我尝试使用一些旧代码，但不断出现错误，如预期的 wend 或类似错误。

我知道 bootstrap 面板显示不需要部分旧代码，因为旧代码会创建要显示的页面，而在新外观中，所有代码都在同一页面中。

我需要更改数据库中数据的显示方式。您可能会在这里看到旧的和新的：

菲奥里拉。 com/Galleria-Foto.asp
菲奥里埃拉。 com/new/galleria-foto.asp

这是新的galleria-foto.asp文件的相关代码，其中一部分仍然是从table布局中剥离出来的旧文件，我需要帮助为我的目的重新排列（重新编码）- 在旧文件的下方。

<!-- content area -->
<section>
    <div class="container">
        <div class="fz-main-content-wrap">
            <div class="row">
                <div class="col-md-8 fz-home-main">
                    <div class="fz-home-box">
                        <h1>galleria</h1>
<% 
    '################################################################################
        IF Request.QueryString("testo") = "" THEN
    '################################################################################
%>

    <!-- #include file="_apri.asp" --><%
    strSQL = "SELECT tbl_testi.*, tbl_foto.* FROM tbl_testi LEFT OUTER JOIN tbl_foto ON tbl_testi.riftesto = tbl_foto.riftesto "
    strSQL = strSQL + "WHERE (tbl_foto.principale = 1 OR tbl_foto.principale IS null) AND tbl_testi.tipo = 'foto' ORDER BY data DESC"
    SET objRS = objConn.Execute(strSQL) %>

<% IF objRS.EOF THEN %>
    <div align="center">Sezione in aggiornamento.<br>
    Torna presto a trovarci o <a target="_top" href="Contatti-Informazioni-Ordini.asp">contattaci</a>.
    </div>

<% ELSE %>

<% i = 1 %>
<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
<% WHILE NOT objRS.EOF %>
    <div class="panel panel-default">
        <div class="panel-heading clearfix" id="heading_<%=i %>" role="tab">
            <div class="col-md-8 fz-2">
            <h4 class="panel-title">
            <%=objRS("data")%><br>
            <a aria-controls="collapse_<%=i %>" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse_<%=i %>" role="button">
            <%=objRS("titolo")%>
            </a>
            </h4>
            </div>
                <div class="col-md-4 fz-2">
            <% IF LEN(objRS("idchiave")) > 1 THEN %>
                    <img class="img-responsive" name="img" src="public/<%=objRS("idchiave")%>" />
                <% ELSE %>
                    (No Foto)
                <% END IF %>
                </div>
        </div>
        <div aria-labelledby="heading_<%=i %>" class="panel-collapse collapse<% If i = 1 Then %> in<% End If %>" id="collapse_<%=i %>" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">

                Here should be the loop to output the images of each category (item i.e. fioriera rovere 202 etc.)

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

<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
</div>

<!-- #include file="_chiudi2.asp" -->
<% END IF %>

<% 
    '################################################################################
        ELSE
    '################################################################################
%>

<a href="galleria-foto.asp">Clicca qui per tornare alla lista</a>

    <h2 align="center"><%= Request.QueryString("titolo") %></h2>
    <br>

<p style="text-align:justify">
<%
    Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
    strFileX = Application("path_public") + "\" + Request.QueryString("testo") + ".txt"
    Set objFILE = objFSO.OpenTextFile(strFileX, 1)
    WHILE NOT objFILE.AtEndOfStream
        Response.Write (objFILE.ReadLine)
    WEND
    objFILE.Close
    Set objFILE = Nothing
    Set objFSO = Nothing
%>
</p>

<br>
<p style="text-align:center">(clicca sulle foto per ingrandirle)</p>

<!-- #include file="_apri.asp" --><%
strSQL = "SELECT * FROM tbl_foto WHERE riftesto = '" + Request.QueryString("testo") + "'"
set objRS = objConn.Execute(strSQL) %>

<% i=1 %>
<% WHILE NOT objRS.EOF %>

        <div class="row fz-3">
        <div class="col-md-9 fz-4 didascalia">
                    <%= objRS("didascalia")%>
                </div>
                <div class="col-md-3 fz-2">

            <a href="public/<%=objRS("idchiave")%>">
            <img class="img-responsive" name="img<%=i%>" border="0" src="public/<%=objRS("idchiave")%>" alt='<%= objRS("didascalia")%>' /></a>

                     </div>
                     </div>

<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
<!-- #include file="_chiudi2.asp" -->

    <div align="center">
        <a href="galleria-foto.asp">Clicca qui per tornare alla lista</a>
    </div>

<% 
    '################################################################################
        END IF
    '################################################################################
%>

                    </div>
                </div>

                <div class="col-md-4 fz-home-main">
                <aside id="sidebar">
                    <div class="row">

                    </div>
                    </aside>
                </div>
            </div>
        </div><!-- .fz-main-content-wrap -->
    </div><!-- .container -->
</section>
<!-- END content area -->

旧 Galleria-Foto.asp 文件

<div align="center">
    <table border="0" cellpadding="0" style="border-collapse: collapse">
        <tr>
            <td width="580" valign="top">
<% 
    '################################################################################
        IF Request.QueryString("testo") = "" THEN
    '################################################################################
%>
    <div align="center">
        <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
            <tr>
                <td><hr style="height: 1px; color: #000099;"></td>
            </tr>
        </table>
    </div>
    <!-- #include file="_apri.asp" --><%
    strSQL = "SELECT tbl_testi.*, tbl_foto.* FROM tbl_testi LEFT OUTER JOIN tbl_foto ON tbl_testi.riftesto = tbl_foto.riftesto "
    strSQL = strSQL + "WHERE (tbl_foto.principale = 1 OR tbl_foto.principale IS null) AND tbl_testi.tipo = 'foto' ORDER BY data DESC"
    SET objRS = objConn.Execute(strSQL) %>

<% IF objRS.EOF THEN %>
    <div align="center">Sezione in aggiornamento.<br>
    Torna presto a trovarci o <a target="_top" href="Contatti-Informazioni-Ordini.asp">contattaci</a>.
    </div>

<% ELSE %>

    <div align="center">
        <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
<% i = 1 %>
<% WHILE NOT objRS.EOF %>
            <tr>
                <td style="width: 450px; height: 85px; text-align: left; vertical-align: top;">
                <%=objRS("data")%><br>
                <a href="galleria-foto.asp?testo=<%=objRS("tbl_testi.riftesto")%>&titolo=<%=objRS("titolo")%>&data=<%=objRS("data")%>"><%=objRS("titolo")%></a>
                </td>
                <td style="width: 110px; height: 85px;">
                <% IF LEN(objRS("idchiave")) > 1 THEN %>
                    <iframe name="Foto<%=i%>" src='Galleria-Foto-TUMB.asp?foto=<%=objRS("idchiave")%>&amp;base=100&amp;altezza=75' border="0" frameborder="0" height="77" marginheight="1" marginwidth="1" width="102" scrolling="no"></iframe>
                <% ELSE %>
                    (No Foto)
                <% END IF %>
                </td>
            </tr>
            <tr>
                <td colspan="2"><hr style="height: 1px; color: #000099;"></td>
            </tr>
<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
        </table>
    </div>

<!-- #include file="_chiudi2.asp" -->
<% END IF %>

<% 
    '################################################################################
        ELSE
    '################################################################################
%>

      <div align="center">
                <table style="width: 500px; height: 30px; border: 1px solid #000099;">
               <tr>
                  <td align="center"><a href="galleria-foto.asp">Clicca qui per tornare alla lista</a></td>
               </tr>
            </table>
      </div>

    <p>&nbsp;</p>
    <h2 align="center"><%= Request.QueryString("titolo") %></h2>
    <br>

<p style="text-align:justify">
<%
    Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
    strFileX = Application("path_public") + "\" + Request.QueryString("testo") + ".txt"
    Set objFILE = objFSO.OpenTextFile(strFileX, 1)
    WHILE NOT objFILE.AtEndOfStream
        Response.Write (objFILE.ReadLine)
    WEND
    objFILE.Close
    Set objFILE = Nothing
    Set objFSO = Nothing
%>
</p>

<br>
<p style="text-align:center">(clicca sulle foto per ingrandirle)</p>

<!-- #include file="_apri.asp" --><%
strSQL = "SELECT * FROM tbl_foto WHERE riftesto = '" + Request.QueryString("testo") + "'"
set objRS = objConn.Execute(strSQL) %>

    <div align="center">
        <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
            <tr>
                <td><hr style="height: 1px; color: #000099;"></td>
            </tr>
        </table>
    </div>

<% i=1 %>
<% WHILE NOT objRS.EOF %>

    <div align="center">
        <table border="0" style="border-collapse: collapse">
            <tr>
                <td width="250" height="170" align="center">
                    <%= objRS("didascalia")%>
                </td>

                <td width="250" height="180" align="center">

<!--                    <iframe name="Foto<%=i%>" src='galleria-foto-FOTO.asp?foto=<%=objRS("idchiave")%>&base=248&altezza=178&didascalia=<%= objRS("didascalia")%>' frameborder="0" height="180" marginheight="1" marginwidth="1" width="250" scrolling="no"></iframe> -->

            <a href="public/<%=objRS("idchiave")%>" rel="lightbox[foto]">
            <img name="img<%=i%>" border="0" src="public/<%=objRS("idchiave")%>" alt='<%= objRS("didascalia")%>'
            onload="if (img<%=i%>.width/img<%=i%>.height < 250/180) {if (img<%=i%>.height > 180 ) {img<%=i%>.height= 180;} } else {if (img<%=i%>.width > 250 ) {img<%=i%>.width= 250;} }" 
            onmouseover="if (img<%=i%>.width/img<%=i%>.height < 250/180) {if (img<%=i%>.height > 180 ) {img<%=i%>.height= 180;} } else {if (img<%=i%>.width > 250 ) {img<%=i%>.width= 250;} }"                   
                     ></a>

                </td>
            </tr>
        </table>
    </div>

    <div align="center">
        <table border="0" cellpadding="0" style="border-collapse: collapse" width="100%">
            <tr>
                <td><hr style="height: 1px; color: #000099;"></td>
            </tr>
        </table>
    </div>

<% i = i + 1 %>
<% objRS.MoveNext %>
<% WEND %>
<!-- #include file="_chiudi2.asp" -->

      <div align="center">
                <table style="width: 500px; height: 30px; border: 1px solid #000099;">
               <tr>
                  <td align="center" style="height: 26px"><a href="galleria-foto.asp">Clicca qui per tornare alla lista</a></td>
               </tr>
            </table>
      </div>

<% 
    '################################################################################
        END IF
    '################################################################################
%>
            </td>
            <td width="5">&nbsp;</td>
        </tr>
    </table>
</div>

包含的文件 _apri.asp _chiudi1.asp _chiudi2.asp 是数据库 open/close 连接片段。

我尝试了很多移动片段的组合，但我得到的都是错误。原来的谢谢你被删除了，因为有些人不喜欢他们的贡献被感谢。

编辑数据库详细信息（table-name - [字段]）

tbl_foto [riftesto - idchiave - principale - didascalia]
tbl_testi [riftesto - data - titolo - giorni - tipo]
tbl_tipi [tipo - att_didascalia - att_foto - att_testo - descrizione]

翻译字段以澄清

riftesto - 文本参考

idchiave - id 密钥

principale - main（面板标题图像是否设置为 1 if main 0 if not）

didascalia - 标题

数据-日期

标题 - 标题

giorni - 天

类型 - 类型

foto - 图片（图片）

描述 - 描述

att_ - 真的不知道原编码器是什么意思，但我认为与使用无关。

Answer 1

您的项目有很多工作要做。与 ASP 经典人物合作。（我们数以百万计）

从我们的长谈中，我的回答很简短，涉及布局以及如何使事情正常进行。

如何使用提供的代码得到上面的布局？

我们的流程

日期 objRS("data")
标题 objRS("titolo")
类别 galleria-foto.asp?testo=<%=objRS("riftesto")%> 的缩略图示例：www.domain.ext/galleria-foto.asp?testo=141231654418504130（我猜的）
图库缩略图已创建 Galleria-Foto-TUMB.asp?foto=<%=objRS("idchiave")%> 示例：www.domain.ext/Galleria-Foto-TUMB.asp?foto=141231656428504969.JPG

基本上，您所要求的只是向您展示您自己的代码，您需要将 HTML 代码放置在何处才能获得具有画廊视图的手风琴的预期结果。

由于一些旧代码，我将对此进行简化。这也意味着如果我们要使用 LightBox javascript 功能，我们需要更新我们的 JS 和 CSS。（同样，我没有编辑 ASP 代码，只是将 HTML 放在你的 ASP 脚本中）

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">

        <!-- #include file="_apri.asp" -->
        <%
        strSQL = "SELECT tbl_testi.*, tbl_foto.* FROM tbl_testi LEFT OUTER JOIN tbl_foto ON tbl_testi.riftesto = tbl_foto.riftesto "
        strSQL = strSQL + "WHERE (tbl_foto.principale = 1 OR tbl_foto.principale IS null) AND tbl_testi.tipo = 'foto' ORDER BY data DESC"
        SET objRS = objConn.Execute(strSQL)
        IF objRS.EOF THEN
        %>
        <!-- do your html message for nothing found.-->
        <% Else %>
        <% i = 1 %>


        <% WHILE NOT objRS.EOF%>
            <% IF LEN(objRS("idchiave")) > 1 THEN %>

    <div class="panel panel-default">
        <div class="panel-heading clearfix" id="heading_<%=i %>" role="tab">
            <div class="col-md-8 fz-2">
            <h4 class="panel-title">
            <%=objRS("data")%><br>
            <a aria-controls="collapse_<%=i %>" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapse_<%=i %>" role="button">
            <%=objRS("titolo")%>
            </a>
            </h4>
            </div>
                <div class="col-md-4 fz-2">         
                    <% IF LEN(objRS("idchiave")) > 1 THEN %>
                    <img class="img-responsive" alt="img" src="/public/<%=objRS("idchiave")%>" />
                    <% ELSE %>
                    (No Foto)
                    <% END IF %>
                </div>
        </div>
        <div aria-labelledby="heading_<%=i %>" class="panel-collapse collapse<% If i = 1 Then %> in<% End If %>" id="collapse_<%=i %>" role="tabpanel">
            <div class="panel-body">
                <div class="fz-gallery-wrap">
                        <a href="/public/<%=objRS("idchiave")%>" rel="gallery" class="" data-lightbox="Group-<%=objRS("idchiave")%>" 
                        data-title="Image-<%=i%>: Title for Image-<%=i%>" 
                        title="Image-<%=i%>: Title for Image-<%=i%>">
                            <img src="/public/<%=objRS("idchiave")%>" width="150px" alt="Image-<%=i%>: Title for Image-<%=i%>" />
                        </a>
                </div>
            </div>
        </div>
    </div>

    <%End If%>
        <% i = i + 1 %>
        <% objRS.MoveNext %>
    <% WEND %>

    <% 
    End If 'objRS.EOF
    %>

        <!-- #include file="_chiudi2.asp" -->
</div>

这与我 post 为您编写的示例页面的代码相同。您共享的大部分代码都不需要。你有你的 IF strFoto，它只创建一个缩略图，而你创建你的 IFRAME 的其他代码在我看来不再需要。

您可能会更喜欢允许图像以自由形式出现在您的单列中。在我的情况下，我同时使用两者，只要您的 img CSS class="image_design" 会让它看起来像已订购，您就可以了。

这会让您走上漫长的道路。你是一名编码员，你知道要发布什么代码。很难阅读其他人的代码，我使用了数千个调用函数，几乎无法遵循流程。

放松，你的问题是，"How do I place Bootstrap Accordion and Gallery features into my old ASP Classic Gallery page."

我会在您测试时进行更新，以更好地记录该过程。我还将以另一种方式发布，以便在搜索时找到您的 post 和我的。 :)

注意：我没有测试 ASP 代码，不确定我是否正确识别了您的 table 名称，但我确实在我的网站上测试了 HTML 布局和功能。

将 bootstrap 手风琴和图库与 asp-classic 中的旧数据库图库集成

integrate bootstrap accordion and gallery with old database gallery in asp-classic

vbscript

asp-classic

twitter-bootstrap