Populate ListBox using jQuery AJAX and apply Bootstrap MultiSelect plugin in ASP.Net

Last Reply on Dec 09, 2016 03:28 AM By dharmendr

Posted on Dec 07, 2016 04:51 AM

HI,

i am trying to bind data to multi select list box in jquery

here is code:

 

  function GetPlotsbyReservation(district, industry,rsvr) {
        $.ajax({
            type: "POST",
            url: "kiadb.asmx/GetPlotsbyReservation",
            data: "{'District':'" + district + "','industry':'" + industry + "','rsvr':'" + rsvr + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError
        });

        function OnSuccess(data, status) {
            var myObject = JSON.parse(data.d);

            var len = myObject.length;
            var listItems = "";
        
            for (var i = 0; i < len; i++) {
                $('#ddlPlot').append('<option value="' + myObject[i].rsvr + '">' + myObject[i].rsvr + '</option>');
               
               
            }
       
        }

        function OnError(request, status, error) {
            alert(request.statusText);
        }
    }

 

 <asp:ListBox ID="ddlPlot" runat="server" SelectionMode="Multiple" ></asp:ListBox>

data is not binding to list box.can any one help me

Results 1 - 5 of 6 12
Posted on Dec 07, 2016 04:52 AM

Hi veenahosur,

Please refer the below link for your referece how to bind data to listbox in jquery.

Populate (Bind) ASP.Net ListBox using jQuery AJAX and JSON in C# and VB.Net


Posted on Dec 07, 2016 09:57 PM

 HI,

this what i am trying but i am not getting values in listbox

 [WebMethod]
        public List<industrialareadetails> GetPlotsbyReservation(String District, String industry, String rsvr)
        {
            industrialareadetails industrialareadetails = new industrialareadetails();
            List<industrialareadetails> plno = new List<industrialareadetails>();
            DataTable dt = industrialdetailsBL.GetPlotsbyReservation(District, industry,rsvr);
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                industrialareadetails.plno = dt.Rows[i]["plno"].ToString();
                plno.Add(industrialareadetails); 
            }
            return plno;
    
        }

 

  public class industrialareadetails
    {
         public string plno { get; set; }
    }

 

  function OnSuccess(data, status) {
            var lstPlot = $("[id*=ddlPlot]");
            lstPlot.empty();
            $.each(data.d, function () {
                lstPlot.append($("<option></option>").val(this['plno']).html(this['plno']));
            });
       
        }

        function OnError(request, status, error) {
            alert(request.statusText);
        }

 


Posted on Dec 08, 2016 02:03 AM Modified on on Dec 08, 2016 02:04 AM

Hi,

thank you .i am getting value but without bootstrap plugins 

this is code i am using to bind:

 

  [WebMethod]
        public List<industrialareadetails> GetPlotsbyReservation(String District, String industry, String rsvr)
        {
            DataTable dt = industrialdetailsBL.GetPlotsbyReservation(District, industry,rsvr);
            List<industrialareadetails> list = new List<industrialareadetails>();  // Employee should contain  EmployeeId, EmployeeName as properties

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                industrialareadetails industrialareadetails = new industrialareadetails();
                industrialareadetails.Value = dt.Rows[i]["plno"].ToString();
                industrialareadetails.Text = dt.Rows[i]["plno"].ToString();
                list.Add(industrialareadetails);
            }
            return list;
        }

  public class industrialareadetails
    {
         public string Value { get; set; }
        public string Text { get; set; }
    }

 

  function GetPlotsbyReservation(district, industry, rsvr) {

        alert(rsvr);
        $.ajax({
            type: "POST",
            url: "kiadb.asmx/GetPlotsbyReservation",
            data: "{'District':'" + district + "','industry':'" + industry + "','rsvr':'" + rsvr + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError
        });

        function OnSuccess(r) {
            var lstCustomers = $("[id*=ddlPlot]");
            lstCustomers.empty();
            $.each(r.d, function () {
                lstCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }

        function OnError(request, status, error) {
            alert(request.statusText);
        }
    }

plugin code:

 

   $(function () {
             $('[id*=ddlPlot]').multiselect({
                 includeSelectAllOption: true
                
             });
         });

 Please help me its urgent


Posted on Dec 08, 2016 02:30 AM

You need to reapply the multiselect plugin after binding the listbox.

function OnSuccess(r) {
     var lstCustomers = $("[id*=ddlPlot]");
     lstCustomers.empty();
     $.each(r.d, function () {
         lstCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
     });
     $('[id*=ddlPlot]').multiselect({
         includeSelectAllOption: true              
     });
}

 


Posted on Dec 08, 2016 09:47 PM

no still its not working