ASP.NET Core MVC 使用模态框实现删除请求确认功能失效怎么解决

• 前端层面：确认、取消按钮使用type="submit"但未嵌套在<form>标签内，ASP.NET Core的asp-*标签助手无法为独立的submit元素生成跳转逻辑，且JS代码未给两个按钮绑定点击交互事件
• 后端层面：仓储层GetRequestById、DeleteRequests方法直接抛出NotImplementedException异常，即使前端请求正常发送也会执行失败；控制器Delete方法未限制请求方式，删除完成后返回视图逻辑不合理

1. 视图代码修改 #

把两个submit按钮替换为锚点标签+普通按钮，同时给元素加id方便JS绑定交互：

@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>
        <!-- 用a标签生成正确的删除跳转链接 -->
        <a id="confirmDelete" class="btn btn-primary" asp-controller="AdminPage" asp-action="Delete" asp-route-id="@Model.RequestId">Confirm</a>
        <!-- 取消按钮直接用JS关闭模态框 -->
        <button id="cancelDelete" class="btn btn-primary">Cancel</button>
    </div>
</div>

2. JS代码修改 #

新增两个按钮的点击事件，同时确保页面加载时执行初始化逻辑：

// 页面加载完成后执行模态框初始化
window.onload = function() {
    AdminPage();
}

function AdminPage() {
    var modal = document.getElementById("myModal");
    var btn = document.getElementById("mybtn");
    var span = document.getElementsByClassName("close")[0];
    // 获取确认、取消按钮元素
    var confirmBtn = document.getElementById("confirmDelete");
    var cancelBtn = document.getElementById("cancelDelete");

    btn.onclick = function () {
        modal.style.display = "block";
    }

    span.onclick = function () {
        modal.style.display = "none";
    }

    // 取消按钮关闭模态框
    cancelBtn.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }  
}

3. 仓储层代码修复 #

实现未完成的业务方法，移除异常抛出逻辑：

// 实现根据Id查询请求的逻辑
public PsSecurityRequest GetRequestById(int id)
{
    return _appDbContext.PsSecurityRequests.FirstOrDefault(x => x.RequestId == id);
}

public void DeleteRequests(PsSecurityRequest Request)
{
    _appDbContext.Remove(Request);
    // 新增保存更改逻辑
    _appDbContext.SaveChanges();
}

4. 控制器Delete方法优化 #

调整返回逻辑，删除完成后重定向到列表页：

public IActionResult Delete(int Id)
{
    PsSecurityRequest securityRequest = _psSecurityRequestRepository.GetRequestById(Id);
    if(securityRequest != null)
    {
        _psSecurityRequestRepository.DeleteRequests(securityRequest);
    }
    // 删除后跳转到列表页
    return RedirectToAction("Index");   
}

内容的提问来源于stack exchange，提问作者Aspiring JediMaster