Dynamically Create Textboxes in Asp.Net C# and Save Data in Database

Last updated: 14th November 2024

The HtmlGenericControl Class in Asp.Net, provides all the necessary methods and properties to create dynamic elements at the server side (or through a code behind procedure). Here in this post I am going to show you how to create multiple textboxes dynamically in Asp.Net using the "HtmlGenericControl" class in C# and Vb and finally save the data in an SQL Server database table.

Scenario

I have a "Students" table in my SQL Server database, with few columns in it. I want to "populate" the table with data extracted from dynamically created elements on my web page.

I have a button control on my web page. With the click of a button, I want to create "textboxes" (for data entry) dynamically.

The "textboxes" that will be created, are based on the "columns" in the table (SQL Server). When a user clicks the button, a code behind procedure will extract the column names from the "Students" table and create the textboxes.

These are dynamically created input boxes. Therefore, I’ll use jQuery to extract values in the textboxes and call a Web Method using Ajax and save the data in database.

The Students Table (SQL Server)

The table has four columns.

CREATE TABLE Students (
    ID int IDENTITY(1,1) PRIMARY KEY,
    Name varchar(255) NOT NULL,
    Address varchar(255),
    Age int
);

The Markup

In the markup section, I have a button control, whose click event will call a code behind method, which will create the textboxes. Next, I have a <div> element that will act as a container to the textboxes. I also have another button (remains hidden) to submit the data.

<div class="main">
    <div>
        <asp:Button ID="bt" runat="server" Text="Create a Form" OnClick="createForm" />
    </div>

    <h2>Students Info</h2>

    <div id="columns" runat="server" 
        style="height:auto;
        width:300px;
        overflow:auto;">

    </div>
    <input type="button" id="submit" value="Submit" runat="server" style="display:none;" />
</div>

Let us now write the code to create the textboxes through a program.

Create Multiple Textboxes (C#)

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data.SqlClient;
using System.Web.UI.HtmlControls;

public partial class SiteMaster : System.Web.UI.MasterPage
{
    SqlConnection myConn = default(SqlConnection);
    const string sConnString = "Data Source=DNA;Persist Security Info=False;" + 
        "Initial Catalog=DNA_Classified;User Id=sa;Password=demo;Connect Timeout=30;";

    protected void createForm(object sender, EventArgs e)
    {
        using (SqlConnection con = new SqlConnection(sConnString))
        {
            string sSQL = "SELECT Name FROM sys.columns " + 
                "WHERE object_id = OBJECT_ID('dbo.Students')";

            SqlCommand objComm = new SqlCommand(sSQL, con);
            con.Open();

            SqlDataReader reader = objComm.ExecuteReader();

            int iCnt = 0;       // JUST A COUNTER.

            while (reader.Read())
            {
                if (iCnt >= 1)
                {
                    HtmlGenericControl ul = new HtmlGenericControl("ul");
                    ul.Attributes.Add("style", "margin:2px 0;padding:0;");

                    HtmlGenericControl liCol = new HtmlGenericControl("li");
                    HtmlGenericControl spanCol = new HtmlGenericControl("span");

                    spanCol.InnerHtml = reader["Name"].ToString();
                    liCol.Attributes.Add("style", "width:30%;float:left;");
                    liCol.Controls.Add(spanCol);

                    // CREATE AN INSTANCE OF TEXTBOX.
                    // WITH EVERY COLUMN NAME, WE'LL CREATE AND ADD A TEXTBOX.
                    TextBox txt = new TextBox();
                    txt.ID = reader["Name"].ToString();

                    // ASSIGN A CLASS. WE'LL USE THE CLASS NAME TO EXTRACT DATA USING JQUERY.
                    txt.CssClass = "fld";

                    HtmlGenericControl liTxt = new HtmlGenericControl("li");
                    liTxt.Attributes.Add("style", "width:auto;");
                    liTxt.Controls.Add(txt);    // ADD THE NEWLY CREATED TEXTBOX TO A LIST.

                    ul.Controls.Add(liCol);
                    ul.Controls.Add(liTxt);

                    columns.Controls.Add(ul);
                }
                iCnt = iCnt + 1;
            }

            submit.Attributes.Add("style", "display:block;float:right;margin:10px;");
        }
    }
}

Run the application. You will see a "button" on the web page. Clicking the button will show you three empty textboxes, along with the Submit button. All controls are created dynamically.

image Create Multiple Textboxes Dynamically using Asp.Net C#

Vb Code

Option Explicit On
Imports System.Data.SqlClient

Partial Class Site
    Inherits System.Web.UI.MasterPage

    Dim myConn As SqlConnection

    Const sConnString As String = "Data Source=DNA;Persist Security Info=False;" & _
        "Initial Catalog=DNA_Classified;User Id=sa;Password=demo;Connect Timeout=30;"

    Protected Sub createForm(ByVal sender As Object, ByVal e As EventArgs)

        Using con As SqlConnection = New SqlConnection(sConnString)
            Dim sSQL As String = "SELECT Name FROM sys.columns " & _
                "WHERE object_id = OBJECT_ID('dbo.Students')"

            Dim objComm As New SqlCommand(sSQL, con)
            con.Open()

            Dim reader As SqlDataReader = objComm.ExecuteReader()

            Dim iCnt As Integer = 0

            While reader.Read
                If Val(iCnt) >= 1 Then
                    Dim ul As New HtmlGenericControl("ul")
                    ul.Attributes.Add("style", "margin:2px 0;padding:0;")

                    Dim liCol As New HtmlGenericControl("li")
                    Dim spanCol As New HtmlGenericControl("span")

                    spanCol.InnerHtml = reader.Item("Name")
                    liCol.Attributes.Add("style", "width:30%;float:left;")
                    liCol.Controls.Add(spanCol)

                    ' CREATE AN INSTANCE OF TEXTBOX.
                    ' WITH EVERY COLUMN NAME, WE'LL CREATE AND ADD A TEXTBOX.
                    Dim txt As New TextBox()
                    txt.ID = reader.Item("Name")

                    ' ASSIGN A CLASS. WE'LL USE THE CLASS NAME TO EXTRACT DATA USING JQUERY.
                    txt.CssClass = "fld"

                    Dim liTxt As New HtmlGenericControl("li")
                    liTxt.Attributes.Add("style", "width:auto;")
                    liTxt.Controls.Add(txt)    ' ADD THE NEWLY CREATED TEXTBOX TO A LIST.

                    ul.Controls.Add(liCol)
                    ul.Controls.Add(liTxt)

                    columns.Controls.Add(ul)
                End If

                iCnt = iCnt + 1
            End While

            submit.Attributes.Add("style", "display:block;float:right;margin:10px;")
        End Using
    End Sub
End Class

The controls are created using a code behind procedure.

Save data in Database

Now, we’ll write a Web Method to save all the data extracted from the dynamically created textboxes. We’ll call the method through an Ajax Post method.

The method will take a string value as parameter. The values are the contents from the textboxes.

Web Method (C#)

[System.Web.Services.WebMethod()]
public static string addStudents(string val)
{
    string functionReturnValue = null;
    try
    {
        using (SqlConnection con = new SqlConnection(sConnString))
        {
            string sQuery = null;
            sQuery = "INSERT INTO dbo.Students (Name, Address, Age)" + 
                "VALUES (" + HttpUtility.UrlDecode(val) + ")";

            using (SqlCommand cmd = new SqlCommand(sQuery))
            {
                cmd.Connection = con;
                con.Open();

                cmd.ExecuteNonQuery();
                con.Close();

                functionReturnValue = "Success";
            }
        }
    }
    catch (Exception ex)
    {         functionReturnValue = "There was an error";     }
    finally
    {     }

    return functionReturnValue;
}

Web Method (Vb)

<System.Web.Services.WebMethod()> _
Public Shared Function addStudents(ByVal val As String) As String
    Try
        Using con As SqlConnection = New SqlConnection(sConnString)
            Dim sQuery As String
            sQuery = "INSERT INTO dbo.Students (Name, Address, Age)" & _
                "VALUES (" & HttpUtility.UrlDecode(val) & ")"

            Using cmd As SqlCommand = New SqlCommand(sQuery)
                With cmd
                    .Connection = con
                    con.Open()

                    cmd.ExecuteNonQuery()
                    con.Close()

                    addStudents = "Success"
                End With
            End Using
        End Using
    Catch ex As Exception
        addStudents = "There was an error"
    Finally
        '
    End Try
    
    Return addStudents
End Function

Finally, we’ll write the script to make an Ajax call to our Web Method.

The jQuery Ajax

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        BindControls();
    });

    // CALL A WEB METHOD TO SAVE DATA USING AJAX.
    function BindControls() {
        $('#submit').click(function () {
            saveTextValue();
        });

        var values = new Array();

        function saveTextValue() {

            // WHILE CREATING THE TEXTBOXES THROUGH A CODE PROCEDURE, 
            // WE HAVE ASSIGNED A CLASS NAME CALLED "fld" TO EACH TEXTBOX.
            // USING THE CLASS NAME, WE CAN EASILY EXTRACT VALUES FROM THE INPUT BOXES.
            $('.fld').each(function () {
                if (this.value != '') {
                    values.push("'" + this.value + "'");
                }
            });

            if (values != '') {
                // ONCE WE HAVE ALL THE VALUES, MAKE THE CALL TO OUR WEB METHOD.
                $.ajax({
                    type: 'POST',
                    url: 'https://localhost:53094/csharp/default.aspx/addStudents',
                    data: "{'val':'" + escape(values) + "'}",
                    dataType: 'json',
                    headers: { "Content-Type": "application/json" },
                    success: function (response) {
                        alert(response.d);      // DONE.
                        values = '';
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            }
            else { alert("Fields cannot be empty.") }
        }
    }
</script>

← PreviousNext →