Question

在这里，我使用 blazor 服务器应用程序在更改国家/地区下拉列表中填充城市下拉列表。在这里我做了 CustomInputSelect 以避免错误 Microsoft.AspNetCore.Components.Forms.InputSelect1[System.Int32] 不支持类型 'System.Int32'`。

但问题是 onchange 事件不会触发，也不会命中 CountyClicked 方法，结果城市下拉列表不会根据国家/地区下拉列表的变化填充。

下面是我的带有自定义 inputselect

的 razor 组件 html

<EditForm Model="@PersonModel"  OnValidSubmit="postPerson">
         <CustomInputSelect @bind-Value="PersonModel.CountryId"  class="form-control"  @onchange="countyClicked">
            <option value="">Select country</option>
            @foreach (var item in Countries)
            {
                <option value="@item.CountryId">@item.CountryName</option>
            }
        </CustomInputSelect>
        <CustomInputSelect class="form-control mb-2 mr-sm-2" @bind-Value="PersonModel.CityId">
            @foreach (var city in Cities)
            {
                <option value="@city.CityId">@city.CityName</option>
            }
        </CustomInputSelect>
</EditForm>

下面是我的countryClicked方法

    public void countyClicked(ChangeEventArgs args)
    {
        var getCountryId = args.Value.ToString();
        int.TryParse(getCountryId, out int countryId);
        Cities = mainService.GetAllCityByCountryId(countryId);
    }

下面是我的 CustomInputSelect

    public class CustomInputSelect<TValue> : InputSelect<TValue>
{
    protected override bool TryParseValueFromString(string value, out TValue result,
        out string validationErrorMessage)
    {
        if (typeof(TValue) == typeof(int))
        {
            if (int.TryParse(value, out var resultInt))
            {
                result = (TValue)(object)resultInt;
                validationErrorMessage = null;
                return true;
            }
            else
            {
                result = default;
                validationErrorMessage =
                    $"The selected value {value} is not a valid number.";
                return false;
            }
        }
        else
        {
            return base.TryParseValueFromString(value, out result,
                out validationErrorMessage);
        }
    }
}

Answer 1

如果您深入研究 InputSelect 代码，您会发现 onchanged 在值更改时不会被调用。

您的问题的解决方案是设置您的模型属性以在设置时触发事件。然后您将 CountryChanged 连接到该事件。

    // Declare a delegate
    public delegate void SelectChanged(int value);

    class model
    {

        public int CountryId
        {
            get => _CountryId;
            set
            {
                _CountryId = value;
                CountryChanged.Invoke(value);
            }
        }

        private int _CountryId;

        public SelectChanged CountryChanged;
    }

在您的页面中连接事件

@implements IDisposable

   protected override void OnInitialized()
    {
        editcontext = new EditContext(mymodel);
        mymodel.CountryChanged += CountryChanged;
        base.OnInitialized();
    }

    public void Dispose()
    {
        mymodel.CountryChanged -= CountryChanged;
    }

根据您获得模型的方式，您可能需要对事件的连线和取消连线更感兴趣。

Blazor onchange 事件在 inputselect 中不起作用

1 个答案: