CODEWITHSUNDEEP
javascriptasp.net-coreasp.net-core-mvcbootstrap-5
MarkJoel60
MarkJoel60

Reputation: 557

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

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" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Click Me!
    </button>  -->

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


    
<div class="container-fluid">
    <div class="row">
        <div class="col-2 bg-light border-right">
                <!-- Navigation menu -->
                @Html.Partial("_Lmenu")
            </div>
        <div class="col-10">
            <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!

Upvotes: 1

Views: 871

Answers (1)

Rena
Rena

Reputation: 36705

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>
    }
    //.....

Upvotes: 1

Related Questions