Show Data in ASP.NET HTML Table

Show data in ASP.NET html table

Basically use the classic ASP\PHP\Spaghetti 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.

ASP.NET Core MVC - How to display data from Excel into HTML table before inserting into the DB

You can use JavaScript to monitor the status of the file, then read the file and load it through xlsx.full.

You can refer to my test code below:

    <div class="container">
    <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
    <div class="card">
            <div class="card-header"><b>Select Excel File</b></div>
            <div class="card-body">
                <input type="file" name="file" id="excel_file" />
                <input type="button" name="display" value="Show Data" id="btnShow" onclick="ShowData()" class="btn btn-primary" />
            </div>
    </div>
    <div id="excel_data" class="mt-5"></div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonyous" />
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<script>
    var table_output = "";
    var excel_file = document.getElementById("excel_file");
    excel_file.addEventListener("change",(event) =>{

        var reader = new FileReader();

        reader.readAsArrayBuffer(event.target.files[0]);

        reader.onload = function(event){
            var data = new Uint8Array(reader.result);

            var work_book = XLSX.read(data,{type:'array'});

            var sheet_name = work_book.SheetNames;

            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]],{hearder:1});
            
            if(sheet_data.length > 0)
            {
                table_output += '<table class="table table-striped table-bordered">';

                table_output += '<thead><tr><th>First Name </th><th> Last Name </th><th> AdmissionYear </th><th> RegistrationNo </th></tr></thead>';
                table_output += '<tbody>';

                for(var row = 0; row < sheet_data.length; row++)
                {
                    table_output += '<tr>';
                    table_output += '<td>' + sheet_data[row].FirstName + '</td>';
                    table_output += '<td>' + sheet_data[row].LastName + '</td>';
                    table_output += '<td>' + sheet_data[row].AdmissionYear + '</td>';
                    table_output += '<td>' + sheet_data[row].RegistrationNo + '</td>';
                    table_output += '</tr>';
                }

                table_output += '</tbody></table>';
            }
        }
    })
    function ShowData()
    {
        document.getElementById("excel_data").innerHTML = table_output;
    }

</script>

Test Result:

When file is selected and ShowData is clicked:

Hope this can help you.

Display DataTable in HTML Table in ASP.Net C# Webform

If I had the points, I would have just made a comment but to fix your problem, all you need to do is comment out the following line:

PlaceHolder placeholder = new PlaceHolder();

The reason being is that, you have a PlaceHolder named placeholder on your markup, then create a completely new placeholder variable of Type PlaceHolder in the load code. Whilst they are named the same, the code considers them 2 completely different objects. See code below, also I borrowed someone else's code to create a datatable, since I don't have access to your db.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        /*
        Commented out because doing it this way creates 
        2 PlaceHolder variables named placeholder, everything else is as needed
        */
        //PlaceHolder placeholder = new PlaceHolder();

        //Populating a DataTable from database.
        DataTable dt = this.GetData();
        //Building an HTML string.
        StringBuilder html = new StringBuilder();
        //Table start.
        html.Append("<table border = '1'>");
        //Building the Header row.
        html.Append("<tr>");
        foreach (DataColumn column in dt.Columns)
        {
            html.Append("<th>");
            html.Append(column.ColumnName);
            html.Append("</th>");
        }
        html.Append("</tr>");
        //Building the Data rows.
        foreach (DataRow row in dt.Rows)
        {
            html.Append("<tr>");
            foreach (DataColumn column in dt.Columns)
            {
                html.Append("<td>");
                html.Append(row[column.ColumnName]);
                html.Append("</td>");
            }
            html.Append("</tr>");
        }
        //Table end.
        html.Append("</table>");
        string strText = html.ToString();
        ////Append the HTML string to Placeholder.
        placeholder.Controls.Add(new Literal { Text = html.ToString() });
    }
}
private DataTable GetData()
{
    // Modified your method, since I don't have access to your db, so I created one manually
    // Here we create a DataTable with four columns.
    DataTable table = new DataTable();
    table.Columns.Add("Dosage", typeof(int));
    table.Columns.Add("Drug", typeof(string));
    table.Columns.Add("Patient", typeof(string));
    table.Columns.Add("Date", typeof(DateTime));

    // Here we add five DataRows.
    table.Rows.Add(25, "Indocin", "David", DateTime.Now);
    table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now);
    table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
    table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
    table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
    return table;
}

How the display the MySQL Table to HTML table using asp.net c#

List<EmployeeAccounts> lst = GetEmployeeAccounts();

var sb = new System.Text.StringBuilder();

sb.Append(@"
<table class='table table-hover table-vcenter'>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Type</th>
<th>Email</th>
<th>Status</th>
</tr>
");

if(lst.Count==0)
{
    sb.Append("<tr><td colspan='5'>No record</td></tr>");
}
else
{
    foreach(var acc in lst)
    {
        sb.Append("<tr>");
        sb.AppendFormat("<td>{0}</td>", acc.idNumber);
        sb.AppendFormat("<td>{0}</td>", acc.fName);
        sb.AppendFormat("<td>{0}</td>", acc.uType);
        sb.AppendFormat("<td>{0}</td>", acc.email);
        sb.AppendFormat("<td class='label label-table label-info'>{0}</td>", acc.status);
        sb.Append("</tr>");
    }
}

sb.Append("</table>");

string htmlTable = sb.ToString();

add a placeholder at the ASP.NET page:

<asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>

then at the code behind, continue the coding:

ph1.Controls.Add(new LiteralControl(htmlTable));

==================================

Update: Version 2 (Oct 25, 2019)

List<EmployeeAccounts> lst = GetEmployeeAccounts();

var sb = new System.Text.StringBuilder();

sb.Append(@"
<table class='table table-hover table-vcenter'>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Type</th>
<th>Email</th>
<th>Status</th>
</tr>
");

if (lst.Count == 0)
{
    sb.Append("<tr><td colspan='5'>No record</td></tr>");
}
else
{
    foreach (var acc in lst)
    {
        sb.Append($@"
<tr>
<td>{acc.idNumber}</td>
<td>{acc.fName}</td>
<td>{acc.uType}</td>
<td>{acc.email}</td>
<td class='label label-table label-info'>{acc.status}</td>
</tr>
");
    }
}

sb.Append("</table>");

string htmlTable = sb.ToString();

how to display table rows in html table using asp.net

The easiest way is to use a GridView.

Add a GridView to your page and in your code behind just assign the DataReader you already have to this GridView's DataSource property.

dbConnection.Open();
        String str = "select c_name, c_number, c_mail, c_address from contacts where user_id = "+user_id+"";
        MySqlCommand cmd = new MySqlCommand(str, dbConnection);
        cmd.ExecuteNonQuery();
        MySqlDataReader mdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

GridView1.DataSource = MySqlDataReader;
GridView1.DataBind();

---

Related Topics