Question

我是asp.net的新手。我正在为大学做一个项目，我想把一个投资组合页面。在这个页面中，我希望只有带链接的图像。我在数据库的数据库中有一个表，其中包含图像路径的图像字段。

以下是现在的前端，静态html：

    <div id="gallery">
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_01_b.jpg" title="Nullam aliquam consectetur tortor, ac porta nisi ultrices ut."><img src="images/portfolio/image_01.jpg" alt="Image 01" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_02_b.jpg" title="Praesent luctus nisi rhoncus libero hendrerit ut tempus dolor."><img src="images/portfolio/image_02.jpg" alt="Image 02" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_03_b.jpg" title="Donec turpis nisl, malesuada in ultrices at."><img src="images/portfolio/image_03.jpg" alt="Image 03" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box gb_lmb"><span></span>
                <a class="pirobox" href="images/portfolio/image_04_b.jpg" title="Pellentesque fringilla diam ac metus pulvinar lacinia."><img src="images/portfolio/image_04.jpg" alt="Image 04" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_05_b.jpg" title=" Fusce purus lectus, rutrum non ultricies eu, aliquet nec sapien."><img src="images/portfolio/image_05.jpg" alt="Image 05" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_06_b.jpg" title="Maecenas fringilla consectetur lacus, et sagittis felis ut."><img src="images/portfolio/image_06.jpg" alt="Image 06" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box"><span></span>
                <a class="pirobox" href="images/portfolio/image_07_b.jpg" title="Cras ullamcorper accumsan sem eu sollicitudin."><img src="images/portfolio/image_07.jpg" alt="Image 07" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>
            <div class="gallery_box gb_lmb"><span></span>
                <a class="pirobox" href="images/portfolio/image_08_b.jpg" title="Proin aliquet malesuada odio ac laoreet."><img src="images/portfolio/image_08.jpg" alt="Image 08" /></a>
                <a href="#" class="port_detail">Detail</a>
                <div class="cleaner"></div>
            </div>

            <div class="cleaner"></div>
            <div class="paging">
                <ul>
                    <li><a href="http://www.templatemo.com" rel="nofollow" target="_parent">Previous</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/1" target="_parent">1</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/2" target="_parent">2</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/3" target="_parent">3</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/4" target="_parent">4</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/5" target="_parent">5</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/6" target="_parent">6</a></li>
                    <li><a rel="nofollow" href="http://www.templatemo.com/page/7" target="_parent">Next</a></li>
                </ul>
            </div>

如何使用asp.net进行此操作我认为我必须编写一个for循环，例如从数据库中获取所有记录，然后在前端打印它们但我不知道该怎么做它。

Answer 1

我假设这是经典的ASP.NET而不是ASP.NET MVC

如果您想在同一结构中显示多个项目，我建议您使用Repeater-control。它非常灵活且易于使用。

从数据库中读取数据并将其绑定到转发器。如有必要，您可以手动将数据绑定到OnItemDataBound-Event中的每个控件。

Answer 2

你可以使用<asp:Repeater />控件，它应该是这样的：

        <asp:Repeater ID="rptrPortfolio" runat="server">
        <ItemTemplate>
            <div class="gallery_box">
                <span></span>
                 <%--Where in `<%# Eval("ImgUrl") %>` "ImgUrl" should be replaced by your property name.--%>
                    <a class="pirobox" href="<%# Eval("ImgUrl") %>" title="Nullam aliquam consectetur tortor, ac porta nisi ultrices ut.">
                        <img src="<%# Eval("ImgUrl") %>" alt="Image 01" />
                    </a>
                    <a href="#" class="port_detail">Detail</a>
                    <div class="cleaner"></div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

你可以将你的PortfolioCollection绑定在代码隐藏（.cs）中，如下所示：

  rptrPortfolio.DataSource = YourPortfolioCollection;
  rptrPortfolio.DataBind();

Answer 3

您也可以使用网格视图。您可以在页面加载时绑定数据

      protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bind();
            }
        }
protected void bind()
{
    yourGridId.DataSource = yourdatasource;
    yourGridId.DataBind();
}

asp.net中的投资组合页面

3 个答案: