How to bind JSON data to dropdownlist in Asp.net MVC using jQuery

Question

I am trying to bind JSON Data to dropdown list

My Scenario is I want to get data and Bind to dynamic dropdown list,

In Seperate Class, I have used linq to get data like

    public SelectList getProjects()
    {
        IEnumerable<SelectListItem> projectslist = (from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        return new SelectList(projectslist, "Value", "Text", PROJ_ID);
    }

In Controller:

ViewBag.ProjectList=(from proj in res.PROJECTs where proj.IS_DELETED == "N" select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });

In View:

    @for (int i = 0; i <2; i++)
    {                                    {
   @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID, (SelectList)ViewBag.ProjectList, "-- Choose a Project --", new { @class = "ddlProjectvalue" })
    }

Now, I am trying for like if we have three dropdownlist, we select a list item in first dropdown list should not show in second dropdown list, and in third dropdown list should not show both previous selected list items for that i have writtern script like:

     <script>
    $(document).ready(function () {
        $('.ddlProjectvalue').change(function () {
            debugger;
            var selectedValue = $(this).val();
            if (selectedValue != null && selectedValue != '') {
                debugger;
                $.ajax({

                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: "/Employer/GetDDLData?selectedValue="+selectedValue,
                    data: "{}",
                    dataType: "Json",
                    success: function (data) {

                        // first remove the current options if any
                        $('.ddlProjectvalue').find('option').remove();

                        // next iterate thru your object adding each option to the drop down\    
                        $(data).each(function (index, item) { // GETTING ERROR HERE
                            debugger;

                            $('.ddlProjectvalue').append($('<option></option>').val(item.Value).html(item.Text));
                        });
                    },
                    error: function ajaxError(response) {
                    alert(response.status + ' ' + response.statusText);
                }
            });
        }
      });
    });
   </script>

and I am returning JSON Data from Controller:

    public ActionResult GetDDLData(string selectedValue)
    {
        int projectid = Convert.ToInt32(selectedValue);

        IEnumerable<SelectListItem> projectslist = (from proj in db.PROJECTs where proj.IS_DELETED == "N" && proj.ID != projectid select proj).AsEnumerable().Select(projt => new SelectListItem() { Text = projt.NAME, Value = projt.ID.ToString() });
        var result = new SelectList(projectslist, "Value", "Text", tm.PROJ_ID);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

I have tried, but getting Error like

      "Syntax error, Unrecognized Expression"

where I am Doing Wrong , please help me anyone.

Ni3 · Accepted Answer · 2014-04-08 06:20:25Z

13

This will help you :

$.ajax({
            url: "@Url.Action("GetDDLData","Employer")",
            data: {selectedValue:selectedValue},
            dataType: "json",
            type: "GET",
            error: function () {
                alert(" An error occurred.");
            },
            success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".ddlProjectvalue").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".ddlProjectvalue").append(optionhtml);
                });
            }
        });

answered Apr 8, 2014 at 6:20

Ni3

4893 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Sanjay Over a year ago

Thanks it was working fine, but small problem as it was dynamic ddl it was effecting three dropdown list, it should not like that! if we select first ddl should not show in second ddl dynamically , and vice versa for total dropdown list, any ideas?, please help me.

Ni3 Over a year ago

you should provide Id to each of the dropdownlist

Sanjay Over a year ago

How I can , if we have more than three or four ddls, can we pass id for all and apply our solution to all ddls? or is there any alternative solution for this problem?

Ni3 Over a year ago

lets try it @Html.DropDownListFor(m => m.GetTimeSheetDetails[i].PROJ_ID, (SelectList)ViewBag.ProjectList, "-- Choose a Project --", new { @class = "ddlProjectvalue",@id="dropdown_"+i })

Mir Gulam Sarwar Over a year ago

instead of class name you can use $(this)

|

sweta P. Patel · Accepted Answer · 2014-12-09 09:49:17Z

4

//Controller Code

public ActionResult getAccount()
         {
             var result = new SelectList(db.Partymsts, "Account", "Account");
             return Json(result, JsonRequestBehavior.AllowGet);
         }

// js code

 $.ajax({
                type: "POST",
                url: "/NewMaster/getAccount",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                var optionhtml1 = '<option value="' +
                 0 + '">' + "--Select State--" + '</option>';
                $(".cs3").append(optionhtml1);

                $.each(data, function (i) {

                    var optionhtml = '<option value="' +
                data[i].Value + '">' +data[i].Text + '</option>';
                    $(".cs3").append(optionhtml);
                });
            }
            });


// html code


<select id="cs3" name="cs3"   class="cs3 form-control input-small"> </select>




its working !!

answered Dec 9, 2014 at 9:49

sweta P. Patel

411 bronze badge

1 Comment

sweta P. Patel Over a year ago

this is the solution of getting empty result. in droupdown list binding. Hope it will help you.

Mir Gulam Sarwar · Accepted Answer · 2014-04-08 06:52:32Z

0

If your json is correct the below will work.Put the code in your ajax success

success:function(data){
 $('.ddlProjectvalue').empty();
 $.each(data,function (index, item) { 
    $('.ddlProjectvalue').append$('<option>', {
                                value: item.Value,
                                text: item.Text
                            }, '<option/>')
                            }
                        );
   }

edited Apr 8, 2014 at 6:52

answered Apr 8, 2014 at 6:20

Mir Gulam Sarwar

2,6482 gold badges27 silver badges39 bronze badges

7 Comments

Sanjay Over a year ago

No, getting Empty result, anyway thanks for solution , i have got in different approach.

Mir Gulam Sarwar Over a year ago

Answer was updated.It must work, if your json is correct.Tell us if there is an error.

Sanjay Over a year ago

No, it is getting EMpty Result

Mir Gulam Sarwar Over a year ago

Please,Can you show the returned Json? So that other people can get help from it.

Mir Gulam Sarwar Over a year ago

Of you are getting ID and Name as json, then use. Value:item.ID,text:item.Name

|

Devendra Patel · Accepted Answer · 2016-01-14 12:05:11Z

0

We have done in this way

Dropdown.append($('<option></option>').val(item.col1).text(item.col2));

answered Jan 14, 2016 at 12:05

Devendra Patel

3172 silver badges10 bronze badges

Comments

Dmitriy Fialkovskiy · Accepted Answer · 2018-12-23 10:04:34Z

0

function GetDropDownData(stateid) {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("getdist","Home")',
            data: {stateid:stateid},
            dataType: 'json',
            success: function(data)
            {
                $("#districtId").empty();
                $("#districtId").append('<option value="">--Select--</option>');
                $.each(data, function (id, result) {
                        $("#districtId").append('<option value"'+result.Value+'">'+result.Text+'</option>');
                    });
                },
                failure: function () {
                    $("#districtId").empty();
                    $("#districtId").append('<option value="">--Select--</option>');
                }
            });
    }

edited Dec 23, 2018 at 10:04

Dmitriy Fialkovskiy

3,2558 gold badges36 silver badges49 bronze badges

answered Dec 23, 2018 at 9:43

Meera

13 bronze badges

Collectives™ on Stack Overflow

How to bind JSON data to dropdownlist in Asp.net MVC using jQuery

5 Answers 5

13 Comments

1 Comment

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

13 Comments

1 Comment

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related