Vue的增刪改查+批量刪除+批量修改狀態操作
阿新 • • 發佈：2021-08-15
重點:將你新增實體模型的那一層的引用中的
EntityFramework
EntityFramework.SqlServer
新增到控制器引用中
一、Vue新增的操作
1、Dal層的方法操作可以使用其他方法
//新增 public int Add<T>(T st)where T:class { db.Set<T>().Add(st); return db.SaveChanges(); }
2、Bll層的方法操作不用改使用常規
public List<ShiFtModel> GetXiaLa() {return dal.GetXiaLa(); }
3、控制檯的新增方法
//新增頁面 public ActionResult AddYe() { return View(); } //新增功能 [HttpPost] public ActionResult Add(UserModel st) { return Json(bll.Add(st),JsonRequestBehavior.DenyGet); }
4、頁面的新增使用方法
<script src="~/Scripts/vue.js"></script> <script src="~/Scripts/axios.js"></script> <div id="app"> <table class="table table-hover"> <tr> <td>姓名:</td> <td> <input type="text"v-model="fate.Name" /> </td> </tr> <tr> <td>家庭住址:</td> <td> <input type="text" v-model="fate.Address" /> </td> </tr> <tr> <td>測量體溫:</td> <td> <input type="text" v-model="fate.Temperature" /> </td> </tr> <tr> <td>測量時段:</td> <td> <input type="radio" v-model="fate.When" value="true" />早班 <input type="radio" v-model="fate.When" value="false" />晚班 </td> </tr> <tr> <td>當班班次:</td> <td> <select v-model="fate.ShiFtId"> <option v-for="(item,index) in XiaLaK" :value="item.NId">{{item.Shift}}</option> </select> </td> </tr> <tr> <td>測量日期:</td> <td><input type="date" v-model="fate.Time" /></td> </tr> <tr> <td></td> <td> <input type="button" value="新增" v-on:click="jia" /> <input type="button" value="取消" onclick="location.href='/User/Index'" /> </td> </tr> </table> </div> <script> let app = new Vue({ el: "#app", //屬性 data() { return { fate:{ Name: '', Address: '', Temperature: '', When: 'true', ShiFtId: '1', Time: '', }, XiaLaK:[], } }, //方法 methods: { //新增 jia() { axios.post('/User/Add', this.fate).then(res => { if (res.data> 0) { alert("新增成功"); location.href = '/User/Index'; } else { alert("新增失敗"); } }) }, //下拉框 XiaLa() { axios.get('/User/GetXiaLa').then(res => { this.XiaLaK = res.data }) } }, //文件就緒函式 created: function() { this.XiaLa(); } }) </script>
二、顯示與查詢+分頁+批量修改狀態+批量刪除操作
1、建立一個全面類
2、建立用於分頁的一個類
public class NClassModel<T> where T:class { public int TotalCount { get; set; } public int TotalPage { get; set; } public List<T> Date { get; set; } }
3、Dal層的操作
//顯示 查詢 分頁 public NClassModel<InfoModel> GetShow(string name,int? shift,int pageindex=1,int pagesize=4) { NClassModel<InfoModel> chuan = new NClassModel<InfoModel>(); var list = from a in db.UserModels join b in db.ShiFtModels on a.ShiFtId equals b.NId select new InfoModel { Id = a.Id, Name = a.Name, Address = a.Address, Temperature = a.Temperature, When = a.When, ShiFtId = a.ShiFtId, Time = a.Time, Shift = b.Shift }; if(!string.IsNullOrEmpty(name)) { list = list.Where(p => p.Name.Contains(name)); } if(shift>0) { list = list.Where(p => p.ShiFtId == shift); } chuan.TotalCount = list.Count(); chuan.TotalPage = Convert.ToInt32(Math.Ceiling(chuan.TotalCount * 1.0 / pagesize)); chuan.Date = list.OrderBy(p => p.Id).Skip((pageindex - 1) * pagesize).Take(pagesize).ToList(); return chuan; } //載入下拉框 public List<ShiFtModel> GetXiaLa() { return db.ShiFtModels.ToList(); } //批量修改 public int PiLianUp(string duan,bool when) { var se = duan.Split(','); foreach (var item in se) { var id = Convert.ToInt32(item); var list = db.UserModels.Find(id); if(list!=null) { list.When = when; } } return db.SaveChanges(); } //批量刪除 public int PiLianDel(string ids) { var se = ids.Split(','); foreach (var item in se) { var id = Convert.ToInt32(item); var list = db.UserModels.Find(id); if (list != null) { db.UserModels.Remove(list); } } return db.SaveChanges(); }
4、Bll層的操作
//顯示 查詢 分頁 public NClassModel<InfoModel> GetShow(string name, int? shift, int pageindex = 1, int pagesize = 4) { return dal.GetShow(name, shift, pageindex, pagesize); } //載入下拉框 public List<ShiFtModel> GetXiaLa() { return dal.GetXiaLa(); } //批量修改 public int PiLianUp(string duan, bool when) { return dal.PiLianUp(duan, when); } //批量刪除 public int PiLianDel(string ids) { return dal.PiLianDel(ids); }
5、控制器的操作
//顯示頁面 public ActionResult Index() { return View(); } //顯示 查詢 分頁功能 [HttpGet] public ActionResult GetShow(string name, int? shift, int pageindex = 1, int pagesize = 4) { var list = bll.GetShow(name, shift, pageindex, pagesize); return Json(list, JsonRequestBehavior.AllowGet); } //載入下拉框功能 [HttpGet] public ActionResult GetXiaLa() { return Json(bll.GetXiaLa(),JsonRequestBehavior.AllowGet); } //批量修改功能 [HttpGet] public ActionResult PiLianUp(string duan, bool when) { return Json(bll.PiLianUp(duan, when),JsonRequestBehavior.AllowGet); } //批量刪除功能 [HttpGet] public ActionResult PiLianDel(string ids) { return Json(bll.PiLianDel(ids),JsonRequestBehavior.AllowGet); }
6、頁面顯示操作
<script src="~/Scripts/vue.js"></script> <script src="~/Scripts/axios.js"></script> <div id="app"> <div> 姓名:<input type="text" v-model="name" /> 當班班次:<select v-model="shift"> <option v-for="(st,index) in xiala" :value="st.NId">{{st.Shift}}</option> </select> <input type="button" value="查詢" v-on:click="PageShow" /> <input type="button" value="批量修改時段" v-on:click="PiLiangUp" /> <input type="button" value="批量刪除" v-on:click="PiLiangDel" /> </div> <table class="table table-bordered"> <tr> <td><input type="checkbox" v-model="All" v-on:click="Xuan" /></td> <td>姓名</td> <td>家庭住址</td> <td>體溫測量</td> <td>測量時段</td> <td>當班班次</td> <td>日期</td> <td>操作</td> </tr> <tr v-for="(item,index) in list"> <td><input type="checkbox" v-model="box" :value="item.Id"/></td> <td>{{item.Name}}</td> <td>{{item.Address}}</td> <td>{{item.Temperature}}</td> <td>{{(item.When?"早班":"晚班")}}</td> <td>{{item.Shift}}</td> <td>{{item.Timet}}</td> <td><a href="#" v-on:click="BianShu(item.Id)">編輯</a></td> </tr> </table> <div> <a href="#" v-on:click="Page('F')">首頁</a> <a href="#" v-on:click="Page('P')">上一頁</a> <a href="#" v-on:click="Page('L')">下一頁</a> <a href="#" v-on:click="Page('N')">尾頁</a> </div> </div> <script> let app = new Vue({ el: "#app", //屬性 data() { return { list: [], xiala:[], name: "", shift:0, pageindex:1, pagesize:4, totalcount: 0, totalpage: 0, All: false, box:[], } }, methods: { //載入顯示資料 PageShow() { axios.get('/User/GetShow?name=' + this.name + '&shift=' + this.shift + '&pageindex=' + this.pageindex + '&pagesize=' + this.pagesize + '').then(res => { this.list = res.data.Date this.totalcount = res.data.TotalCount; this.totalpage = res.data.TotalPage; }) }, //載入下拉框資料 XiaLa() { axios.get('/User/GetXiaLa').then(res => { this.xiala = res.data this.xiala.unshift({ "NId": "0", "Shift": "請選擇" }); }) }, //分頁 Page(op) { switch (op) { case 'F': this.pageindex = 1; break; case 'P': this.pageindex = this.pageindex <= 1 ? this.pageindex : this.pageindex - 1; break; case 'N': this.pageindex = this.pageindex >= this.totalpage ? this.pageindex : this.pageindex + 1; break; case 'L': this.pageindex = this.totalpage; break; } this.PageShow(); }, //全選/反選 Xuan() { if (!this.All) { for (var i = 0; i < this.list.length; i++) { this.box.push(this.list[i].Id); } } else { this.box = []; } }, //批量修改 PiLiangUp() { if (confirm("確定修改嗎?")) { axios.get('/User/PiLianUp', { params: { duan: this.box.toString(), when: false, } }).then(res => { if (res.data > 0) { alert("修改成功"); this.PageShow(); } else { alert("修改失敗"); } }) } }, //批量刪除 PiLiangDel() { if (confirm("確定刪除嗎?")) { axios.get('/User/PiLianDel?ids=' + this.box.toString()).then(res => { if (res.data > 0) { alert("刪除成功"); this.PageShow(); } else { alert("刪除失敗"); } }) } }, //編輯資料 BianShu(id) { location.href = '/User/Eid?id=' + id; } }, //文件就緒函式 created: function (){ this.PageShow(); this.XiaLa(); } }) </script>
三、編輯頁面資料+修改操作
1、Dal層資料操作
//編輯資料 public UserModel BianJi(int id) { return db.UserModels.FirstOrDefault(p => p.Id == id); } //修改資料 public int Update(UserModel sun) { db.Entry(sun).State = System.Data.Entity.EntityState.Modified; return db.SaveChanges(); }
2、Bll層資料操作
//編輯資料 public UserModel BianJi(int id) { return dal.BianJi(id); } //修改資料 public int Update(UserModel sun) { return dal.Update(sun); }
3、控制器操作
//修改頁面 public ActionResult Eid() { return View(); } //編輯顯示資料功能 [HttpGet] public ActionResult BianJi(int id) { return Json(bll.BianJi(id),JsonRequestBehavior.AllowGet); } //修改資料功能 [HttpPost] public ActionResult Update(UserModel sun) { return Json(bll.Update(sun),JsonRequestBehavior.DenyGet); }
4、頁面修改操作
<script src="~/Scripts/vue.js"></script> <script src="~/Scripts/axios.js"></script> <div id="app"> <table class="table table-hover"> <tr> <td>姓名:</td> <td> <input type="text" v-model="fate.Name" /> </td> </tr> <tr> <td>家庭住址:</td> <td> <input type="text" v-model="fate.Address" /> </td> </tr> <tr> <td>測量體溫:</td> <td> <input type="text" v-model="fate.Temperature" /> </td> </tr> <tr> <td>測量時段:</td> <td> <input type="radio" v-model="fate.When" value="true" />早班 <input type="radio" v-model="fate.When" value="false" />晚班 </td> </tr> <tr> <td>當班班次:</td> <td> <select v-model="fate.ShiFtId"> <option v-for="(item,index) in XiaLaK" :value="item.NId">{{item.Shift}}</option> </select> </td> </tr> <tr> <td>測量日期:</td> <td><input type="date" v-model="fate.Time" /></td> </tr> <tr> <td></td> <td> <input type="button" value="編輯" v-on:click="jia" /> <input type="button" value="取消" onclick="location.href='/User/Index'" /> </td> </tr> </table> </div> <script> var id = location.search.substring(4); let app = new Vue({ el: "#app", data() { return { fate: { Id:0, Name: '', Address: '', Temperature: '', When: 'true', ShiFtId: '1', Time: '', }, XiaLaK: [], } }, methods: { //修改 jia() { axios.post('/User/Update', this.fate).then(res => { if (res.data > 0) { alert("修改成功"); location.href = '/User/Index'; } else { alert("修改失敗"); } }) }, //下拉框 XiaLa() { axios.get('/User/GetXiaLa').then(res => { this.XiaLaK = res.data }) }, //載入編輯 Biaji() { axios.get('/User/BianJi?id=' + id).then(res => { this.fate.Id = id; this.fate.Name = res.data.Name; this.fate.Address = res.data.Address; this.fate.Temperature = res.data.Temperature; this.fate.When = res.data.When; this.fate.ShiFtId = res.data.ShiFtId; this.fate.Time = res.data.Timet; }) }, }, //文件就緒函式 created: function () { this.XiaLa(); this.Biaji(); } }) </script>
待續......