asp.net用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>


<div class="modal fade" id="roleModal" 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="roleTitle">角色新增/修改</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-group">
                        <label for="name">名称</label>
                        <input type="text" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <label for="remark">备注</label>
                        <input type="text" class="form-control" id="remark" />
                    </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>

新增

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) {
                        //关闭对话框
                        $('#roleModal').modal('hide');
                       
                        //刷新页面
                        window.location.href = "/role/index";
                    }
                    alert(res.message);
                }
            });

            //保存失败，弹出提醒

        }
        //点击新增按钮
        function add() {
            //清空文本框
            $("#name").val("");
            $("#remark").val("");
            url="/role/add";
        }

然后后台

  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);
        }

修改

 //点击修改按钮
        function edit(id) {
            //根据ID，查询名称和备注，放到文本框里
            url= "/role/edit/" + id;
            $.ajax({
                url: "/role/edit/" + id,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("#name").val(res.Name);
                    $("#remark").val(res.Remark);
                }
            });
        }

后台

 public ActionResult edit(int id)
        {
            var role = db.Roles
                .Where(p => p.ID == id)
                .Select(p => new { p.ID, p.Name, p.Remark })
                .FirstOrDefault();
            return Json(role, JsonRequestBehavior.AllowGet);
        }
        [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) {
                        window.location.href = "/role/index";
                    }
                });

            }

  //删除
        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);
        }