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>

     

      待續......