Vue的基本操作

dal層和資料遷移可以按照之前的方式進行，步驟還是一樣的。先創欄位再遷移，然後在寫dal的各種功能。

與Ajax不同的地方就是前臺操作，思維方式是很像的。

在控制器裡與ajax有不同的地方是：

 //新增檢視
        public ActionResult AddStudent()
        {
            return View();
        }
        //新增方法
        [HttpPost]
        public ActionResult Add(Student student)
        {
            
 
return Json(bll.Add(student), JsonRequestBehavior.DenyGet);
        }


        //顯示檢視
        public ActionResult ShowStudent()
        {
            return View();
        }

        [HttpGet]
        public ActionResult PageShow(string sname, int? nid, int pageindex = 1, int pagesize = 3)
        {
            
 
var list = bll.PageShow(sname, nid, pageindex, pagesize);
            return Json(list,JsonRequestBehavior.AllowGet);
        }

需要在方法後加入JsonRequestBehavior.AllowGet（如果是post方法需要換成JsonRequestBehavior.DenyGet）

新增-----

表單內容都需要寫在div中

el:"#div的id"

下拉框創一個數組，將資料傳到陣列中 在表單select中繫結 <select v-model="fromData.NId">中寫的對應欄位名稱" 在option中

<option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>

對應操作

複選框也需要創陣列

將傳過來的陣列進行分割傳入後臺

顯示---分頁--查詢--批刪--批改

@{
    ViewBag.Title = "EditStudent";
}
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/axios.js"></script>
<h2>EditStudent</h2>
<div id="app">
    <table class="table table-bordered">
        <tr>
            <td>學生姓名</td>
            <td>
                <input type="text" v-model="fromData.SName" value="" />
            </td>
        </tr>
        <tr>
            <td>學生班級</td>
            <td>
                <select v-model="fromData.NId">
                    <option v-for="(item,index) in selectItems" :value="item.NId">{{item.NName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>學生年齡</td>
            <td>
                <input type="text" name="name" v-model="fromData.Age" value="" />
            </td>
        </tr>
        <tr>
            <td>學生性別</td>
            <td>
                <input type="radio" name="name" v-model="fromData.Sex" value="true" /> 男
                <input type="radio" name="name" v-model="fromData.Sex" value="false" /> 女
            </td>
        </tr>
        <tr>
            <td>學生愛好</td>
            <td>
                <input type="checkbox" name="name" v-model="items" value="游泳" />游泳
                <input type="checkbox" name="name" v-model="items" value="跳水" />跳水
                <input type="checkbox" name="name" v-model="items" value="衝浪" />衝浪
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" name="name" value="修改" v-on:click="editStudent" />
            </td>
        </tr>
    </table>
</div>
<script>
    var id = location.search.substring(4);  //擷取ID

    let app = new Vue({
        el: "#app",  //掛載
        created: function () {  //鉤子函式   類似於 jQuery中 文件就緒函式的作用
            this.getSelect();  //呼叫已經寫好方法
            this.getById();
        },
        data() {
            return {
                //自定義物件名稱
                fromData: {
                    SId:0,
                    NId: "1",
                    SName: "",
                    Sex: "1",
                    Hobby: "",
                    Age: ""
                },
                selectItems: [],
                items:[]
            }
        },
        methods: {
            //載入下拉選單
            getSelect() {
                axios.get('/Student/GetClassList').then(res => {
                    this.selectItems =  res.data
                })
            },
            //新增資料
            editStudent() {
                this.fromData.Hobby = this.items.join(',');
                axios.post('/Student/Edit', this.fromData).then(res => {
                    if (res.data > 0) {
                        alert('修改成功');
                        location.href='/Student/ShowStudent'
                    } else {
                        alert('修改失敗');
                    }
                })
            },
            //修改資料
            getById() {
                axios.get('/Student/GetById?id='+id).then(res => {
                    this.fromData.SId = id;
                    this.fromData.NId = res.data.NId;
                    this.fromData.SName = res.data.SName;
                    this.fromData.Sex = res.data.Sex;
                    this.fromData.Hobby = res.data.Hobby;
                    this.fromData.Age = res.data.Age;

                    this.items = res.data.Hobby.split(',');  //讀出來的是字串 將 字串 傳給陣列
                })
            }
        },
        computed: {

        }
    })
</script>

詳情---修改