Dynamically create div and label inside an existing div using c#

Question

I am working on a asp.net webforms application in which I need to show a list of data's in the web page from my sql database. The data has to be populated inside an existing div based on the number of values selected from the database.

QUESTION I have seen stack overflow community for this and all I had was creating an label inside a div. My issue is, I need to create a div and a label inside the created div and these has to be placed inside an existing div.

I have a parent div and inside this div, I need to dynamically create other div's and inside these dynamically created div, I need to show the values from my database.

The structure of my div is as follows:

<div id="parent">                                   //This is my parent DIV 
    <div class="row row-list">                 // This div has to be dynamically created 
        <div class="col-md-3">                 // This div has to be dynamically created 
            <label>
                Total Number of Students:      // This will to get populated dynamically from database
            </label>
        </div>
        <div class="col-md-3">                 // This is the second div that has to be dynamically created
            <label>
                Number of Subjects:            // This will get populated dynamically from database
            </label>
        </div>
    </div>
</div>

The DIV's inside the parent div will be created based on the count of values that's retrieved from the database.

I able to achieve this using the Response.Write method. Below is my code

    public void AddDynamicLabels()
    {
        string ConString = ConfigurationManager.ConnectionStrings["TestString"].ConnectionString;
        SqlConnection con = new SqlConnection(ConString);
        string CmdString = "SELECT Distinct Details from institute_data";
        SqlCommand cmd = new SqlCommand(CmdString, con);
        con.Open();
        SqlDataReader reader = cmd.ExecuteReader();
        DataTable dt = new DataTable();
        dt.Load(reader);
        con.Close();

        foreach (DataRow row in dt.Rows)
        {
            //pnlKPI.InnerHtml = "<div><div>";

            Response.Write("<div class='row row-list'><div class='col-md-3'>");
            Response.Write("<label>" + row["sKpi_name"].ToString() + "</label>");
            Response.Write("</div>");
            Response.Write("<div class='col-md-2'>");
            Response.Write("<label>COlumn 2</label>");
            Response.Write("</div></div>");

        }

    }

and my aspx code is

<div class="col-md-10">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5 class="panel-title">DETAILS</h5>
        </div>
    <div id="parent">
        <% AddDynamicLabels(); %>
    </div>
</div>

I just want to know whether there is any alternative approach which has more performance to achieve this instead of using response.write method.

Possible duplicate of [creating html div in c#](https://stackoverflow.com/questions/15746644/creating-html-div-in-c-sharp) — Amit Kumar Singh, Oct 11 '17 at 16:04
Apologies, I'd forgotten about the limations of aspx. In your case, you'd need to pull out the KPI Names into a list which could be data bound to a `DataRepeater` with your table definition. Alternatively, you could bind it in a `GridView` by connecting it to an `ObjectDataSource` that calls your `Select` statement — DiskJunky, Oct 11 '17 at 16:15
@DiskJunky Thanks for your response. I have a limitation that, I am not supposed to use Gridview, DataView or anyother control. Just it has to be binded into a pure HTML control like html label. — Karthik Venkatraman, Oct 11 '17 at 16:20
If that's the case then an implementation of `DataRepeater` is the way to go. You can put your vanilla html in there with the data bound dynamic value — DiskJunky, Oct 11 '17 at 16:22

Dynamically create div and label inside an existing div using c#

0 Answers0