ASP .NET Core modals

#dotnetcore #aspnet #bootstrap #csharp

Introduction

Modals are great for asking questions and providing information to users. Learn how to work with Bootstrap modals by placing the modal code in separate pages for reusability, along with cleaning up pages.

ASP.NET Core source code

Informational modal

For this modal, a message to display, text for the button, and text for the title will be passed to the modal.

Create Pages\Shared_AlertModal.cshtml. At top of page @model specifies values as a tuple for page title, text and button text

@model (string Message, string ButtonText, string Title)

Next follows the modal in a form.

<form method="post">

    <div class="modal fade"
         id="alertModal"
         data-bs-backdrop="static"
         tabindex="-1" 
         aria-labelledby="alertModalLabel"
         aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">@Model.Title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @Model.Message
                </div>

                <div class="modal-footer justify-content-center">
                    <button type="submit"
                            name="answer"
                            value="true"
                            class="btn btn-primary btn-lg">
                        @Model.ButtonText
                    </button>
                </div>

            </div>

        </div>

    </div>

</form>

Calling page front-end

In the button, data-bs-target="#alertModal" points to the above modal to present when clicked.

The last line points to the modal to display along with properties setup in the backend shown below

Calling page back-end

public class Index3Model : PageModel
{
    public string Title { get; set; } = "FYI";
    public string Message { get; set; } = "Your account has been updated.";
    public string ButtonText { get; set; } = "OK";

    public void OnGet()
    {
    }
}

To keep the code simple, properties are set directly, in a real application the values can be dependent on program logic.

Question modal

In this example, in the provided source code, the dialog is used for two different mocked data operations.

The same pattern as used with the alert above is done except for this modal a post is used to get the user’s response.

Create Pages\Shared_ConfirmModal.cshtml. At top of page @model (string Message, string ActionName, int ItemId)

<form method="post" asp-page-handler="Confirm">

    <div class="modal fade" 
         id="confirmModal" 
         data-bs-backdrop="static" 
         tabindex="-1" 
         aria-labelledby="confirmModalLabel"
         aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @Model.Message
                </div>

                <input type="hidden" name="actionName" value="@Model.ActionName"/>
                <input type="hidden" name="itemId" value="@Model.ItemId"/>

                <div class="modal-footer">

                    <button type="submit"
                            name="answer"
                            value="false"
                            class="btn btn-secondary btn-lg">
                        No
                    </button>
                    <button type="submit"
                            name="answer"
                            value="true"
                            class="btn btn-primary btn-lg">
                        Yes
                    </button>
                </div>

            </div>

        </div>

    </div>

</form>

Two buttons are paired by name
Each button's value is used for the response

<input type="hidden" name="actionName" value="@Model.ActionName"/>
<input type="hidden" name="itemId" value="@Model.ItemId"/>

ActionName here is a data operation
ItemId here is a record primary key

Calling page front-end

<div class="mx-auto p-2 text-center" style="width: 200px;">

    <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#confirmModal">
        Archive Order
    </button>

</div>

<partial name="_ConfirmModal" model="@(ValueTuple.Create("Are you sure you want to archive this order?", "ArchiveOrder", Model.OrderId))" />

Calling page back-end

public class Index2Model : PageModel
{
    [BindProperty(SupportsGet = true)]
    public int OrderId { get; set; } = 123; // Example ID

    public string ConfirmationMessage { get; set; } = "Are you sure you want to archive this order?";
    public string ConfirmationAction { get; set; } = "ArchiveOrder";

    [BindProperty]
    public bool? UserResponse { get; set; }

    /// <summary>
    /// Handles GET requests for the page and processes the user's response.
    /// </summary>
    /// <param name="response">
    /// The user's response as a nullable boolean, indicating their decision.
    /// </param>
    public void OnGet(bool? response)
    {
        UserResponse = response;
    }

    /// <summary>
    /// Handles the confirmation of a user action, in this case archiving an order.
    /// </summary>
    /// <param name="answer">The user's response as a string, indicating confirmation or rejection.</param>
    /// <param name="actionName">The name of the action to be performed, e.g., "ArchiveOrder".</param>
    /// <param name="itemId">The unique identifier of the item associated with the action.</param>
    /// <returns>
    /// An <see cref="IActionResult"/> that redirects to the same page with updated parameters, 
    /// including the user's response and the item identifier.
    /// </returns>
    public IActionResult OnPostConfirm(string answer, string actionName, int itemId)
    {
        if (bool.TryParse(answer, out var result))
        {
            UserResponse = result;

            if (result && actionName == "ArchiveOrder")
            {
                DataOperations.ArchiveOrder(itemId);
            }
            else
            {
                Log.Information("Order {P1} not archived.", itemId);
            }
        }

        return RedirectToPage(new
        {
            response = UserResponse,
            orderId = itemId
        });
    }

}