AJAX结合弹框实现增删查改

页面:

新增:

修改:

页面代码:

@{
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>        
}

后台代码:

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