VUE 前后台交互 （vue学习二）

VUE前后台交互，我使用的是jquery的脚本，既然它能完成任务，就不再用其它脚本库了。另外在返回值时，就直接返回VUE的数据对象，不再重新构造参数，这样使用VUE才有意义。

接前一篇例子：

后台的方法：

[HttpPost]

   //保存学生信息，实际原值返回
        public JsonResult SaveStudentInfo(StudentManager.StudentModule stu)
        {
            var res = new JsonResult();
            res.Data = stu;
            res.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return res;
        }

//module结构

public class StudentManager
    {
        public class StudentModule
        {

            //注意，get和set属性设置器不能少，否则将不能从前台传递的参数取到值
            public string stu_name { get; set; }
            public string stu_no { get; set; }
            public string grade { get; set; }
            public string sex { get; set; }
            public List<NameValue> sex_list;
            public List<NameValue> grade_list;
        }

}

前台View中的js：

 var stuObj = eval(@Html.Raw(ViewBag.JSON));
     const StudentInfoObj = {
        data() {
            return {

                todos:[]
            }
         },
         created() {             
             this.Init();
        },
         methods: {
             Init: function () {
                 this.GetAllStudents();
             },
             GetAllStudents: function () {
                 var _self = this;
                 $.ajax({
                     url: "/VueTest/GetAllStudents",
                     success: function (res) {                         
                         _self.todos = res;                       
                     }
                 })
             },
             SaveStudentInfo: function (grade_v, sex_v) {
                 var _self = this;             
                 
                 $.ajax({
                     url: "/VueTest/SaveStudentInfo",
                     data: _self.todos,    //触发后直接提交todos数据对象，无需再拼接字串或构造对象                 
                     type:"post"
                 });
                 
             }
         }
    }

前台View中控件和数据的绑定：

            <td>年级</td>
            <td>
                <select id="grade" name="grade" v-model="todos.grade">
                    
                    <option v-for="item in todos.grade_list" :id="'grade_'+item.NV"  :value="item.NV" >{{item.NA}}</option>
                </select>
            </td>

<input class="form-control" type="text" name="stu_name" id="stu_name" v-model="todos.stu_name" />

<td>性别</td>
            <td>
                <ul id="lstSex">
                    <li v-for="item in todos.sex_list" >
                        <input type="radio"  
                               v-bind:id="'sex_'+item.NV" 
                               v-bind:value="item.NV" 
                               v-model="todos.sex"
                               name="sex" /> {{ item.NA }}
                    </li>
                </ul>
            </td>

前台View中的“更新”按钮

<input type="submit" value="更新" v-on:click="SaveStudentInfo()"/>

这样在点下按钮后，后台从对象就可以直接提取前台传递过来的参数值：SaveStudentInfo(StudentManager.StudentModule stu)