如何運行 SQL 代碼並在同一 aspx 頁面上循環/顯示結果？

Question

我正在嘗試為我的 asp .net 項目創建一個主頁，該主頁應該顯示數據庫中所有可用的產品。 下面的代碼是我的 aspx 代碼，我已經用 --> 和 <-- 標記了我試圖循環並顯示來自數據庫的所有結果的代碼。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="Try.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<section class="py-5">      
            <div class="container px-4 px-lg-5 mt-5">
                <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                  
                    <div class="col mb-5">
                        <div class="card h-100">
                       -->  <!-- Product image-->
                            <img class="card-img-top" width="205.99px" height="205.99px" src="data:image/jpg;base64,<%= @Convert.ToBase64String(*product image*) %>" alt="..." />
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    
                                    <!-- Product name-->
                                    <h5 class="fw-bolder">*product name*</h5>
                                    <!-- Product price-->
                                    *product price*<br/>
                                    *product description*
                                </div>
                            </div> <--
                            
                            <!-- Product actions-->
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                            <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="productDetails.aspx">Details</a></div><br />
                            <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="home.aspx">Add to cart</a></div> 

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

                </div>
            </div>
        </section>
</asp:Content>

下面的代碼是我目前留在 aspx.cs 頁面上的代碼，用於運行 SQL 並檢索結果。 我希望將它放在帶有 <% %> 的 aspx 頁面中的某個位置，但有錯誤。

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Try
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string strCon = ConfigurationManager.ConnectionStrings["WebConfigConString"].ConnectionString;
            SqlConnection con = new SqlConnection(strCon);
            con.Open();

            string strHome = "SELECT * FROM PRODUCT";
            SqlCommand cmdHome = new SqlCommand(strHome, con);

            SqlDataReader dtrHome = cmdHome.ExecuteReader();

            while (dtrHome.Read())
            {
                //display the result from database on the aspx page
            }

        }
    }
}

Answer 1

那么，“顯示”重復數據的最常見方式是什么？

是使用顯示重復數據的內置控件之一。 然后您可以“輸入”控制數據源，asp.net 為您完成工作！

所以，假設我加入了 GridView（通常是一個不錯的選擇）。

所以，現在我們的標記是這樣的：

        <asp:GridView ID="GridView1" runat="server" Width="70%">

        </asp:GridView>

我們的頁面加載代碼現在是這樣的：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();

    }

    void LoadData()
    {

        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = 
                @"SELECT ID, Fighter, Engine, Thrust, Description FROM Fighters";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());

                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }

我們的結果現在是這樣的：

所以，實際上我們可以布局“一件事”，然后讓它重復。

現在，我的 Fighters 表有一個鏈接到圖片的列。

所以，我可以使用向導創建 GV，然后刪除頁面上的 sql 數據源，並用這個標記說：

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table"  >
        <Columns>
            <asp:BoundField DataField="Fighter" HeaderText="Fighter"  />
            <asp:BoundField DataField="Engine" HeaderText="Engine"  />
            <asp:BoundField DataField="Thrust" HeaderText="Thrust"  />
            <asp:BoundField DataField="Description" HeaderText="Description" />

            <asp:TemplateField HeaderText="View">
                <ItemTemplate>
                    <asp:ImageButton ID="cmdView" runat="server" Width="150px"
                        ImageUrl = '<%# Eval("ImagePath") %>'
                        OnClick="cmdView_Click" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

現在我明白了：

但是，也許我不想要一個網格，而是一個像卡片一樣的視圖？

好的，那么我們可以使用“中繼器”。

再一次，我們的想法是我們布局一件東西，然后給它提供數據，它會為我們“重復”。

所以，現在讓我們使用中繼器。

在中繼器內部，我們創建了“一個”我們想要顯示的東西。

所以，說這個標記：

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>                   
        <div style="border-style:solid;color:black;width:320px;height:450px;float:left;margin-right:10px;margin-bottom:10px">
            <div style="text-align:center;padding:2px 10px 2px 10px">
                <h3><%# Eval("Fighter") %></h3>
                <asp:Image ID="Image2" runat="server" 
                    ImageUrl = '<%# Eval("ImagePath") %>' Width="170" />
                <h4>Engine</h4>
                <asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
                <h4>Description</h4>
                <asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

要加載的代碼 - 相同（只需將該 rstData（我們的表）發送到轉發器。

我們現在得到這個：

而且因為每個“重復”的東西都是一個簡單的 div（向左浮動），

然后，如果我重新調整瀏覽器的大小，我會看到這個（對於大寬屏瀏覽器和監視器）。

正如你所看到的，你得到了很多很好的重復數據，而且你付出的努力很少。

既然你想展示產品？ 然后使用 GridView，或者通常更好的 ListView。 您甚至可以讓向導為您生成該網格或列表視圖。 然后你可以把它清理一下，或者保持原樣。