Populating MVC 5 View ComboBox using Javascript based on another ComboBox selection

Question

I'm working on an ASP.NET Core MVC web project and I want to populate values of ComboBox B (Churches) based on selection of ComboBox A (Stations) using JavaScript (Json). I have tried to research with no success. Here are my codes:

MVC View Code:

 <div class="form-group">
                <label asp-for="RSTATIONID" class="col-sm-4 control-label">Station:</label>
                <div id="station" class="col-sm-8">
                    <select asp-for="RSTATIONID" class="form-control" asp-items="ViewBag.RSTATIONID"
                            onchange="LoadChurches(this)"></select>
                    <span asp-validation-for="RSTATIONID" class="text-danger" />
                </div>
            </div>
            <div class="form-group">
                <label asp-for="RCHURCHID" class="col-sm-4 control-label">Church:</label>
                <div id="church" class="col-sm-8">
                    <select asp-for="RCHURCHID" class="form-control" asp-items="ViewBag.RCHURCHID"></select>
                    <span asp-validation-for="RCHURCHID" class="text-danger" />
                </div>
            </div>

JavaScript Code:

function LoadChurches(e) {
    var stationID = e.value;
    //alert(stationID);
    $.ajax
   ({
       url: '/CaptureReceipts/LoadChurches',
       type: 'POST',
       datatype: 'application/json',
       contentType: 'application/json',
       data: JSON.stringify({
           stationID: +stationID
       }),
       success: function (result) {
           var res = result.value;
           alert(JSON.stringify(res));
           /*$("#church").html("");
           $.each($.parseJSON(result), function (i, church) {
               SetSel(this);
           }); */
       },
       error: function () {
           alert("Churches can not load"); 
       } 
   });
}

Controller Code:

 public JsonResult LoadChurches(string statID)
    {
        int stationID = Convert.ToInt32(statID);
        var churches = new SelectList(_context.v_Church.Where(m => m.StationID == stationID), "ID", "churchName");                    
        return Json(ViewData);
    }

The Controller name is CaptureReceiptsController. Please help me know what may be wrong.

Do you get any error in application? Or check the browser's inspect window, in the console tab if there is any error. If there is, then add it to your question. — Dhanashree
– Dhanashree, Commented Mar 27, 2017 at 14:24
No, I wasn't getting any errors. But the churches were not being loaded. — Kangola
– Kangola, Commented Mar 28, 2017 at 5:24
Because you are loading churches in 'churches' variable but you are not returning it. instead you are returning ViewData --> return Json(ViewData) — Dhanashree
– Dhanashree, Commented Mar 28, 2017 at 7:38

Denis Krasakov · Accepted Answer · 2017-03-27 13:44:10Z

1

In controller return simple json array:

var churches = _context.v_Church
                  .Where(m => m.StationID == stationID)
                  .Select(x => new {id = x.ID, name = x.churchName })
                  .ToArray();
return JSON(churches);

In success callback:

success: function (data) {
    var churchSelect = $("#church > select")
    churchSelect.html(""); //clear select
    for (var i =0;i<data.length;i++){
        var opt = document.createElement('option');
        opt.innerHTML = data[i].name;
        opt.value = data[i].id;
        churchSelect.append(opt);
    }
}

answered Mar 27, 2017 at 13:44

Denis Krasakov

1,5882 gold badges13 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Populating MVC 5 View ComboBox using Javascript based on another ComboBox selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related