In this article I will explain how to dynamically add (insert) TextBox values to ListBox on Button click in ASP.Net using C# and VB.Net.
The TextBox values will be dynamically added to a DataTable which ultimately will be used to populate the ASP.Net ListBox control.
HTML Markup
The HTML Markup consists of an ASP.Net ListBox control, a TextBox and a Button.
<asp:ListBox ID="lstFruits" runat="server" Width = "150" Height = "60"></asp:ListBox>
<br />
<hr />
<asp:TextBox ID="txtFruit" runat="server" />
<asp:Button ID="Button1" Text="Add" runat="server" OnClick="AddValues" />
Namespaces
You will need to import the following namespace.
C#
VB.Net
Dynamically adding TextBox values to ListBox on Button click in ASP.Net
Inside the Page Load event, a check is made whether a ViewState object containing the dynamic DataTable for populating the ListBox controls exists.
If the ViewState object does not exists then a DataTable containing two columns FruitId and FruitName is created and added to the ViewState object.
Note: The FruitId column is set as AutoIncrement in order to automatically generate unique IDs for the ListBox items.
When the Add button is clicked, the DataTable is fetched from the ViewState object and a new Row is created and added to the DataTable with the value fetched from the TextBox.
After adding the row, the DataTable is saved back in the ViewState object in order to retain the previously added ListBox items across PostBacks.
Finally the DataTable is bound to the ListBox control and which ultimately adds the TextBox value to the ListBox control.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (ViewState["Fruits"] == null)
{
DataTable dtFruits = new DataTable();
dtFruits.Columns.AddRange(new DataColumn[2] { new DataColumn("FruitId", typeof(int)),
new DataColumn("FruitName", typeof(string)) });
dtFruits.Columns["FruitId"].AutoIncrement = true;
dtFruits.Columns["FruitId"].AutoIncrementSeed = 1;
dtFruits.Columns["FruitId"].AutoIncrementStep = 1;
ViewState["Fruits"] = dtFruits;
}
}
}
protected void AddValues(object sender, EventArgs e)
{
DataTable dtFruits = (DataTable)ViewState["Fruits"];
dtFruits.Rows.Add();
dtFruits.Rows[dtFruits.Rows.Count - 1]["FruitName"] = txtFruit.Text.Trim();
txtFruit.Text = string.Empty;
ViewState["Fruits"] = dtFruits;
lstFruits.DataSource = dtFruits;
lstFruits.DataTextField = "FruitName";
lstFruits.DataValueField = "FruitId";
lstFruits.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
If ViewState("Fruits") Is Nothing Then
Dim dtFruits As New DataTable()
dtFruits.Columns.AddRange(New DataColumn(1) {New DataColumn("FruitId", GetType(Integer)), _
New DataColumn("FruitName", GetType(String))})
dtFruits.Columns("FruitId").AutoIncrement = True
dtFruits.Columns("FruitId").AutoIncrementSeed = 1
dtFruits.Columns("FruitId").AutoIncrementStep = 1
ViewState("Fruits") = dtFruits
End If
End If
End Sub
Protected Sub AddValues(sender As Object, e As EventArgs)
Dim dtFruits As DataTable = DirectCast(ViewState("Fruits"), DataTable)
dtFruits.Rows.Add()
dtFruits.Rows(dtFruits.Rows.Count - 1)("FruitName") = txtFruit.Text.Trim()
txtFruit.Text = String.Empty
ViewState("Fruits") = dtFruits
lstFruits.DataSource = dtFruits
lstFruits.DataTextField = "FruitName"
lstFruits.DataValueField = "FruitId"
lstFruits.DataBind()
End Sub
Screenshot
Demo
Downloads