Please refer this code
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script type="text/javascript">
function AddNames() {
var name = document.getElementById("<%=txtName.ClientID %>").value;
var option = document.createElement("option");
option.text = name;
option.value = name;
document.getElementById("<%=lbNames.ClientID %>").options.add(option);
return false;
}
function RemoveName() {
var names = document.getElementById("<%=lbNames.ClientID %>");
var currentIndex = names.selectedIndex;
names.removeChild(names[currentIndex]);
return false;
}
function SaveList() {
var names = document.getElementById("<%=lbNames.ClientID %>");
var namesArray = new Array();
for (var i = 0; i < names.length; i++) {
namesArray.push(names[i].value);
}
$.ajax({
type: "POST",
url: "Default.aspx/SendParameters",
data: "{names:" + JSON.stringify(namesArray) + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r.d);
}
});
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtName" runat="server" />
<asp:Button Text="Add" runat="server" OnClientClick="return AddNames();" />
<hr />
<asp:ListBox ID="lbNames" runat="server"></asp:ListBox>
<asp:Button Text="Remove Selected" OnClientClick="return RemoveName();" runat="server" />
<br />
<asp:Button runat="server" Text="Save" OnClientClick="return SaveList();" />
</div>
</form>
</body>
</html>
WebMethod
[System.Web.Services.WebMethod]
public static string SendParameters(List<string> names)
{
// Write code here to save the list
return "ListBox Item Inserted";
}
