利用bootstrap模态框实现新增修改功能

开发环境

VS2019 SqlServer数据库2012
事先创建一个名为Rbac的数据库，表名Roles

打开VS2019，创建一个MVC项目，添加控制器，以及视图

创建实体模型，引用model

新增

显示数据页面

<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>
                    <input type="button" name="name" data-toggle="modal" data-target="#RoleAdd" class="btn btn-outline-info" onclick="edit(@item.ID)" value="修改" />
                </td>
                <td><a href="#" class="btn btn-danger" onclick="del(@item.ID)">删除</a></td>
            </tr>
        }
    </tbody>
</table>

控制器

public ActionResult Index()
        {
            return View(db.Roles.ToList());
        }

在bootstrap4里面找到模态框的代码，进行新增模态框的页面样式布局

<div class="modal fade" id="RoleAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新增</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-inline">
                        <label for="name">名称</label>
                        <input type="text" id="name" class="form-control" />
                    </div>
                    <div class="form-inline">
                        <label for="Remark">备注</label>
                        <input type="text" id="Remark" class="form-control" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

添加一个按钮，点击弹出id为RoleAdd的模态框

<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#RoleAdd"onclick="add()" >
    新增
</button>

清空模态框文本里面的值

function add() {
            //清空文本框
            $("#name").val("");
            $("#Remark").val("");
            url = "/roles/add";
        }

通过ajax将数据传入后台

var url;
        function save() {
            //获取值
            var name = $("#name").val();
            var Remark = $("#Remark").val();
            //调用ajax
            $.ajax({
                url: url,
                type: "post",
                dataType: "json",
                data: { "Name": name, "Remark": Remark },
                success: function (res) {
                    if (res.code == 1) {
                        //关闭对话框
                        $("#exampleModalLabel").modal("hide");
                        //清空文本框
                        $("#name").val("");
                        $("#Remark").val("");
                        //刷新页面
                        window.location.href = "/roles/index";
                    }
                    alert(res.message);
                }
            });
        }

后台接受数据，进行新增

public ActionResult Add(Role role)
        {
            var code = 0;
            var message = "新增失败";
            db.Roles.Add(role);
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "新增成功";
            }
            var res = new
            {
                code = code,
                message = message
            };
            return Json(res, JsonRequestBehavior.AllowGet);
        }

修改

修改使用的是同一个模态框

传一个id进roles/edit方法

function edit(id) {
            //根据ID查询出名称和备注，放到文本框
            url = "/roles/edit/" + id;
            $.ajax({
                url: "/Roles/edit/" + id,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("#name").val(res.Name);
                    $("#Remark").val(res.Remark);
                }
            })
        }

后台查询数据，并且返回json字符串给前台

public ActionResult edit(int id)
        {
            var roles = db.Roles.Where(p=>p.ID==id).Select(p=>new { p.Name,p.Remark}).FirstOrDefault();
            return Json(roles, JsonRequestBehavior.AllowGet);
        }

前台接受后台传过来的值，并且赋给文本框

再通过save方法传到后台进行修改

[HttpPost]
        public ActionResult edit(Role role)
        {
            var code = 0;
            var message = "修改失败";
            db.Entry(role).State = System.Data.Entity.EntityState.Modified;
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "修改成功";
            }
            var res = new
            {
                code = code,
                message = message
            };
            return Json(res, JsonRequestBehavior.AllowGet);
        }

删除

//删除
        function del(id) {
            if (window.confirm("确认删除！")) {
                $.ajax({
                    url: "/role/delete/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        alert(res.message);
                    }
                });
            }
        }

public ActionResult Delete(int id)
        {
            var code = 0;
            var message = "删除失败";
            var role = db.Roles.Find(id);
            db.Roles.Remove(role);
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "删除成功";
            }
            var res = new
            {
                code = code,
                message = message
            };
            return Json(res, JsonRequestBehavior.AllowGet);
        }