Dynamic Html Table

Hi Ramco,

Yes, you can make this code more dynamic to handle different tables and fields. Here’s an approach that can help you achieve that:

• Parameterize the SQL Query: Pass the table name and fields dynamically.
• Generate the Table Header Dynamically: Based on the columns returned by the query.
• Generate the Rows Dynamically: Loop through the columns and create table rows accordingly.

Here’s a modified version of your code:

public void GenerateDynamicTable(string tableName, string[] fields, string orderByField)
{
    StringBuilder htmlTable = new StringBuilder();
    con.ConnectionString = ConfigurationManager.ConnectionStrings["cnn_Live"].ConnectionString;
    
    string query = $"SELECT {string.Join(", ", fields)} FROM {tableName} ORDER BY {orderByField}";
    SqlCommand cmd = new SqlCommand(query, con);
    cmd.CommandType = CommandType.Text;
    
    if (con.State == ConnectionState.Closed)
    {
        con.Open();
    }
    
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);

    if (dt.Rows.Count > 0)
    {
        int count = 1;
        htmlTable.Append("");
        
        // Dynamically generate the table header
        htmlTable.Append("");
        foreach (DataColumn column in dt.Columns)
        {
            if (column.ColumnName != "docentry" && column.ColumnName != "status")
            {
                htmlTable.Append($"");
            }
        }
        htmlTable.Append("");
        htmlTable.Append("");
        htmlTable.Append("");
        htmlTable.Append("");

        htmlTable.Append("");
        foreach (DataRow row in dt.Rows)
        {
            string status = Convert.ToBoolean(row["status"]) ? "Active" : "Blocked";
            
            htmlTable.Append("");
            htmlTable.Append($"");
            
            foreach (var field in fields)
            {
                htmlTable.Append($"");
            }
            
            // Status column
            if (status == "Active")
                htmlTable.Append("");
            else
                htmlTable.Append("");

            // Action buttons
            htmlTable.Append("");

            htmlTable.Append($"");
            htmlTable.Append($"");
            htmlTable.Append("");
            count++;
        }
        htmlTable.Append("");
        htmlTable.Append("
Sr.
{column.ColumnName}
Action
{count}
{row[field]}
" + status + "
" + status + "
");
            htmlTable.Append("");

            string deleteAttributes = status == "Blocked" ? "style='pointer-events: none; opacity: 0.5;' onclick='return false;'" : "data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'";
            htmlTable.Append($"");

            htmlTable.Append("
{row["docentry"]}
{row["status"]}
");
        PlaceHolderTable.Controls.Add(new Literal { Text = htmlTable.ToString() });
    }
}

Explanation:

• GenerateDynamicTable Method: Takes the table name, fields, and the order-by field as parameters.
• Dynamic SQL Query: Builds the SQL query dynamically based on the provided table name and fields.
• Dynamic Header Generation: Loops through the columns returned by the query and creates headers dynamically.
• Dynamic Row Generation: Loops through each row and each field, creating the rows accordingly.

Usage Example:

string[] fields = { "category", "shortname", "status", "docentry" };
GenerateDynamicTable("EmployeeCategory", fields, "Category");

This will help you Ramco.

Thanks

Hello Ramco Ramco ,

To create a dynamic HTML table in C#, follow these steps:

1. Fetch Data: Load your data from the database into a DataTable.

2. Build the Table: Use StringBuilder to construct the HTML. Generate table headers and rows based on the DataTable content.

Here’s a simplified example:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Web.UI.WebControls;

public partial class YourPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GenerateDynamicTable();
    }

    private void GenerateDynamicTable()
    {
        StringBuilder htmlTable = new StringBuilder();
        string connectionString = ConfigurationManager.ConnectionStrings["cnn_Live"].ConnectionString;

        using (SqlConnection con = new SqlConnection(connectionString))
        {
            SqlCommand cmd = new SqlCommand("SELECT * FROM EmployeeCategory ORDER BY Category", con);
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);

            if (dt.Rows.Count > 0)
            {
                htmlTable.Append("");

                // Create headers
                htmlTable.Append("");
                foreach (DataColumn column in dt.Columns)
                {
                    htmlTable.Append($"");
                }
                htmlTable.Append("");
                htmlTable.Append("");

                // Create rows
                htmlTable.Append("");
                int count = 1;
                foreach (DataRow row in dt.Rows)
                {
                    string status = Convert.ToBoolean(row["status"]) ? "Active" : "Blocked";
                    string statusClass = status == "Active" ? "badge bg-primary" : "badge bg-danger";
                    string deleteAttributes = status == "Blocked" ? "style='pointer-events: none; opacity: 0.5;' onclick='return false;'" : "data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'";

                    htmlTable.Append("");
                    htmlTable.Append($"");
                    foreach (DataColumn column in dt.Columns)
                    {
                        if (column.ColumnName == "status")
                        {
                            htmlTable.Append($"");
                        }
                        else
                        {
                            htmlTable.Append($"");
                        }
                    }

                    htmlTable.Append("");
                    htmlTable.Append("");
                    count++;
                }
                htmlTable.Append("");
                htmlTable.Append("
{column.ColumnName}
Action
{count}
{status}
{row[column]}
");
                    htmlTable.Append("");
                    htmlTable.Append($"");
                    htmlTable.Append("
");

                PlaceHolderTable.Controls.Add(new Literal { Text = htmlTable.ToString() });
            }
        }
    }
}

Hope it helps!