Hi,
Please refer below code.
I have referred below article
HTML
<div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ShowData() {
$.ajax({
type: "POST",
url: "Default.aspx/GetData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var data = response.d;
$('[id*=LB_AvailFields]').empty();
var listBox = $('[id*=LB_AvailFields]');
$.map(data, function (item) {
var option = document.createElement('option');
option.text = item.PMSystemName;
listBox[0].add(option);
});
}
</script>
<asp:ListBox ID="LB_AvailFields" runat="server"></asp:ListBox>
<input id="btnGetData" type="button" value="Show Data" onclick="ShowData()" />
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
List<MyListItem> LB = new List<MyListItem>();
MyListItem lbitem;
for (int i = 0; i < 5; i++)
{
lbitem = new MyListItem();
lbitem.PMKey = "Key" + i;
lbitem.PMSystemName = "SystemName: " + i;
LB.Add(lbitem);
}
LB_AvailFields.DataSource = LB;
LB_AvailFields.DataTextField = "PMSystemName";
LB_AvailFields.DataValueField = "";
LB_AvailFields.DataBind();
HttpContext.Current.Session["LB_AvailFields"] = LB_AvailFields;
}
}
[System.Web.Services.WebMethod(EnableSession = true)]
public static List<MyListItem> GetData()
{
List<MyListItem> LB = new List<MyListItem>();
MyListItem lbitem;
for (int i = 0; i < 8; i++)
{
lbitem = new MyListItem();
lbitem.PMKey = "Key" + i;
lbitem.PMSystemName = "SystemName: " + i;
LB.Add(lbitem);
}
return LB;
}
public class MyListItem
{
public string PMKey { get; set; }
public string PMSystemName { get; set; }
}
Screenshot