Значение Blazor InputText не go для формирования POST при заполнении в jQuery - PullRequest
Новая
       3

Значение Blazor InputText не go для формирования POST при заполнении в jQuery

0 голосов
/ 06 апреля 2020

Я использую карту Leaflet и у меня есть событие click в jQuery, которое получает широту и долготу выбранного местоположения и заполняет 2 текстовых поля в форме Blazor на стороне сервера.

Когда я нажимаю кнопку отправить, значения широты и долготы в модели равны нулю. Если бы я должен был ввести значение lat / lng в форму, через которую он проходит.

jQuery

var marker = {};

    function addMarker(e) {
        lat = e.latlng.lat;
        lng = e.latlng.lng;

        if (marker != undefined) {
            map.removeLayer(marker);
        };

        marker = L.marker([lat, lng]).addTo(map);

        $('#latitude').val(lat);
        $('#longitude').val(lng);
    }

Форма блейзора 

<EditForm Model="@ItemLocationModel">
                <input type="hidden" @bind-value="@ItemLocationModel.Id" />
                <div role="alert">Select the item you wish to trade from the list below.</div>
                <div class="form-group">
                    <label for="jjj">Item</label>
                    <select id="category" class="form-control" @bind="@ItemLocationModel.ItemId">
                        <option value="">-- Select Item --</option>
                        @if (Items == null)
                        {

                        }
                        else
                        {
                            @foreach (var cnt in Items)
                            {
                                <option value="@cnt.Id">@cnt.Name</option>
                            }
                        }

                    </select>
                    <ValidationMessage For="@(() => ItemLocationModel.ItemId)" />
                </div>

                <div class="form-group">
                    <div id="newformap" class="newformap map-home" style="height: 300px; width: 100%;"></div>
                </div>

                <div class="form-group">
                    <label for="latitude">Latitude</label>
                    <InputText id="latitude" class="form-control" @bind-Value="@ItemLocationModel.Latitude" />
                    <ValidationMessage For="@(() => ItemLocationModel.Latitude)" />
                </div>

                <div class="form-group">
                    <label for="longitude">Longitude</label>
                    <InputText id="longitude" class="form-control" @bind-Value="@ItemLocationModel.Longitude" />
                    <ValidationMessage For="@(() => ItemLocationModel.Longitude)" />
                </div>


                <button type="submit" class="btn btn-primary" @onclick="(() => HandleValidSubmit())">Submit</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </EditForm>

Метод HandleValidSubmit 

private async void HandleValidSubmit()
{
    if (ItemLocationModel.Id == 0)
    {
        // Add
        ForagingItemLocationObject.UserId = await localStorage.GetItemAsync<string>("userid");

        await Http.PostJsonAsync("api/item/addlocation", ItemLocationModel);
    }
    else
    {
        // Update
        ItemLocationModel.UserId = await localStorage.GetItemAsync<string>("userid");

        await Http.PostJsonAsync("api/item/updatelocation", ItemLocationModel);
    }

    await CloseTaskModal();
    DataChanged?.Invoke();
}

1 Ответ

0 голосов
/ 07 апреля 2020

Изменение входного значения, которое «контролируется» блейзором с использованием javascript, не рекомендуется. Если вам действительно нужно изменить значение ввода, вам следует вызвать метод в вашем компоненте блейзора, который обновит это значение.

Вы должны сделать что-то вроде 

DotNet.invokeMethodAsync('UpdateLatitudeValue', lat);

Где у вас есть 

public void UpdateMessageValue(string lat){
   @ItemLocationModel.Latitude = lat;
}

Вы также можете передать объект для географических местоположений или чего угодно, но вы должны вызвать. NET методы из JavaScript функции , чтобы обновить значение с входа.

...