在MVC中使用框模态删除请求

Question

我有一个使用 HTML 在视图中创建的框模态，当用户按下一个名为 delete 的按钮时会调用它，如果他们想删除一个请求。 从这里用户可以看到两个按钮，一个是确认删除，一个是取消删除。 但是，当我单击删除按钮时，会弹出框模式，但按钮确认和取消不会删除。 我正在为此项目使用 MVC .NET 核心框架，我希望用户能够删除请求，但如果他们确定要删除请求，则会收到提示。

@model PsSecurityRequest

<!-- The Modal -->
<button id="mybtn">Delete</button>

       <div id="myModal" class="modal">

            <!-- Modal content -->

           <div class="modal-content">

               <h3>Are you sure you want to permanetly delete this request?</h3>
               <span class="close">&times;</span>


               <input type="submit" class="btn btn-primary" value="Confirm" asp-controller="AdminPage" asp-action="Delete" asp-route-id="@Model.RequestId" />

               <input type="submit" class="btn btn-primary" value="Cancel" asp-controller="AdminPage" asp-action="Index" />


           </div>
   
       </div> 

我用于框模态的视图显示在此处。

function AdminPage() {

    //var Status = document.getElementById("ddlState");
    //var Confirm = document.getElementsByClassName("Confirm");
    //var Cancel = document.getElementsByClassName("Cancel");


    //var _Confirm = "Confirm"
    //Confirm.classList.add("hide");
    //Cancel.classList.add("hide");

    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("mybtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function () {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }  
} 

这是我在这个项目中使用的 javascript 文件。

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

这是我用于框模态的 .cs 文件。

public IActionResult Delete(int Id)
{
    // var id;
    //_psSecurityRequestRepository = PsSecurityRequest.GetRequest();
    // PsSecurityRequest deleteRequest = _psSecurityRequestRepository.GetRequestById(Request);
    PsSecurityRequest securityRequest = _psSecurityRequestRepository.GetRequestById(Id);
    //PsSecurityRequest repo = new PsSecurityRequest();
    // var _data = repo.Requests();

     _psSecurityRequestRepository.DeleteRequests(securityRequest);
    return View(securityRequest);   
} 

这是当用户确认删除请求时调用的操作方法。 最后，这里是存储库，其中包含在控制器中的 action 方法中看到的方法。

public PsSecurityRequest GetRequestById(object id)
{
    throw new NotImplementedException();
}

//[HttpPost, ActionName ("Delete") ]
public void UpdateShortEmplId(PsSecurityRequest psSecurityRequest)
{
    _appDbContext.Update(psSecurityRequest);
    _appDbContext.SaveChanges();
}
public void FixEmplId()
{
    foreach(PsSecurityRequest psSecurityRequest in psSecurityRequests)
    {
        if (psSecurityRequest.SecurityForEmplid.Length < 7)
        {
            psSecurityRequest.SecurityForEmplid = "0" + psSecurityRequest.SecurityForEmplid;
            _appDbContext.Update(psSecurityRequest);            
        }        
    }
    _appDbContext.SaveChanges();
}

public void DeleteRequests(PsSecurityRequest Request)
{
    _appDbContext.Remove(Request);
    throw new NotImplementedException();
}