实现同一页面点击网格编辑按钮弹出带对应数据的Edit Modal PopUp

实现步骤 #

你使用了Bootstrap样式组件，以下基于Bootstrap模态框实现无刷新编辑功能：

1. 父页面添加模态框容器 #

将以下代码放在包含列表分部视图的父页面中，不要放在列表分部视图内避免重复加载：

<!-- 编辑模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">编辑临时人员信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="editModalBody">
                <!-- 编辑分部视图会加载到这里 -->
            </div>
        </div>
    </div>
</div>

2. 修改列表分部视图的编辑按钮 #

修正你注释的按钮代码，只传递主键ID到后端，避免路由参数错误：

<td>
    <!-- 替换原来的a标签 -->
    <a onclick="showInPopup('@Url.Action("GetTemporaryStaffById", "TemporaryStaff", new { id = item.StafftempID })')" 
       class="btn btn-info text-white">
       <i class="fa fa-edit"></i>
    </a>
</td>

3. 父页面添加JS交互逻辑 #

依赖jQuery和Bootstrap JS，添加以下脚本：

// 弹出加载编辑视图的模态框
function showInPopup(url) {
    $.get(url).done(function (res) {
        $('#editModalBody').html(res);
        $('#editModal').modal('show');
        // 绑定表单提交事件
        bindEditFormSubmit();
    }).fail(function () {
        alert('加载编辑数据失败，请重试');
    });
}

// 绑定编辑表单提交事件
function bindEditFormSubmit() {
    $('#editForm').off('submit').on('submit', function (e) {
        e.preventDefault();
        if (!$(this).valid()) return;
        
        $.post({
            url: $(this).attr('action'),
            data: $(this).serialize()
        }).done(function (res) {
            if (res.success) {
                $('#editModal').modal('hide');
                // 刷新列表，如果你用了DataTable可以直接调用table.ajax.reload()
                location.reload();
                alert('保存成功');
            } else {
                alert(res.msg || '保存失败，请重试');
            }
        }).fail(function () {
            alert('保存失败，请重试');
        });
    });
}

4. 调整后端控制器逻辑 #

public class TemporaryStaffController : Controller
{
    // 加载编辑分部视图
    public IActionResult GetTemporaryStaffById(int id)
    {
        // 根据ID查询数据，映射为编辑视图模型
        var staff = _dbContext.TemporaryStaffs.Find(id);
        var editVm = new VMTemporaryStaffEdit
        {
            StafftempID = staff.StafftempID,
            StaffName = staff.StaffName,
            Status = staff.Status
            // 其他需要编辑的字段
        };
        return PartialView("_TemporaryStaffEdit", editVm);
    }
    
    // 处理编辑提交
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult SaveTemporaryStaff(VMTemporaryStaffEdit editVm)
    {
        if (!ModelState.IsValid)
        {
            return Json(new { success = false, msg = "参数校验失败" });
        }
        // 查询原数据更新
        var staff = _dbContext.TemporaryStaffs.Find(editVm.StafftempID);
        staff.StaffName = editVm.StaffName;
        staff.Status = editVm.Status;
        // 其他字段更新
        _dbContext.SaveChanges();
        return Json(new { success = true });
    }
}

5. 新建编辑分部视图_TemporaryStaffEdit.cshtml #

@model LMS.ViewModels.TemporaryStaff.VMTemporaryStaffEdit

<form id="editForm" asp-action="SaveTemporaryStaff">
    @Html.AntiForgeryToken()
    <input type="hidden" asp-for="StafftempID" />
    
    <div class="form-group">
        <label>人员姓名</label>
        <input type="text" class="form-control" asp-for="StaffName" required />
    </div>
    
    <div class="form-group">
        <label>状态</label>
        <select class="form-control" asp-for="Status">
            <option value="true">启用</option>
            <option value="false">禁用</option>
        </select>
    </div>
    
    <!-- 其他需要编辑的字段 -->
    
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>

如果你使用的是ASP.NET MVC非Core版本，把asp-*标签替换为对应的@Html辅助方法即可。

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