如何在Bootstrap表格中展示MySQL数据（VB.NET+ASPX场景）

Hey there! Let's get your Bootstrap table populated with MySQL data step by step. I'll show you two common approaches—one using ASP.NET's GridView (cleaner for Web Forms) and another by building the HTML directly in code.

This approach leverages ASP.NET's built-in data binding controls, which is more maintainable than manual HTML building.

Step 1: Update your ASPX page #

Replace your static table with a GridView, and apply Bootstrap's table classes to it. We'll map each column to your clienti_sw table fields:

<div class="col-md-12">
  <div class="card strpied-tabled-with-hover">
    <div class="card-header ">
      <h4 class="card-title">Realco App</h4>
      <p class="card-category">Qui sono presentit tutte le versioni dell'App Realco</p>
    </div>
    <div class="card-body table-full-width table-responsive">
      <!-- Replace static table with GridView -->
      <asp:GridView ID="gvAppVersions" runat="server" 
        CssClass="table table-hover table-striped"
        AutoGenerateColumns="False"
        HeaderStyle-CssClass="thead-light">
        <Columns>
          <asp:BoundField DataField="Software" HeaderText="Software" />
          <asp:BoundField DataField="Versione" HeaderText="Versione" />
          <asp:BoundField DataField="ReleaseData" HeaderText="Release Data" DataFormatString="{0:dd/MM/yyyy}" />
          <asp:TemplateField HeaderText="Download">
            <ItemTemplate>
              <a href="#" aria-disabled="true" data-version='<%# Eval("Software") %>.apk'>Download</a>
            </ItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
    </div>
  </div>
</div>

Note: Make sure the DataField values match the actual column names in your clienti_sw table. I assumed ReleaseData is the date column—adjust if yours is named differently.

Step 2: Update your VB.NET code-behind #

Modify your database code to fetch data and bind it to the GridView. We'll use MySqlDataAdapter to fill a DataSet, then bind that to the GridView:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindAppVersions()
    End If
End Sub

Private Sub BindAppVersions()
    Dim SQLConnect As String = ConfigurationManager.ConnectionStrings("myConnectionString").ConnectionString
    Using con As New MySqlConnection(SQLConnect)
        Dim cmdText As String = "SELECT Software, Versione, ReleaseData FROM clienti_sw"
        Using cmd As New MySqlCommand(cmdText, con)
            con.Open()
            Dim adapter As New MySqlDataAdapter(cmd)
            Dim ds As New DataSet()
            adapter.Fill(ds, "AppVersions")
            
            ' Bind data to GridView
            gvAppVersions.DataSource = ds.Tables("AppVersions")
            gvAppVersions.DataBind()
        End Using
    End Using
End Sub

*Key improvements here:

• Using Using statements to automatically dispose of database objects (prevents memory leaks)
• Only binding data on the first page load (Not IsPostBack) to avoid unnecessary database calls
• Specifying exact columns in the SQL query instead of SELECT * (better practice for performance and clarity)*

If you prefer to stick closer to your original static table structure, you can generate the table rows in code and inject them into the page.

Step 1: Add a Placeholder to your ASPX page #

Replace the static <tbody> content with a Placeholder control where we'll inject the dynamic rows:

<div class="col-md-12">
  <div class="card strpied-tabled-with-hover">
    <div class="card-header ">
      <h4 class="card-title">Realco App</h4>
      <p class="card-category">Qui sono presentit tutte le versioni dell'App Realco</p>
    </div>
    <div class="card-body table-full-width table-responsive">
      <table class="table table-hover table-striped">
        <thead>
          <th>Software</th>
          <th>Versione</th>
          <th>Release Data</th>
          <th>Download</th>
        </thead>
        <tbody>
          <asp:Placeholder ID="phTableRows" runat="server"></asp:Placeholder>
        </tbody>
      </table>
    </div>
  </div>
</div>

Step 2: Generate rows in code-behind #

Use MySqlDataReader to iterate through your data and build HTML strings for each row:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        PopulateTableRows()
    End If
End Sub

Private Sub PopulateTableRows()
    Dim SQLConnect As String = ConfigurationManager.ConnectionStrings("myConnectionString").ConnectionString
    Using con As New MySqlConnection(SQLConnect)
        Dim cmdText As String = "SELECT Software, Versione, ReleaseData FROM clienti_sw"
        Using cmd As New MySqlCommand(cmdText, con)
            con.Open()
            Using reader As MySqlDataReader = cmd.ExecuteReader()
                Dim htmlRows As New StringBuilder()
                While reader.Read()
                    ' Get values from reader (adjust column names to match your table)
                    Dim software As String = reader("Software").ToString()
                    Dim versione As String = reader("Versione").ToString()
                    Dim releaseDate As DateTime = Convert.ToDateTime(reader("ReleaseData"))
                    Dim formattedDate As String = releaseDate.ToString("dd/MM/yyyy")
                    
                    ' Build the table row HTML
                    htmlRows.AppendLine("<tr>")
                    htmlRows.AppendLine($"<td>{software}</td>")
                    htmlRows.AppendLine($"<td>{versione}</td>")
                    htmlRows.AppendLine($"<td>{formattedDate}</td>")
                    htmlRows.AppendLine($"<td><a href='#' aria-disabled='true' data-version='{software}.apk'>Download</a></td>")
                    htmlRows.AppendLine("</tr>")
                End While
                ' Inject the HTML into the placeholder
                phTableRows.Controls.Add(New LiteralControl(htmlRows.ToString()))
            End Using
        End Using
    End Using
End Sub

Important Notes #

• Column Names: Double-check that the column names in your SQL query and code match exactly what's in your clienti_sw table (case sensitivity might matter depending on your MySQL settings).
• Error Handling: You should add try-catch blocks to handle database errors (e.g., connection failures). For example:

  Try
      ' Database code here
  Catch ex As Exception
      ' Log the error or show a user-friendly message
      Response.Write("An error occurred: " & ex.Message)
  End Try
  

• Download Link: Right now the href is set to #—you'll want to replace that with the actual URL or handler to serve the APK file.

内容的提问来源于stack exchange，提问作者NiceToMytyuk