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

Last Reply one year ago By dharmendr

Posted one year ago

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

Posted one year ago Modified on 9 months ago

Hi veenahosur,

Refer the below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" />
    <script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        $(function () {
            var district = '', industry = '', rsvr = '';
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetPlotsbyReservation",
                data: "{'District':'" + district + "','industry':'" + industry + "','rsvr':'" + rsvr + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var lstindustrialareadetails = $("[id*=ddlPlot]");
                    lstindustrialareadetails.empty();
                    $.each(r.d, function () {
                        lstindustrialareadetails.append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                    $('[id*=ddlPlot]').multiselect({ includeSelectAllOption: true });
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListBox ID="ddlPlot" runat="server" SelectionMode="Multiple"></asp:ListBox>
    </form>
</body>
</html>

Code

[WebMethod]
public static List<industrialareadetails> GetPlotsbyReservation(string District, string industry, string rsvr)
{
    string query = "SELECT TOP 5 CustomerId,Name FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<industrialareadetails> industrialareadetails = new List<industrialareadetails>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    industrialareadetails.Add(new industrialareadetails { Value = sdr["CustomerId"].ToString(), Text = sdr["Name"].ToString() });
                }
            }
            con.Close();
            return industrialareadetails;
        }
    }
}

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

Screenshot