CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvccombobox
Kangola
Kangola

Reputation: 3

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

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.

Upvotes: 0

Views: 1023

Answers (1)

Denis Krasakov
Denis Krasakov

Reputation: 1568

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);
    }
}

Upvotes: 1

Related Questions