AJAX结合弹框实现新增修改删除

最新推荐文章于 2021-08-06 13:27:41 发布

Pmin

最新推荐文章于 2021-08-06 13:27:41 发布

阅读量476

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/ITpmin/article/details/106969207

版权

本文介绍了如何结合AJAX技术与弹框功能，实现在不刷新页面的情况下，进行数据的新增、修改和删除操作。通过展示页面和后台代码，详细解释了其实现过程和最终效果。

摘要由CSDN通过智能技术生成

这里写目录标题

页面代码

@{
    ViewBag.Title = "Index";
}
@model List<Com.Fengsl.Lz.Models.Role>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal" onclick="add();">
    新增
</button>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>名称</th>
            <th>备注</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Remark</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal" onclick="edit(@item.ID)">
                        修改
                    </button>
                </td>
                <td>
                    <button type="button" class="btn btn-primary" onclick="del(@item.ID)">
                        删除
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class=