AI智能
改变未来

Asp.Net中MVC使用bootstrap模态框+Ajax实现增改操作

1.控制器代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using Com.Fengsl.Lz.Models;namespace Com.Fengsl.Lz.Controllers{public class RoleController : Controller{RbacDBEntities db = new RbacDBEntities();// GET: Rolepublic 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);}}}

2.视图代码

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

3.数据库
随意命名一个数据库,命名一个表,怎么开心怎么来就好。

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » Asp.Net中MVC使用bootstrap模态框+Ajax实现增改操作