英文:
Change variable value on input key press on MudBlazor's MudTextField
问题
我熟悉C#/asp.net mvc(10+年),但是对Blazor(10天)还不熟悉。
现在我想为MudBlazor的TextField添加一个"按下输入键更改变量值"的效果。
感谢这里的信息https://stackoverflow.com/questions/58222480/change-variable-value-on-input-key-press-on-blazor,处理普通的输入或文本区域相当容易。请看我的代码:
<MudGrid>
<MudItem lg="6">
<MudInputLabel Style="z-index: 99;">@_localizer["Script"]</MudInputLabel>
<textarea @bind="Script" @bind:event="oninput" cols="25" rows="10">@Script</textarea>
</MudItem>
<MudItem lg="6">
<MudTextField T="string"
Label="@_localizer["New data sources identified from current script"]"
Variant="Variant.Outlined" ReadOnly="true"
Text="@DataSourceIdsTextFromScript" Lines="10"/>
</MudItem>
</MudGrid>
当区域(Script)的值通过@bind:event="oninput"更新时,CalculateDataSourceIdsTextFromScript()将更新DataSourceIdsTextFromScript的值,第二个MudTextField中的文本将反映出这个变化。
public string Script
{
get => _script;
set
{
_script = value;
CalculateDataSourceIdsTextFromScript();
}
}
但是当我尝试使用MudTextField而不是textarea时,bind-value / bind-text / OnInternalInputChanged不能完成相同的工作。
另一方面,@bind:event="oninput"不能应用于MudTextField。我认为这是因为MudTextField不是input/textarea,而是它们的包装。
所以,有没有办法做到这一点?
谢谢任何答案或提示。
英文:
I'm familiar with C#/asp.net mvc (10+ years) but new with Blazor (10days).
Now I want to add a "Change variable value on input key press" effect to MudBlazor's TextField.
Thanks for information here https://stackoverflow.com/questions/58222480/change-variable-value-on-input-key-press-on-blazor, it's quite easy to deal with a normal input or textarea. Please see my code here:
<MudGrid>
<MudItem lg="6">
<MudInputLabel Style="z-index: 99;">@_localizer["Script"]</MudInputLabel>
<textarea @bind="Script" @bind:event="oninput" cols="25" rows="10">@Script</textarea>
</MudItem>
<MudItem lg="6">
<MudTextField T="string"
Label="@_localizer["New data sources identified from current script"]"
Variant="Variant.Outlined" ReadOnly="true"
Text="@DataSourceIdsTextFromScript" Lines="10"/>
</MudItem>
</MudGrid>
When the value of the area (Script) is updated by @bind:event="oninput", CalculateDataSourceIdsTextFromScript() will update the value of DataSourceIdsTextFromScript, and the text in the second MudTextField will reflect the change.
public string Script
{
get => _script;
set
{
_script = value;
CalculateDataSourceIdsTextFromScript();
}
}
But when I tried to use a MudTextField instead of the textarea, bind-value / bind-text / OnInternalInputChanged could not do the same work.
@* <MudTextField T="string" Label="@_localizer["Script"]" bind-Value="Script" *@
@* OnInternalInputChanged="CalculateDataSourceIdsTextFromScript" *@
@* Variant="Variant.Outlined" Text="@Script" Lines="10"/> *@
On the other hand, @bind:event="oninput" cannot be applied to a MudTextField. I think it's because MudTextField is not the input/textarea but a shell around it.
So, is there a way to do that?
Thanks for any answers or tips.
答案1
得分: 1
我找到答案了:https://www.mudblazor.com/components/textfield#immediate-vs-debounced。
"Immediate"="true" 是解决方法。
同一页面上还可以找到其他用法,例如https://www.mudblazor.com/components/textfield#counter。这与我的情况相同。
谢谢大家。
英文:
Incidentally, I found the answer here: https://www.mudblazor.com/components/textfield#immediate-vs-debounced.
Immediate="true" does the trick.
Some other usages can be found from the same page. Such as https://www.mudblazor.com/components/textfield#counter. It is just the same as my scenario.
Thanks everyone.
答案2
得分: 0
使用属性的setter是一个完全有效的选项,但Blazor本质上是异步的。使用属性的setter将您与同步世界绑定在一起。
您可以使用与标准的InputBase
中使用的@bind-value:after
相同的模式来实现异步行为,示例如下:
@page "/"
<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Hello, MudTextField!</MudText>
<MudTextField T="string" Text="@_value" TextChanged="this.SetValueAsync" Immediate="true"/>
<MudText Class="mt-8">Value: @_value</MudText>
<MudText Class="mt-8">Result: @_result</MudText>
@code {
private string? _value;
private string? _result;
private async Task SetValueAsync(string? value)
{
_value = value;
await AfterSetValueAsync();
}
private async Task AfterSetValueAsync()
{
// 模拟异步行为
await Task.Yield();
_result = $"在 {DateTime.Now.ToLongTimeString()} 设置";
}
}
英文:
While using a setter in a property is a perfectly valid option, Blazor is inherently asynchronous. Using a property setter ties you to the synchronous world.
You can implement async behaviour using the same pattern as used in the @bind-value:after
used in the standard InputBase
like this.
@page "/"
<PageTitle>Index</PageTitle>
<MudText Typo="Typo.h3" GutterBottom="true">Hello, MudTextField!</MudText>
<MudTextField T="string" Text="@_value" TextChanged="this.SetValueAsync" Immediate="true"/>
<MudText Class="mt-8">Value: @_value</MudText>
<MudText Class="mt-8">Result: @_result</MudText>
@code {
private string? _value;
private string? _result;
private async Task SetValueAsync(string? value)
{
_value = value;
await AfterSetValueAsync();
}
private async Task AfterSetValueAsync()
{
// fake async behaviour
await Task.Yield();
_result = $"Set at {DateTime.Now.ToLongTimeString()}";
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论