Ajax结合弹框实现增删改

最新推荐文章于 2021-08-05 16:43:53 发布

H_0207

最新推荐文章于 2021-08-05 16:43:53 发布

阅读量746

点赞数 2

文章标签： mvc

本文链接：https://blog.csdn.net/H_0207/article/details/106941491

版权

本文档介绍了如何在MVC框架下使用Ajax和Bootstrap弹出框进行数据操作，包括通过Ajax进行新增、修改和删除。首先在视图中利用Ajax实现弹框功能，接着讲解如何利用bootstrap模态框进行新增和修改操作。然后，详细阐述了Ajax如何传递值到后台控制器进行新增和修改。最后，展示了如何通过Ajax进行无刷新删除并处理控制器响应。

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

1. 在下面这个视图中我们利用ajax弹框进行操作

<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>

2.利用bootstrap样式单击新增、修改弹出模态框

<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">