Blazor onchange 事件在 inputselect 中不起作用答案

【问题标题】：Blazor onchange event not working in inputselectBlazor onchange 事件在 inputselect 中不起作用
【发布时间】：2021-02-03 10:15:55
【问题描述】：

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

但问题是 onchange 事件不会触发，也不会触发countyClicked 方法，因此城市下拉菜单不会根据国家下拉菜单的变化来填充。

下面是我的带有自定义输入选择的剃须刀组件 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>

下面是我的countyClicked方法

    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);
        }
    }
}

【问题讨论】：

升级到 Net5.0... InputSelect 支持 int 和 enum 类型...

标签： c# asp.net-core entity-framework-core blazor blazor-server-side

【解决方案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;
    }

根据您获得模型的方式，您可能需要对事件的接线和取消接线有更多了解。

【讨论】：