Issue with Bootstrap model not being displayed

MattNorman

Well-known member
Joined
May 22, 2021
Messages
98
Programming Experience
1-3
I have a bootstrap modal within my main layout view that is used for displaying error messages.

Whenever there is an error I take the following action:
  1. Add error data to session
  2. Redirect to relevant action
  3. At the start of action, get error data from session and add to view bag
The main layout view then does a check to see if there is any error data as follows:

C#:
@if (ViewBag.ModalMessage is not null)
{
    <script type="text/javascript">
        window.onload = function () {
        $("#MyPopup").modal("show");
    };
    </script>
    }

This works fine in most cases however I have an issue with the modal not showing in specific cases.

I have a 'Manage' view that has a data table with each row having a delete action link.

Clicking the action link shows a confirmation modal (part of the Manage view not the layout).

Clicking the confirm button on the modal triggers a post action to delete the record.

Within the post method, I carry out some validation to check if the record can be deleted. If not, I add some error data to the session and redirect back to the manage view.

The manage view is displayed and using a breakpoint, I can see that the viewbag check in the layout view is being called. The modal does not get displayed however.

Here is the post method for deleting the item:

C#:
[HttpPost]
[TypeFilter(typeof(LoginControl))]
[TypeFilter(typeof(ManageAccountTypes))]
public ActionResult Delete(int id)
{
    string method_name = "Delete(int id)";

    try
    {
        // Load popup data in to view bag.
        UpdatePopupMessage();

        // Check if account type is used.
        bool in_use = _blAccount.GetAccountCountByAccountTypeID(id) > 0;

        if (in_use)
        {
            _sessionManager.AddViewPopup(ViewPopups.AccountTypeDeleteInUse);
            return RedirectToAction("Manage", "AccountTypes");
        }

        // Delete from database and get result.
        bool result = _blAccountType.DeleteAccountType(id);

        // Check result.
        if (!result)
        {
            _sessionManager.AddViewPopup(ViewPopups.AccountTypeDeleteFailed);
        }

        // Redirect to manage users action.
        return RedirectToAction("Manage", "AccountTypes");
    }
    catch (Exception ex)
    {
        _blErrorLog.AddErrorLog(new()
        {
            LogDate = DateTime.Now,
            Username = _sessionManager.GetUserSession()!.Username ?? "",
            IPAddress = _sessionManager.GetClientIPAddress() ?? "",
            Namespace = $"{_classNamespace}.{method_name}",
            ErrorMessage = ex.ToString(),
            Data = $""
        });

        _sessionManager.AddViewPopup(ViewPopups.GeneralError);

        return RedirectToAction("Manage", "AccountTypes");
    }
}

Line 19 is where the redirect occurs and is working as expected. I can even see in the main layout that the error data is present in the view bag. It just does not display the modal for some reason.
 
After further testing it doesn't appear to be an issue with setting the message and redirecting from a post action.

The modal from the layout only fails to display if my delete modal was previously displayed.

Here is the delete modal and javascript:

C#:
<!-- Delete Modal -->
<div class="modal fade" id="deletemodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Delete Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this item?</p>
                <p id="deletedata"></p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-primary" onclick="Cancel()">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="Delete()">Confirm</button>
            </div>
        </div>
    </div>
</div>

Table edit action:
C#:
<a href="#" class="text-primary" onclick="DeletePrompt('/AccountTypes/Delete/', @dto_account_type.AccountTypeId, 'Account Type: @dto_account_type.AccountTypeName')">Delete</a>

JS:
JavaScript:
var URL = "";
var ID = "";
var DATA = "";

function DeletePrompt(url, id, data) {
    DATA = data;
    $("#deletedata").text(DATA);
    $("#deletemodal").modal('show');
    URL = url;
    ID = id;
}

function Delete() {
    $.ajax(
        {
            url: URL + ID,
            type: "POST",
            success: function (result) {
                $("#deletemodal").modal('hide');
                window.location.reload();
            }
        })
}

function Cancel() {
    $("#deletemodal").modal('hide');
}
 
Default.aspx:
<script type="text/javascript"
src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript"
src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet"
href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
&times;</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<img src="/Resources/theme/images/popup-mhakal.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
<script type="text/javascript">
function ShowPopup(title ) {
$("#MyPopup .modal-title").html(title);
//$("#MyPopup .modal-body").html(body);
$("#MyPopup").modal("show");
}
</script>
Default.aspx.cs:
 string title = "";
        string body = "Welcome to ASPSnippets.com";
      //  body += "<img src='/Resources/theme/images/popup-mhakal.jpg'>";
        ClientScript.RegisterStartupScript(this.GetType(), "Popup",
"ShowPopup('" + title + "', '" + body + "');", true);
 
Just dumping some code without explanation of how that fixes the OP's issue is not very useful.

Also your code seems to target ASP.NET web forms. The OP's issue is with Razor, and furthermore, the issue is only after another modal was displayed.
 
Default.aspx:
<script type="text/javascript"
src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript"
src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet"
href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
&times;</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
<img src="/Resources/theme/images/popup-mhakal.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
<script type="text/javascript">
function ShowPopup(title ) {
$("#MyPopup .modal-title").html(title);
//$("#MyPopup .modal-body").html(body);
$("#MyPopup").modal("show");
}
</script>
Default.aspx.cs:
 string title = "";
        string body = "Welcome to ASPSnippets.com";
      //  body += "<img src='/Resources/theme/images/popup-mhakal.jpg'>";
        ClientScript.RegisterStartupScript(this.GetType(), "Popup",
"ShowPopup('" + title + "', '" + body + "');", true);
Unfortunately this does not really help without any comments to go with it.

I have my modal setup and working fine under normal conditions. It is only an issue where a different modal had previously been displayed.

The sequence is that the delete modal is displayed, the users confirms the delete, the post method is called and an issue is encountered, set error data in session and redirect to action, Razor page does not show error modal as it normally would.

It seems to be something to do with the delete modal having been displayed as any other time the error modal loads fine.
 
Back
Top Bottom