Cascading Dropdown Text Does Not Change On Change Of Another Dropdown In Blazor Server

  asp.net-core, blazor, c#, javascript, jquery

Here I have blazor server app, I have two <select> cascading dropdown where on change of <select class="form-control classId select2" @bind="chapterModel.SchClassId"> dropdown I want list of subject based on selected <select class="form-control classId select2" @bind="chapterModel.SchClassId"> dropdown in another dropdown<select class="form-control subject select2" @bind="chapterModel.subjectId">.

Since I am using select2 dropdown I have Js onchangefunction for dropdown <select class="form-control classId select2" @bind="chapterModel.SchClassId">.And in onchange function I have called C# function UpdateClassIdModelForCreateEditChapter and passed the selected dropdown value to UpdateClassIdModelForCreateEditChapter and obtained the desired subject list based on selected dropdown value.

Now, the problem is that I have list of subject based on class dropdown but there is no change in subject dropdown.

My two dropdown

                           <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="rolename">Class</label>
                                    <select class="form-control classId select2" @bind="chapterModel.SchClassId">
                                        <option value="">Select class</option>
                                        @foreach (var item in schoolClasses)
                                        {
                                            <option value="@item.SchoolClassId">@item.ClassName</option>
                                        }
                                    </select>
                                    <ValidationMessage [email protected](() => chapterModel.SchClassId) />
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="rolename">Subject</label>
                                    <select class="form-control subject select2" @bind="chapterModel.subjectId">
                                        <option value="">Select subject</option>
                                        @foreach (var item in subjectList)
                                        {
                                            <option value="@item.SubjectId">@item.SubjectName</option>
                                        }
                                    </select>
                                    <ValidationMessage [email protected](() => chapterModel.subjectId) />
                                </div>
                            </div>

My js function

function AddSelect2ForClassIdInCreateEditChapter() {
debugger;
$('select.form-control.classId.select2').select2({
    //placeholder: "Select",
    allowClear: true
}).on('select2:unselecting', function () {
    $(this).data('unselecting', true);
}).on('select2:opening', function (e) {
    if ($(this).data('unselecting')) {
        $(this).removeData('unselecting');
        e.preventDefault();
    }
}).on('change select.form-control.classId.select2', function (e) {
    debugger;
    var selectedVal = e.target.value;
    DotNet.invokeMethodAsync('eLearning', 'UpdateClassIdModelForCreateEditChapter', selectedVal);
});;

}

My c# function

  private static Action<string> chapterClassIdCreateEditAction;

  [JSInvokable]
    public static void UpdateClassIdModelForCreateEditChapter(string value)
    {
        chapterClassIdCreateEditAction.Invoke(value);
    }

   protected override void OnInitialized()
    {  
        chapterClassIdCreateEditAction = UpdateModelDataClassIdForCreateEditChapter;
        base.OnInitialized();
    }

    private void UpdateModelDataClassIdForCreateEditChapter(string value)
    {
        chapterModel.SchClassId = value;
        var classID = Convert.ToInt32(value);
        subjectList = mainService.GetSubjectByClassId(classID);// here i got the subject list based on classid but it doesnot appears on subject dropdown as I make change in class dropdown
        StateHasChanged();
    }

Source: Ask Javascript Questions

LEAVE A COMMENT