Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save MarshalOfficial/b8b9a160f497ea2d68ceb4e77e9790e6 to your computer and use it in GitHub Desktop.

Select an option

Save MarshalOfficial/b8b9a160f497ea2d68ceb4e77e9790e6 to your computer and use it in GitHub Desktop.
a generic reusable confirmation modal for asp.net mvc or razor pages application, uses bootstrap and jquery
  1. Create a Partial View for the Modal: Create a partial view named _ConfirmationModal.cshtml that contains the HTML for your confirmation modal:

    <!-- _ConfirmationModal.cshtml -->
    <div id="confirmationModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="confirmationMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmButton">Confirm</button>
                </div>
            </div>
        </div>
    </div>
  2. Add JavaScript to Show Modal and Handle Confirmation: Add JavaScript to show the modal and handle the user's confirmation. You can include this script in your layout file so it's available on all pages:

    <script>
    function showConfirmationModal(message, confirmCallback) {
        $('#confirmationMessage').text(message);
        $('#confirmationModal').modal('show');
    
        $('#confirmButton').off('click').on('click', function() {
            $('#confirmationModal').modal('hide');
            if (confirmCallback) {
                confirmCallback();
            }
        });
    }
    </script>
  3. Use the Modal in Your Views: You can use the showConfirmationModal function from anywhere in your views or scripts to display the confirmation modal. For example:

    <button onclick="showConfirmationModal('Are you sure you want to delete this item?', function() { deleteItem(); })">Delete</button>

With these steps, you have a reusable confirmation modal that can be used from any page in your ASP.NET MVC or ASP.NET Razor Pages application.

@worbarry
Copy link

worbarry commented Nov 22, 2025

can seem to get it to work i created _ConfirmationMessagePartial.cshtml, added it to my _Layout under <body> then on my page added
<button onclick="showConfirmationModal('Are you sure you want to delete this item?', function() { deleteItem(); })">Delete</button>

nothing happens not sure what is wrong

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment