如何使用 asp.net 在自定义 table 中显示数据？

Question

我想以自定义 table 格式显示来自 SQL 数据库的数据。所以基本上这就是我想要实现的目标：

一个。在网格视图中显示 SQL table 中的所有条目，每行旁边有一个 view 按钮

乙。单击 view 按钮在新网页中显示以下内容

 ______________________________________
|           Customer Info              |
----------------------------------------
|Customer Name:   "From DB Table"      |
|Address:         "From DB Table"      |
----------------------------------------

然后下一个 table 在上面

 ______________________________________
|           Customer Network           |
----------------------------------------
|Network Location:   "From DB Table"   |
|APs:                "From DB Table"   |
----------------------------------------

以上所有内容均来自我的 SQL 数据库 table 中的一个 ID。所以我想把它分成几个部分来显示 SQL Table

中的所有数据

我还没有任何代码，因为我不确定如何执行此操作。

总结一下：当页面加载它时，它会在 gridview 中显示数据库中的所有条目，每行旁边都有一个查看按钮

然后，当用户点击 view 按钮时，它会打开一个包含上述 table.

的新页面

谢谢

代码

网格视图

<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

然后代码隐藏

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

    DataTable GetData()
    {
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["OfficeConnection"].ConnectionString))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand("SELECT DisplayName 'Display Name', Replace(PrimaryEmailAddress,'SMTP:', ' ') 'Email Address', Replace(Licenses,'reseller-account:', ' ') 'License Type', LastPasswordChangeTimestamp 'Last Password Reset' FROM Consulting ", con))
            {
                for (int i = dt.Rows.Count - 1; i >= 0; i--)
                {
                    if (dt.Rows[i][1] == DBNull.Value)
                        dt.Rows[i].Delete();
                }
                dt.AcceptChanges();
                SqlDataAdapter adpt = new SqlDataAdapter(cmd);
                adpt.Fill(dt);
            }

        }
        return dt;
    }
}
}

这是我的网络应用中不同部分的一些代码。我可以使用相同的代码并进行一些更改，但是如何添加“查看”按钮并实现上述问题？

Answer 1

查找 gridview CommandFields。您可以使用它们让 gridview 为每一行生成一个按钮，然后挂接到 gridview 的 OnRowCommand 事件。

这是我在快速 google 搜索中找到的几个示例，其中有一些不同的方法可以帮助您入门。

https://www.codeproject.com/Tips/564619/Example-of-gridview-rowcommand-on-Button-Click

http://ezzylearning.com/tutorial/using-button-columns-in-gridview

在 OnRowCommand 代码中，您可以将用户重定向到新页面，或在同一页面上显示不同的面板，但您更喜欢处理将视图切换到详细信息视图的操作。

Answer 2

一个。这应该有效：

Customers.aspx

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Email" HeaderText="Email" />
        <asp:BoundField DataField="Address" HeaderText="Address" />                    
        <%--add other data fields here--%>
        <asp:HyperLinkField Text="View" 
            DataNavigateUrlFields="ID" 
            DataNavigateUrlFormatString="~/View.aspx?id={0}" />
    </Columns>
</asp:GridView>

代码隐藏

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

private void GetData()
{
    SqlDataReader dr;
    using (SqlConnection con = new SqlConnection([YOUR CONNECTION STRING]))
    {
        con.Open();
        // replace with your query
        using(SqlCommand cmd = new SqlCommand("SELECT ID,Name,Email,Address FROM Customers", con))
        {
            dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            GridView1.DataSource = dr;
            GridView1.DataBind();
        }
    }           
}

乙。 "view" 页面接受客户 ID 作为参数，以您喜欢的任何 html 布局显示他的详细信息，例如：

View.aspx

<table>
    <tbody>
        <tr>
            <th colspan="2">Customer Info</th>
        </tr>
        <tr>
            <td>Customer Name:</td>
            <td><asp:Label ID="Name" runat="server" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><asp:Label ID="Address" runat="server" /></td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <th colspan="2">Customer Network</th>
        </tr>
        <tr>
            <td>Email:</td>
            <td><asp:Label ID="Email" runat="server" /></td>
        </tr>
        <tr>
            <td>Network Location:</td>
            <td><asp:Label ID="NetLocation" runat="server" /></td>
        </tr>
    </tbody>
</table>

代码隐藏

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

private void GetData()
{
    SqlDataReader dr;
    using (SqlConnection con = new SqlConnection([YOUR CONNECTION STRING]))
    {
        con.Open();
        // replace with your query
        using (SqlCommand cmd = new SqlCommand($"SELECT Name,Email,Address FROM Customers WHERE ID={Request["id"]}", con))
        {
            dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            if (dr.Read())
            {
                Name.Text = dr["Name"].ToString();
                Address.Text = dr["Address"].ToString();
                Email.Text = dr["Email"].ToString();
                // etc
            }
        }
    }
}

如前所述，您可以将从数据库中获取数据的代码和 HTML 布局替换为您喜欢的任何内容。这是最低限度。

如何使用 asp.net 在自定义 table 中显示数据？

How to display data in custom table using asp.net?

c#

sql

asp.net

webforms

aspxgridview