Блог

Я новичок в Blazor. Я написал приложение Blazor со скрытыми полями. Javascript обновляет эти скрытые поля во время выполнения, но проблема в том, что Blazor не может получить эти изменения. Я могу увидеть изменения, если я проверю HTML-страницу.

Эти переменные имеют значение null, вместо того, чтобы получать значения из скрытых полей :

@RegisterModel.route @RegisterModel.suburb @RegisterModel.city @RegisterModel.province @RegisterModel.country @RegisterModel.PostalCode

Пожалуйста, посмотрите мой код ниже :

Страница при загрузке

 protected async override Task OnAfterRenderAsync(bool firstRender)
    { 
        //for autocomplete location
        await JSRuntime.InvokeAsync<object>("fetchLocation"); 
    }
  

Разметка

 <EditForm Model="@RegisterModel">
     
    <div class="grey-bg">

        <input id="hfRoute" type="hidden" @bind-value="@RegisterModel.route" />
        <input id="hfSuburb" type="hidden" @bind-value="@RegisterModel.suburb" />
        <input id="hfCity" type="hidden" @bind-value="@RegisterModel.city" />
        <input id="hfProvince" type="hidden" @bind-value="@RegisterModel.province" />
        <input id="hfCountry" type="hidden" @bind-value="@RegisterModel.country" />
        <input id="hfPostalCode" type="hidden" @bind-value="@RegisterModel.postalCode" />

    </div>

</EditForm>
  

Javascript /Jquery

 function fetchLocation() {

            var options = {
                types: ['(cities)'],
                componentRestrictions: { country: "za" }
            };

            var places = new google.maps.places.SearchBox(document.getElementById('aaaaa'), options);
            var places2 = new google.maps.places.SearchBox(document.getElementById('bbbbb'), options);

            google.maps.event.addListener(places, 'places_changed', function () {

                var place = places.getPlaces()[0];

                var components = parseGoogleResponse(place.address_components);

                var field_exists = "";

                for (var x = 0; x < place.address_components.length; x  ) {
                    field_exists  = field_exists   place.address_components[x].types[0]   " , ";
                }

                $("#hfStreetNumber").val("");
                $("#hfRoute").val("");
                $("#hfSuburb").val("");
                $("#hfCity").val("");
                $("#hfProvince").val("");
                $("#hfCountry").val("");
                $("#hfPostalCode").val("");

                if (field_exists.match('street_number')) { $("#hfStreetNumber").val(components.route.long_name); }
                if (field_exists.match('route')) { $("#hfRoute").val(components.route.long_name); }
                if (field_exists.match('sublocality_level_1')) { $("#hfSuburb").val(components.sublocality_level_1.long_name); }
                if (field_exists.match('locality')) { $("#hfCity").val(components.locality.long_name); }
                if (field_exists.match('administrative_area_level_1')) { $("#hfProvince").val(components.administrative_area_level_1.long_name); }
                if (field_exists.match('country')) { $("#hfCountry").val(components.country.long_name); }
                if (field_exists.match('postal_code')) { $("#hfPostalCode").val(components.postal_code.long_name); }
            });
}
  

В чем может быть проблема?

Я исправил проблему, вызвав логику ниже. Эта логика информирует Blazor о новых изменениях в этом элементе управления.

 //update control (mySuburb), then call the logic below 
var el = document.getElementById("mySuburb"); el.value =document.getElementById("mySuburb").value; el.dispatchEvent(new Event('change'));