Blazor 绑定输入值不适用于按钮单击
Blazor binding input value not working on button click
我正在使用 Blazor 服务器端订阅时事通讯。当我按下订阅按钮时,我看到系统没有将 EmailAddress 绑定到用户输入的电子邮件地址。我错过了什么?
@inherits InstaTranscribeServerSide.Layouts.SubscribeToNewsletterComponent
<div class="container">
<form class="mt-4">
<input type="email" name="email" placeholder="Enter your email address" text="@EmailAddress">
<button type="button" @onclick="SubscribeToNewsletterClick">
</button>
</form>
</div>
public class SubscribeToNewsletterComponent : InstaTranscribeComponentBase
{
[Inject] protected ILogger<SubscribeToNewsletter> logger { get; set; }
protected string EmailAddress { get; set; } = string.Empty;
protected async Task SubscribeToNewsletterClick()
{
try
{
await this.EmailSender.AddUpdateContactAsync(EmailAddress);
await JSRuntime.NotifySuccess($"You have been subscribed to our newsletter.");
}
catch (Exception exception)
{
await JSRuntime.NotifyError($"There was an error subscribing you to our newsletter.");
}
}
protected override async Task OnInitializedAsync()
{
}
}
显示电子邮件地址的屏幕截图为空白:
显示用户输入的电子邮件地址的屏幕截图:
尝试使用 @bind-value="EmailAddress"
这就是双向数据绑定在 blazor 中的工作方式,您也可以仅将 value="@EmailAddress"
用于一种方式,并且您始终可以获取输入作为参考并访问它的属性
您的页面看起来有点“不像 Blazor”。仅供参考,这是您页面的一个相当经典的 Blazor 版本。
它使用 Blazor EditForm 组件和页内状态显示。
@page "/"
<h3>Subscribe To My Site</h3>
<EditForm EditContext=this.editContext OnSubmit=this.SubmitForm>
<div class="col">
<InputText class="form-control" typeof="email" @bind-Value=this.model.Email placeholder="Enter your email address" />
</div>
<div class="col m-2 p-2 text-end">
<button type="submit" class="btn btn-primary">Subscribe</button>
</div>
</EditForm>
@if (this.isMessage)
{
<div class="m-2">
<div class="alert @this.alertCss">@this.message</div>
</div>
}
@code {
private NewsLetterCredentials model = new NewsLetterCredentials();
private EditContext? editContext;
private string message = string.Empty;
private bool isMessage => !string.IsNullOrWhiteSpace(message);
private string alertCss => this.success ? "alert-success" : "alert-danger";
private bool success = true;
protected override void OnInitialized()
=> this.editContext = new EditContext(model);
private async Task SubmitForm()
{
await Task.Delay(200);
// emulate save to database
this.success = !this.success;
this.message = this.success
? "Subscribed"
: "Error Subscribing";
}
public class NewsLetterCredentials
{
public string Email { get; set; } = string.Empty;
}
}
我正在使用 Blazor 服务器端订阅时事通讯。当我按下订阅按钮时,我看到系统没有将 EmailAddress 绑定到用户输入的电子邮件地址。我错过了什么?
@inherits InstaTranscribeServerSide.Layouts.SubscribeToNewsletterComponent
<div class="container">
<form class="mt-4">
<input type="email" name="email" placeholder="Enter your email address" text="@EmailAddress">
<button type="button" @onclick="SubscribeToNewsletterClick">
</button>
</form>
</div>
public class SubscribeToNewsletterComponent : InstaTranscribeComponentBase
{
[Inject] protected ILogger<SubscribeToNewsletter> logger { get; set; }
protected string EmailAddress { get; set; } = string.Empty;
protected async Task SubscribeToNewsletterClick()
{
try
{
await this.EmailSender.AddUpdateContactAsync(EmailAddress);
await JSRuntime.NotifySuccess($"You have been subscribed to our newsletter.");
}
catch (Exception exception)
{
await JSRuntime.NotifyError($"There was an error subscribing you to our newsletter.");
}
}
protected override async Task OnInitializedAsync()
{
}
}
显示电子邮件地址的屏幕截图为空白:
显示用户输入的电子邮件地址的屏幕截图:
尝试使用 @bind-value="EmailAddress"
这就是双向数据绑定在 blazor 中的工作方式,您也可以仅将 value="@EmailAddress"
用于一种方式,并且您始终可以获取输入作为参考并访问它的属性
您的页面看起来有点“不像 Blazor”。仅供参考,这是您页面的一个相当经典的 Blazor 版本。
它使用 Blazor EditForm 组件和页内状态显示。
@page "/"
<h3>Subscribe To My Site</h3>
<EditForm EditContext=this.editContext OnSubmit=this.SubmitForm>
<div class="col">
<InputText class="form-control" typeof="email" @bind-Value=this.model.Email placeholder="Enter your email address" />
</div>
<div class="col m-2 p-2 text-end">
<button type="submit" class="btn btn-primary">Subscribe</button>
</div>
</EditForm>
@if (this.isMessage)
{
<div class="m-2">
<div class="alert @this.alertCss">@this.message</div>
</div>
}
@code {
private NewsLetterCredentials model = new NewsLetterCredentials();
private EditContext? editContext;
private string message = string.Empty;
private bool isMessage => !string.IsNullOrWhiteSpace(message);
private string alertCss => this.success ? "alert-success" : "alert-danger";
private bool success = true;
protected override void OnInitialized()
=> this.editContext = new EditContext(model);
private async Task SubmitForm()
{
await Task.Delay(200);
// emulate save to database
this.success = !this.success;
this.message = this.success
? "Subscribed"
: "Error Subscribing";
}
public class NewsLetterCredentials
{
public string Email { get; set; } = string.Empty;
}
}