我正在研究Blazor Wasm。我想创建自己的自定义select
组件。以下实现有效,但缺少一些内容:在我的自定义选择组件中选择了某些内容时,没有回调。我希望能够从我的TestView.razor组件捕获事件。
我的自定义实现InputSelectCustom.cs
public class InputSelectCustom<T> : InputSelect<T>
{
protected override string FormatValueAsString(T value)
{
// Custom code ommitted for clarity
return base.FormatValueAsString(value);
}
protected override bool TryParseValueFromString(string value, out T result, out string validationErrorMessage)
{
if (typeof(T) == typeof(int) ||
typeof(T) == typeof(int?))
{
if (int.TryParse(value, out var resultInt))
{
result = (T)(object)resultInt;
validationErrorMessage = null;
return true;
}
else
{
result = default;
validationErrorMessage = "The chosen value is not valid.";
return false;
}
}
else
if (typeof(T).IsEnum)
{
if (CustomFunctions.EnumTryParse<T>(value, out var resultEnum))
{
result = (T)(object)resultEnum;
validationErrorMessage = null;
return true;
}
else
{
result = default;
validationErrorMessage = "The chosen value is not valid.";
return false;
}
}
else
if (typeof(T).IsNullableEnum())
{
if (CustomFunctions.NullableEnumTryParse<T>(value, out var resultEnum))
{
result = (T)(object)resultEnum;
validationErrorMessage = null;
return true;
}
else
{
result = default;
validationErrorMessage = "The chosen value is not valid.";
return false;
}
}
else
{
return base.TryParseValueFromString(value, out result, out validationErrorMessage);
}
}
protected override Task OnParametersSetAsync()
{
return base.OnParametersSetAsync();
}
}
我的TestView.razor
@page "/test-view"
<EditForm Model="CurrentFilterModel">
<InputSelectCustom @bind-Value="@CurrentFilterModel.ClassmentFilter">
<option value="null"> Show all content </option>
<option value="@EnumClassment.Popular"> Popular </option>
<option value="@EnumClassment.Featured"> Featured </option>
<option value="@EnumClassment.Novelty"> Novelty </option>
</InputSelectCustom>
</EditForm>
@code
{
public FilterModel CurrentFilterModel = new FilterModel();
public class FilterModel
{
public EnumClassment? ClassmentFilter { get; set; }
}
}
我的枚举:
public enum EnumClassment
{
Featured,
Popular,
Novelty
}
UPDATE
所以,我需要的是一种方法,只要我选择的值发生更改,便会得到通知。
起初,我尝试过:
<InputSelectCustom @bind-Value="CurrentFilterModel.ClassmentFilter">
<option value=""> Show all content </option>
<option value="@EnumClassment.Popular"> Popular </option>
<option value="@EnumClassment.Featured"> Featured </option>
<option value="@EnumClassment.Novelty"> Novelty </option>
</InputSelectCustom>
选择的值已正确更改,但是使用上面的代码,我无法通知值更改。根据信息,需要通知我,因为无论何时用户更改选择,我都希望立即执行服务器端调用以过滤数据。
所以这是我的第二次尝试:
<InputSelectCustom @bind-Value="CurrentFilterModel.ClassmentFilter" ValueChanged="ValueChangedForClassmentFilter">
<option value=""> Show all content </option>
<option value="@EnumClassment.Popular"> Popular </option>
<option value="@EnumClassment.Featured"> Featured </option>
<option value="@EnumClassment.Novelty"> Novelty </option>
</InputSelectCustom>
如您所见,我不能同时使用@bind-Value
和ValueChanged
。
所以这是我的最终解决方案:
<InputSelectCustom Value="@CurrentFilterModel.ClassmentFilter" ValueExpression="@( () => CurrentFilterModel.ClassmentFilter )" ValueChanged="@( (EnumClassment? s) => ValueChangedForClassmentFilter(s) )">
<option value=""> Show all content </option>
<option value="@EnumClassment.Popular"> Popular </option>
<option value="@EnumClassment.Featured"> Featured </option>
<option value="@EnumClassment.Novelty"> Novelty </option>
</InputSelectCustom>
protected async Task ValueChangedForClassmentFilter(EnumClassment? theUserInput)
{
// You have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
// For the validation to work you must now also define the ValueExpression because @bind-Value did it for you
CurrentFilterModel.ClassmentFilter = theUserInput;
// Refresh data based on filters
await FilterCoursesServerSide();
}
这次,一切都按预期进行:每当用户选择另一个值时,都会收到新值的通知,我可以立即执行自定义代码。
[如果我错了,或者因为我是Blazor的新手,也许错过了一些东西,所以可以更优雅的方式进行纠正,请纠正我。
PS:使用字符串,整数和枚举进行测试。
您不能那样做,也不应该那样做。做什么的 ?但是,您可以像使用单选按钮一样执行此操作,但是自定义组件应从InputBase派生,并提供Razor标记和逻辑。
在我的自定义选择组件中选择某些内容时,没有回调。
当然会有一个回呼...否则如何用新值更新您的模型。它是从InputBase组件的CurrentValue属性触发的:
protected TValue CurrentValue
{
get => Value;
set
{
var hasChanged = !EqualityComparer<TValue>.Default.Equals(value,
Value);
if (hasChanged)
{
Value = value;
_ = ValueChanged.InvokeAsync(value);
EditContext.NotifyFieldChanged(FieldIdentifier);
}
}
}
这是更新模型的代码:
_ = ValueChanged.InvokeAsync(value);
以下是您的自定义选择组件的代码。请注意,InputSelect不支持数字类型,例如int(您不能将其应用于int属性,例如public int Country { get; set; }
。也许(不确定,需要检查...)。枚举类型。我的组件也支持这样的值:
InputSelectNumber.cs
public class InputSelectNumber<T> : InputSelect<T>
{
protected override bool TryParseValueFromString(string value, out T
result, out string validationErrorMessage)
{
if (typeof(T) == typeof(int))
{
if (int.TryParse(value, out var resultInt))
{
result = (T)(object)resultInt;
validationErrorMessage = null;
return true;
}
else
{
result = default;
validationErrorMessage = "The chosen value is not a valid
number.";
return false;
}
}
else
{
return base.TryParseValueFromString(value, out result, out
validationErrorMessage);
}
}
}
<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />
<div class="form-group">
<label for="name">Enter your Name: </label>
<InputText Id="name" Class="form-control" @bind-Value="@comment.Name">
</InputText>
<ValidationMessage For="@(() => comment.Name)" />
</div>
<div class="form-group">
<label for="body">Select your country: </label>
<InputSelectNumber @bind-Value="@comment.Country">
<option value="">Select country...</option>
<option value="1">USA</option>
<option value="2">Britain</option>
<option value="3">Germany</option>
<option value="4">Israel</option>
</InputSelectNumber>
<label for="body">Select your country: </label>
<ValidationMessage For="@(() => comment.Country)" />
</div>
<p>
<button type="submit">Submit</button>
</p>
</EditForm>
<p>Name: @comment.Name</p>
<p>Country: @comment.Country</p>
@code
{
private EditContext EditContext;
private Comment comment = new Comment();
protected override void OnInitialized()
{
EditContext = new EditContext(comment);
}
public class Comment
{
public string Name { get; set; }
// Note that with the subclassed InputSelectNumber I can use either string
// or int. In both cases no error occurs.
public string Country { get; set; }
//public int Country { get; set; }
}
}
每个请求的更新:
[如果我错了,或者因为我是Blazor的新手,也许错过了一些东西,所以可以更优雅的方式进行纠正,请纠正我。
您的代码很好,这就是您应该这样做的方式。 See my answer here使用InputSelect组件执行完全相同的操作。由于您的自定义组件是从InputSelect组件派生的,因此这是最好,最优雅的方法。也许是唯一的方法。
[您对Blazor的了解如何?;)您的知识超过了此处大多数用户的知识(我是指那些在这里永久回答问题的人。)>
但是,从表面上看,我建议阅读要实现的目标,您的方向是错误的。您无需知道select组件的值何时更改了您的操作方式...
相反,您应该为EditContext对象公开的OnFieldChanged事件实现一个事件处理程序,在其中您可以访问通过事件args传递的新值,操纵数据等,甚至可以验证EditContext对象...
一些指导您的代码:
private EditContext EditContext; private Comment Model = new Comment(); protected override void OnInitialized() { EditContext = new EditContext(Model); EditContext.OnFieldChanged += EditContext_OnFieldChanged; base.OnInitialized(); } // Note: The OnFieldChanged event is raised for each field in the model private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e) { Console.WriteLine(e.FieldIdentifier.FieldName); // more code... }
希望这有帮助...