Show data in ASP.NET html table

I am writing an ASP.NET page which reads data from a database and needs to show it in a table. For some reason, I don’t want to use the gridView.

How do I show the data in a table on the HTML page?

This is my C# code:

        SqlConnection thisConnection = new SqlConnection(dbConnection);
        SqlCommand thisCommand = thisConnection.CreateCommand();
        thisCommand.CommandText = "SELECT * from Test";
        thisConnection.Open();
        SqlDataReader reader = thisCommand.ExecuteReader();

        while (reader.Read())
        {
            int id = reader.GetInt32(0);
            string Name = reader.GetString(1);
            string Pass = reader.GetString(2);                   
        }

        thisConnection.Close();

This is my ASPX page:

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/test.master" CodeFile="test.aspx.cs" Inherits="test" %>

<asp:Content ID="BodyContent" runat="server"  ContentPlaceHolderID="ContentPlaceHolder">
    <table width="100%" align="center" cellpadding="2" cellspacing="2" border="0" bgcolor="#EAEAEA" >
        <tr align="left" style="background-color:#004080;color:White;" >
            <td> ID </td>                        
            <td> Name </td>            
            <td>Pass</td>                        
        </tr>

        **<%--Need the while output into here--%>**

    </table>
</asp:Content>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Basically use the classic ASPPHPSpaghetti code approach.

First of all, place your code in one public method that returns a string.
The method:

public string getWhileLoopData()
{
        string htmlStr = "";
        SqlConnection thisConnection = new SqlConnection(dbConnection);
        SqlCommand thisCommand = thisConnection.CreateCommand();
        thisCommand.CommandText = "SELECT * from Test";
        thisConnection.Open();
        SqlDataReader reader = thisCommand.ExecuteReader();

        while (reader.Read())
        {
            int id = reader.GetInt32(0);
            string Name = reader.GetString(1);
            string Pass = reader.GetString(2);
            htmlStr +="<tr><td>"+id+"</td><td>"+Name+"</td><td>"+Pass+"</td></tr>"                   
        }

        thisConnection.Close();
        return htmlStr;
}

Then you can use the <%=getWhileLoopData()%> tag in ASP.NET that is equal to <%Response.Write(getWhileData())%>

It should look something like this:

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/test.master" CodeFile="test.aspx.cs" Inherits="test" %>

<asp:Content ID="BodyContent" runat="server"  ContentPlaceHolderID="ContentPlaceHolder">
    <table width="100%" align="center" cellpadding="2" cellspacing="2" border="0" bgcolor="#EAEAEA" >
        <tr align="left" style="background-color:#004080;color:White;" >
            <td> ID </td>                        
            <td> Name </td>            
            <td>Pass</td>                        
        </tr>

        <%=getWhileLoopData()%>

    </table>
</asp:Content>

There is also the option to use an repeater control and bind the data from your DB to an Item Template of your liking.

Method 2

I suggest you to use repeater control and create your html table structure in repeater.

<table cellpadding="0" cellspacing="0" width="100%">
<asp:Repeater ID="rpt" runat="server" >
<HeaderTemplate>
<tr class="Header">
<td>
ID
</td>
<td>
Name
</td>
<td>
Pass
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("ID")%>
</td>
<td>
<%# Eval("Name")%>
</td>
<td>
<%# Eval("Pass")%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>

bind repeater as same as you bind gridview

thanks

Method 3

If you put the runat="server" attribute on your HTML table, you can actually programmatically access it in your code-behind. It’s quite a powerful feature.

It’s definitely not the best solution, but it’s a very cool feature no one knows about.

Method 4

add 3 literal controls to your asp page put them in the tr below the title tds, and then:

while (reader.Read())
    {
        int id = reader.GetInt32(0);
        string Name = reader.GetString(1);
        string Pass = reader.GetString(2);  
        literalID.text += id.ToString();
        literalName.text += Name.ToString();
        literalPass.text += Pass.ToString();
    }

this is the easiest solution I know, but it’s not neat.
here’s the html code:

<tr align="left" style="background-color:#004080;color:White;" >
    <td> ID </td>                        
    <td> Name </td>            
    <td>Pass</td>                        
</tr>
<tr align="left" style="background-color:#004080;color:White;" >
    <td><asp:Literal ID="literalID" runat="server"></asp:Literal></td>                        
    <td><asp:Literal ID="literalName" runat="server"></asp:Literal></td>            
    <td><asp:Literal ID="literalPass" runat="server"></asp:Literal></td>   
</tr>

Method 5

In this solution , all HTML tags create in client Side and client have to render this processes instead of server.
this is a better idea and give best performance for your server
then use this code:

<asp:Content ID="BodyContent" runat="server" 
 ContentPlaceHolderID="ContentPlaceHolder">
     <table width="100%" align="center" cellpadding="2" cellspacing="2" border="0" bgcolor="#EAEAEA" >
         <tr align="left" style="background-color:#004080;color:White;" >
             <td> ID </td>                        
             <td> Name </td>            
            <td>Pass</td>                        
         </tr>

       <% if(dt != null && dt.rows.count>0){
              foreach(var item in dt.rows)
                 {%>
                   <tr>
                      <td><%=item["ID"]%></td>
                      <td><%=item["Name"]%></td>
                      <td><%=item["Pass"]%></td>
                   </tr>
                  <%}
                }%>

     </table> </asp:Content>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0