Vue的增删改查+批量删除+批量修改状态操作

重点:将你添加实体模型的那一层的引用中的

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>

     

      待续......