In this article I will explain how to add (insert) Item (values) to ASP.Net ListBox using jQuery. The value from the TextBox will be added to the ASP.Net ListBox control using jQuery.
Add (Insert) Items to ASP.Net ListBox using jQuery
The following HTML Markup consists of an ASP.Net ListBox control, a TextBox and a Button.
When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, first the value from the TextBox is fetched and then a HTML OPTION element is created.
The TextBox value is set to the InnerHtml and Value property of the OPTION element. Finally the OPTION element is appended to the ASP.Net ListBox control.
<asp:ListBox ID="ListBox1" runat="server" Width="150" Height="60" SelectionMode = "Multiple"></asp:ListBox>
<br />
<hr />
<asp:TextBox ID="txtValue" runat="server" />
<asp:Button ID="btnAdd" Text="Add" runat="server" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnAdd]").bind("click", function () {
var value = $("[id*=txtValue]").val();
var listBox = $("[id*=ListBox1]");
var option = $("<option />").val(value).html(value);
listBox.append(option);
$("[id*=txtValue]").val("");
return false;
});
});
</script>
Screenshot
Fetching the ASP.Net ListBox items on Server Side (Code Behind)
The items added to the ASP.Net ListBox using jQuery are not added in ViewState and hence will not be available in the ListBox Items collection.
Thus we will need to make use of Request.Form collection and fetch the values in the following way.
C#
protected void Submit(object sender, EventArgs e)
{
string values = Request.Form[ListBox1.UniqueID];
}
VB.Net
Protected Sub Submit(sender As Object, e As System.EventArgs)
Dim values As String = Request.Form(ListBox1.UniqueID)
End Sub
The following screenshot displays the ListBox selected values posted to the server.
Note: Only selected items are posted to server. Thus if you want to fetch items on server side, you need to first select them in ListBox.
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads