Execute Bootstrap Modal from within ASP Razor code based on MVC Model val-CodePudding

I have an ASP .NET Core App, using MVC. I use a side menu to allow the user to select from choices he is allowed to have based on workflow. ie: The first time he comes in, he goes to the Home page. He can select HOME, or LOGIN. When he selects LOGIN, and an employee record is loaded. He goes to the Employee View. If at this point, he selects HOME again, I want to either:

A) Sign Him Out
B) Take Him Back to Employee View.

I thought to do this via a Modal Pop up. If Employee exists, I ask him if he wants to Sign Out. If He says YES, I will clear the Employee info and show him HOME again. If he says NO, I take him back to the Employee Page.

I can't seem to get the Modal to open based on Object state though. I have tried several of the solutions on SO, but none of them work for me. If I define a button to bring up the Modal, it works fine. But I can't get it to open based on the Employee state. Here's the current INDEX.CSHTML:

@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Http.Extensions
@model dynamic

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">      
</head>
<body>
    <!-- SET TO ALWAYS BE TRUE FOR TESTING -->
    @if (Model.Employee != null || Model.Employee == null)
    {
              <script type="text/javascript">
                $(document).ready(function() {
                 $("#exampleModal).modal("show");
                });          
              </script>
    }
    <!-- Button to open the modal COMMENTED OUT FOR NOW -->
    <!--  <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
        Click Me!
    </button>  -->

    <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div >
         <div >
           <div >
             <h5  id="exampleModalLabel">What Do You Mean Go Home?</h5>
             <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div >
             You are currently logged into the system.
             Would you like to Sign Off, or Go to Employee Page?
           </div>
           <div >
             <button type="button"  data-bs-dismiss="modal">EmployeePage</button>
             <button type="button" >Sign Off</button>
           </div>
         </div>
       </div>
     </div>
    <!-- TEST CODE FOR MODAL BOOTSTRAP -->


    
<div >
    <div >
        <div >
                <!-- Navigation menu -->
                @Html.Partial("_Lmenu")
            </div>
        <div >
            <h1>Welcome to the Timeclock System</h1>
            <hr />   
            <div>
                    @if (!string.IsNullOrEmpty(Model.BZTNotes.MessageBody))
                    {
                        @Html.Raw(Model.BZTNotes.MessageBody)
                    }
            </div>
        </div>
    </div>
</div>
</body>
</html>

I am using Bootstrap 5, if that matters.

TIA!

CodePudding user response：

Firstly, you miss the ending " in your js code, change your code like below:

$("#exampleModal").modal("show");

Then, you miss adding the jQuery reference in your view:

<body>
    @*<script src="~/lib/jquery/dist/jquery.min.js"></script>*@       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    
    <!-- SET TO ALWAYS BE TRUE FOR TESTING -->
    @if (Model.Employee != null || Model.Employee == null)
    {
        <script type="text/javascript">
            $(document).ready(function() {
             $("#exampleModal").modal("show");
            });
        </script>
    }
    //.....