How do you validate Blazor forms inside the bootstrap modal?
Nov 23, 2020
Blazor,
ASP .NET Core Blazor,
Blazor FAQ,
validate blazor form bootsrap model
,
2012 Views
This code will help you to understand how to validate Blazor forms inside the bootstrap modal.
You have to use the EditContext with EditForm to validate the forms inside a bootstrap modal.
@using System.ComponentModel.DataAnnotations;
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm EditContext="@EC">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="name">Name</label>
<InputText bind-Value="@model.Name" id="name" Class="form-control" />
</div>
@if (EC.Validate())
{
<button type="button" onclick="@SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
}
else
{
<button type="button" onclick="@SubmitHandler" class="btn btn-primary">Submit</button>
}
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
@code {
public class ModelClass
{
[Required]
public string Name { get; set; }
}
private ModelClass model { get; set; } = new ModelClass();
private EditContext EC { get; set; }
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
protected override void OnInitialized()
{
EC = new EditContext(model);
base.OnInitialized();
}
}


