时间戳

首页 > 解决方案 > 在 jQuery 中填充时，Blazor InputText 值不会形成 POST

jquery - 在 jQuery 中填充时，Blazor InputText 值不会形成 POST

问题描述

我正在使用 Leaflet 地图并在 jQuery 中有一个单击事件，该事件获取单击位置的纬度和经度，并以 Blazor 服务器端表单填充 2 个文本框。

当我单击提交时，模型中的纬度和经度值为空。如果我要将 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();
}

标签： jqueryblazorblazor-server-side

解决方案

不建议使用 javascript 更改由 blazor “控制”的输入值。如果您确实需要更改输入的值，则应在 blazor 组件中调用一个方法来更新该值。

你应该做类似的事情

DotNet.invokeMethodAsync('UpdateLatitudeValue', lat);

你在哪里

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

您还可以为地理位置或任何您想要的对象传递一个对象，但您应该从 JavaScript 函数调用 .NET 方法来更新来自输入的值。

推荐阅读