Load select list dynamically from controller using getJSON MVC4 C#/Jquery

Question

I am quite new to MVC and Jquery and I am trying to dynamically load data from a database to populate a dropdown list. Although the data is returned from the controller, it is not displayed in the dropdown. What is wrong here?

Here is my controller code:

public JsonResult GetReasonforLeave(int typecode)
        {
List<LeaveReason> reason_list = itlbg1.LeaveReasons.Where(f => f.LeaveType_typeCode == typecode).ToList(); 
return Json(reason_list, JsonRequestBehavior.AllowGet);

        }

Here's the jquery:

function getreason(selecteditem) {

        sel_val = selecteditem.value;

        $.getJSON("/Leave/GetReasonforLeave", { typecode: sel_val })
            .done(function (data) {
            var options = $("#reason");
            $.each(data, function (item) {

                options.append($("<option />").val(item.reasonID).text(item.description));
            });


        });
    }

Also, unless LeaveReason contains only 2 properties (reasonID and description) you are sending unnecessary data across the wire - consider sending just the 2 properties you need - var data = itlbg1.LeaveReasons.Where(f => f.LeaveType_typeCode == typecode).Select(r => new { value = r.reasonID, text = description }); — user3559349
– user3559349, Commented Jun 22, 2015 at 3:45
Thanks for that improvement on the controller, I tried it but alert(data); did not return any data. What is meant here by the index variable? — toing_toing
– toing_toing, Commented Jun 22, 2015 at 3:46
Refer documentation - the callback expects 2 arguments, Integer indexInArray and Object value — user3559349
– user3559349, Commented Jun 22, 2015 at 3:49
Thank you for the informative response Stephen. I'll try to figure the error. — toing_toing
– toing_toing, Commented Jun 22, 2015 at 3:57

toing_toing · Accepted Answer · 2015-06-22 04:31:08Z

1

Did the changes Stephen requested and it worked. Here's the working code FYI. Thanks Stephen. Jquery:

function getreason(selecteditem) {

        sel_val = selecteditem.value;

        $.getJSON("/Leave/GetReasonforLeave", { typecode: sel_val })
            .done(function (data) {
            alert(data);
            var options = $("#reason_dd");
            options.empty();
            $.each(data, function (index, item) {

                options.append($("<option />").val(item.value).text(item.text));

            });


        });
    }

Changed controller to:

public JsonResult GetReasonforLeave(int typecode)
        {

            var reason_list = itlbg1.LeaveReasons.Where(f => f.LeaveType_typeCode == typecode).Select(r => new { value = r.reasonID, text = r.description }); 
            return Json(reason_list, JsonRequestBehavior.AllowGet);

        }

edited Jun 22, 2015 at 4:31

answered Jun 22, 2015 at 4:12

toing_toing

2,4622 gold badges45 silver badges84 bronze badges

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

4 Comments

user3559349 Over a year ago

You probably also want to include options.empty() to remove any existing options before you populate the new ones.

toing_toing Over a year ago

Updated the answer. You guys are just awesome.

user3559349 Over a year ago

Actually you have it wrong - your clearing the options in each iteration - options.empty(); needs to go before the $.each() statement :)

toing_toing Over a year ago

Yes. I was wondering why only the first option was loading. All fixed now :)

Collectives™ on Stack Overflow

Load select list dynamically from controller using getJSON MVC4 C#/Jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related