Call Bootstrap 3 Modal from an MVC razor model?

Question

Currently I'm using a Model that after posting back from a Form I look at a model property to display an Alert. However I now need to have a Modal displayed instead. I know I need a Modal div at the bottom of my page to display but I can't figure out how to call that from the Razor Model.

Researching ideas all I've found is where a button click or some click event would call some JS and show the modal. I can't find anything on how to just open it from the View.

The concept is that the end user will click a button do basically do like a Time Stamp into the database. In the controller I set a MessageType property and then based on that I would show say a Bootstrap Error Alert if there was an error or Success Alert if everything was okay. Now instead of calling the Success Alert I need to open a Modal.

Here is how I'm doing it now with an Alert. This is in my MVC View. Is there a way to do the same but instead of Alert open a Modal?

@if (Model.MessageType == "PUNCH")
{
    <div class="alert alert-success">
        <h3>Punch accepted at <strong>@Model.CurrentTime.</strong></h3>
    </div>
}

Answer 1

Similar to what you did, you may execute the javascript code which shows the modal dialog.

Assuming you have the required bootstrap files loaded to your page,

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                                                       aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                    aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
 @if (Model.MessageType == "PUNCH")
 {
    <script>
        $('#myModal').modal();
    </script>
 }
}