Modal dialogs

Dialog.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace WorkStandard.Pages
{
    public class DialogModel : PageModel
    {

        [BindProperty]
        public string? TextValue { get; set; } = "TEST VALUE";

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"TextValue={TextValue}");
        }
    }
}

→ Where Debug.WriteLine appear

Dialog.cshtml

@page
@model WorkStandard.Pages.DialogModel

<form method="post">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialog">
        Open the modal dialog
    </button>

    <!-- dialog begin-->
    <div class="modal fade" id="dialog" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Write your custome HTML in this modal-body.</p>
                    <div><input asp-for="TextValue" class="form-control" /></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <!-- dialog end-->
</form>

The CSS classes...

• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons
• modal Make Bootstrap recognize that it is a modal dialog.→ Modal

There are more examples at Modal(Bootstrap calls it modal) page in the site of the Bootstrap.

Modal