AJAX結合彈框實現增刪改

AJAX結合彈框實現新增修改刪除
控制器代碼：

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

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

頁面代碼

@{
    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="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>

@section scripts{
    <script type="text/javascript">
        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";
        }
        //點擊修改按鈕
        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);
                }
            });
        }

        //刪除
        function del(id) {
            if (window.confirm("確認是否刪除")) {

                $.ajax({
                    url: "/role/delete/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        window.location.href = "/role/index";
                    }
                });
            }
        }
    </script>   
    }