Q:

How do you validate Blazor forms inside the bootstrap modal?

0

This code will help you to understand how to validate Blazor forms inside the bootstrap modal.

All Answers

need an explanation for this answer? contact us directly to get an explanation for this answer

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();
    }
    }

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions


need a help?


find thousands of online teachers now