I have a web application built with ASP .NET Core and MVC. The app features a side menu that allows the user to navigate through different pages based on their workflow. For example, when a user logs in for the first time, they are directed to the Home page where they can select HOME or LOGIN. If they choose LOGIN, an employee record is loaded and they are taken to the Employee View. Now, if the user tries to go back to the HOME page from the Employee View, I want to give them two options:
A) Sign out
B) Return to the Employee View
My plan was to implement this using a Modal Pop up. If the Employee exists, I would prompt the user to either sign out or return to the Home page. If the user chooses to sign out, I clear the Employee info and redirect them to the HOME page. If they choose to stay on the page, I take them back to the Employee View.
However, I am facing issues trying to trigger the Modal based on the state of the Employee object. I have tried various solutions from Stack Overflow, but none seem to work for me. While defining a button to open the Modal works, I cannot make it open dynamically based on the Employee state. Here's what my current INDEX.CSHTML looks like:
@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>
The app uses Bootstrap 5 for styling purposes.
Thank you in advance!