如何在组件外部放置 Blazor EditForm 的提交按钮
How to place submit button for a Blazor EditForm outside of the component
Blazor 文档的 Form Validation example 在 EditForm
组件中有一个提交按钮组件:
<EditForm Model="@starship" > OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<p>
<label for="identifier">Identifier: </label>
<InputText id="identifier" bind Value="@starship.Identifier" />
</p>
Snip....
<button type="submit">Submit</button>
Snip...
</EditForm>
是否可以将提交按钮 放在 EditForm
标签的 之外,并且仍然 'natively' 触发提交 EditForm
组件而不诉诸于使用 JavaScript?
即代码看起来像这样:
<!-- Want this button to submit the form in the EditForm tags-->
<button type="submit">Submit</button>
Snip...
<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<p>
<label for="identifier">Identifier: </label>
<InputText id="identifier" bind-Value="@starship.Identifier" />
</p>
</EditForm>
很简单:
- 将
id
属性添加到 EditForm
- 将提交按钮放在
EditForm
之外,并为其 form
属性分配 EditForm
. 的 ID
这是一个工作代码示例:
@using System.ComponentModel.DataAnnotations;
<EditForm id="@MyID" Model="Model" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<div class="form-group">
<label for="name">Name: </label>
<InputText Id="name" Class="form-control" @bind-Value="@Model.Name">
</InputText>
<ValidationMessage For="@(() => Model.Name)" />
</div>
<div class="form-group">
<label for="body">Text: </label>
<InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text">
</InputTextArea>
<ValidationMessage For="@(() => Model.Text)" />
</div>
</EditForm>
<p>
<button type="submit" form="@MyID" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-light"
@onclick="@Cancel">Cancel</button>
</p>
@code
{
private string MyID = "myid";
private Comment Model = new Comment();
public async Task HandleValidSubmit()
{
// await Task.Delay(3000);
await Task.Run(() =>
{
Console.WriteLine("Saving...");
Console.WriteLine(Model.Name);
Console.WriteLine(Model.Text);
});
}
private void Cancel()
{
Console.WriteLine("Cancelling...");
Console.WriteLine(Model.Name);
Console.WriteLine(Model.Text);
}
public class Comment
{
[Required]
[MaxLength(10)]
public string Name { get; set; }
[Required]
public string Text { get; set; }
}
}
希望对您有所帮助...
接受的答案对我有帮助,但我想指出代码部分中的这个变量不需要:
private string MyID = "myid";
您可以将其简化为:
<button type="submit" form="MyID" class="btn btn-primary">Save</button>
Snip...
<EditForm id="MyID" Model="Model" OnValidSubmit="HandleValidSubmit">
不需要 @MyID razor 语法变量来完成此操作。
对于自定义错误消息
[MaxLength(100, ErrorMessage = "Title is too long.")]
public string title { get; set; }
Blazor 文档的 Form Validation example 在 EditForm
组件中有一个提交按钮组件:
<EditForm Model="@starship" > OnValidSubmit="@HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <p> <label for="identifier">Identifier: </label> <InputText id="identifier" bind Value="@starship.Identifier" /> </p> Snip.... <button type="submit">Submit</button> Snip... </EditForm>
是否可以将提交按钮 放在 EditForm
标签的 之外,并且仍然 'natively' 触发提交 EditForm
组件而不诉诸于使用 JavaScript?
即代码看起来像这样:
<!-- Want this button to submit the form in the EditForm tags-->
<button type="submit">Submit</button>
Snip...
<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<p>
<label for="identifier">Identifier: </label>
<InputText id="identifier" bind-Value="@starship.Identifier" />
</p>
</EditForm>
很简单:
- 将
id
属性添加到EditForm
- 将提交按钮放在
EditForm
之外,并为其form
属性分配EditForm
. 的 ID
这是一个工作代码示例:
@using System.ComponentModel.DataAnnotations;
<EditForm id="@MyID" Model="Model" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<div class="form-group">
<label for="name">Name: </label>
<InputText Id="name" Class="form-control" @bind-Value="@Model.Name">
</InputText>
<ValidationMessage For="@(() => Model.Name)" />
</div>
<div class="form-group">
<label for="body">Text: </label>
<InputTextArea Id="body" Class="form-control" @bind-Value="@Model.Text">
</InputTextArea>
<ValidationMessage For="@(() => Model.Text)" />
</div>
</EditForm>
<p>
<button type="submit" form="@MyID" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-light"
@onclick="@Cancel">Cancel</button>
</p>
@code
{
private string MyID = "myid";
private Comment Model = new Comment();
public async Task HandleValidSubmit()
{
// await Task.Delay(3000);
await Task.Run(() =>
{
Console.WriteLine("Saving...");
Console.WriteLine(Model.Name);
Console.WriteLine(Model.Text);
});
}
private void Cancel()
{
Console.WriteLine("Cancelling...");
Console.WriteLine(Model.Name);
Console.WriteLine(Model.Text);
}
public class Comment
{
[Required]
[MaxLength(10)]
public string Name { get; set; }
[Required]
public string Text { get; set; }
}
}
希望对您有所帮助...
接受的答案对我有帮助,但我想指出代码部分中的这个变量不需要:
private string MyID = "myid";
您可以将其简化为:
<button type="submit" form="MyID" class="btn btn-primary">Save</button>
Snip...
<EditForm id="MyID" Model="Model" OnValidSubmit="HandleValidSubmit">
不需要 @MyID razor 语法变量来完成此操作。
对于自定义错误消息
[MaxLength(100, ErrorMessage = "Title is too long.")]
public string title { get; set; }