开发环境
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">×</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);
}