asp.net-mvcasp.net-coreselecttagshelper

Get data on change event of select Tag helper


I have a project in .Net core MVC Razor . I am using select tag helper for drop down list. I need to get some value from database & display it in text box based on selection of select value in dropdown box. How can I achieve this? I need to remain in same page after value selected and continue with same form. Please find my Razor code :

  <div class="form-group row">
                                <label asp-for="@Model.addAppointmentInQueue.Doctor" class="col-md-3 col-form-label-lg"></label>
                                <div class="col-md-9">
                                     <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                   <select id="lstdoctor" asp-for="@Model.addAppointmentInQueue.Doctor"
                                   asp-items="@Model.addAppointmentInQueue.doctorList"  
                                   new { onchange = "return ToggleViewItems();" }
                                   class="form-control form-control-lg selectpicker">
                                     <option>Please select Doctor</option>
                                    </select>
                                </div>
                                 </div>
                            </div>
  <div class="col-md-6">
                <div class="form-group row">
                      <label asp-for="@Model.addAppointmentInQueue.consultationCharges" class="col-md-3 col-form-label-lg"></label>                  
                    <div class="col-md-9">
                        <div class="input-group">
                             <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input asp-for="@Model.addAppointmentInQueue.consultationCharges" class="form-control" type="text"  >
                        </div>
                    </div>
                </div>
                </div>

Solution

  • If you can already return some string from GetConsultationChagesForDoctor?doctor= ,the below code works
    Made some change on select and input

    <select id="lstdoctor" asp-for="@Model.addAppointmentInQueue.Doctor"
                        asp-items="@Model.addAppointmentInQueue.doctorList" onchange="myFunction(this.options[this.selectedIndex].value)"
                        class="form-control form-control-lg selectpicker">
                    <option>Please select Doctor</option>
                </select>
    
    <input id="textbox1"  asp-for="@Model.addAppointmentInQueue.consultationCharges" class="form-control" type="text">
    
    <script>
        function myFunction(chosen) {
            $.ajax("/GetConsultationChagesForDoctor?doctor=" + chosen, {
                type: 'GET', 
                success: function (data) {
                    $('#textbox1').val(data);
                },
            });
        }
    </script>