Issue with setting value to select dropdown in MVC

Question

I am using MVC.

I am having two drop down and one change of 'primaryspec' the 'primarysubspec' should get loaded.

Everything is working fine for passing values to controller and it got saved to DB.

When I am trying to retrieve the saved details,'primarysubspec' saved values are not getting displayed.

But displaying save data for 'primarySpec'.

Here is my .cshtml code:

 @Html.DropDownListFor(m => m.PSpec, Model.PSpec, new { id = "ddUserSpec", style = "width:245px;height:25px;",  data_bind = "event: {change: primaryChanged}" }, Model.IsReadOnly)


  @Html.DropDownListFor(m => m.PSubspec, Model.PSubspec, new { id = "ddUserSubSpec", style = "width:245px;height:25px;",  data_bind = "options: primarySubSpec,optionsText: 'Name',optionsValue: 'Id'" }, Model.IsReadOnly)

Here is my JS Code to retrieve the values for :

this.primarySubSpec = ko.observableArray([]);

    this.primarySpecChanged = function () {

      var val = $("#ddetailsPrimarySpec").val();
      primarySubStartIndex = 0;
      primarySubSpecialityUrl = '/PlatformUser/GetSpecandSubSpec?primarySpe=' + val+//model.primarySpecID() +'&secondarySpec=';
            loadPrimarySubSpec();
        };

function loadPrimarySubSpec() {

        $.ajax({
            type: 'GET',
            url: primarySubSpecUrl,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            processdata: false,
            cache: false,
            success: function (data) {

                primarySubSpec = [];
                model.primarySubspec('0');
                try {
                   if (data.length == 0) {
                    primarySubSpeacId.empty();
                }
                model.primarySubSpec(data);
            },
            error: function (request, status, error) {
                primarySubSpeacId.prop("disabled", true);

            }

        });
    }

Everything is working fine,but facing issue only while displaying the saved values from the DB.

Showing fine for 'primarySpec' The values showing empty for 'PrimarySubSpec' instead of saved values in dropdown.

Please let me know what is the issue how can i show the saved value as selected value in 'primarySubSpec'dropdown.

Answer 1

The Problem: when you load the page to view saved values, the change event is never called.

Why: When your page is loaded with saved values, the select box has the saved value selected before knockout knows anything about it. Hens the change event isn't called.

Simplest solution: change the primarySpecilaityChanged as follows

this.primarySpecilaityChanged = function () {
  var val = $("#ddUserDetailsPrimarySpeciality").val();
  if(val){
    primarySubStartIndex = 0;
    primarySubSpecialityUrl = '/' + NMCApp.getVirtualDirectoryName() + '/PlatformUser/GetSpecialitiesandSubSpecilaities?primarySpeciality=' + val+//model.primarySpecialityUID() +'&secondarySpeciality=';
    loadPrimarySubSpecilaities();
  }
};

then call primarySpecilaityChanged function after you call ko.applyBindings.

var viewModel = new YourViewModel();
ko.applyBindings(viewModel);
viewModel.primarySpecilaityChanged();