MVC + Vue.js 初体验(实现表单操作)

Vuejs

http://cn.vuejs.org/

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

DEMO效果

前端源码

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title></title>

    @*基库*@

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    @*ajax支持*@

    <script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js"></script>

</head>

<body>

    <div id="demo">

        <table border="0">

            <tr class="textCenter">

                <td style="width: 100px;">姓名</td>

                <td style="width: 60px;">年龄</td>

                <td style="width: 200px;">课程</td>

            </tr>

            <tr v-for="x in studentList">

                <td>

                    {{x.Name}}

                </td>

                <td>

                    {{x.Age}}

                </td>

                <td>

                    <div v-for="cc in x.Courses">{{cc.Name}}</div>

                </td>

                <td>

                    <input type="button" v-on:click="DeleteStudent(x)" value="删除" />

                </td>

            </tr>

        </table>

        <form name="myForm">

            <table>

                <tr>

                    <td style="width: 50px;">姓名:</td>

                    <td>

                        <input type="text" v-model="newStudent.Name" />

                    </td>

                </tr>

                <tr>

                    <td style="width: 50px;">年龄:</td>

                    <td>

                        <input type="number" v-model="newStudent.Age" />

                    </td>

                </tr>

                <tr>

                    <table>

                        <tr v-for="(x,index) in newStudent.Courses"><td style="width: 50px;">课程{{index+1}}</td><td><input type="text" v-model="x.Name" /></td></tr>

                    </table>

                </tr>

                <tr>

                    <td colspan="2" style="text-align: right;">

                        <input type="button" v-on:click="addCourses()" value="添加课程" />

                        <input type="submit" v-on:click="addStudent()" value="添加" />

                    </td>

                </tr>

            </table>

        </form>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#demo",

            data: {

                studentList: [],

                newStudent: { Name: '', Age: '', Courses: [] }

            },

            methods: {

                GetAllStudent: function () {

                    var _self = this;

                    _self.studentList = [];

                    this.$http.get("/home/GetAllStudent").then(function (res) {

                        for (var i = 0; i < res.body.length; i++) {

                            _self.studentList.push(res.body[i]);

                        }

                    });

                },

                DeleteStudent: function (student) {

                    var _self = this;

                    _self.$http.post("/Home/DeleteStudent", { name: student.Name }).then(function (res) {

                        if (res.body.Code == 1) {

                            _self.GetAllStudent();

                        }

                        else {

                            alert(response.body.Msg);

                        }

                    });

                },

                addCourses: function () {

                    this.newStudent.Courses.push({ Name: "" });

                },

                addStudent: function () {

                    var _self = this;

                    _self.$http.post("/Home/AddStudent", _self.newStudent).then(function (res) {

                        if (res.body.Code == 1) {

                            _self.GetAllStudent();

                        }

                        else {

                            alert(response.body.Msg);

                        }

                    });

                    return false;

                }

            }

        });

        vm.GetAllStudent();

    </script>

</body>

</html>

后台源码

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

namespace Test.VueJS.Controllers

{

    /// <summary>

    /// coder 释迦苦僧

    /// </summary>

    public class HomeController : Controller

    {

        /// <summary>

        /// 静态

        /// </summary>

        public static List<Student> students = new List<Student>();

        //

        // GET: /Home/

        [HttpGet]

        public ActionResult Index()

        {

            return View();

        }

        /// <summary>

        /// 添加

        /// </summary>

        /// <param name="student"></param>

        /// <returns></returns>

        [HttpPost]

        public JsonResult AddStudent(Student student)

        {

            if (student == null)

            {

                return Json(new ReturnCode(-, "error"), JsonRequestBehavior.AllowGet);

            }

            students.Add(student);

            return Json(new ReturnCode(, "success"), JsonRequestBehavior.AllowGet);

        }

        /// <summary>

        /// 获取所有

        /// </summary>

        /// <returns></returns>

        [HttpGet]

        public JsonResult GetAllStudent()

        {

            return Json(students, JsonRequestBehavior.AllowGet);

        }

        /// <summary>

        /// 删除

        /// </summary>

        /// <returns></returns>

        [HttpPost]

        public JsonResult DeleteStudent(string name)

        {

            var student = students.FirstOrDefault(p => p.Name == name);

            if (student != null)

            {

                students.Remove(student);

            }

            return Json(new ReturnCode(, "success"), JsonRequestBehavior.AllowGet);

        }

    }

    /// <summary>

    /// 学生

    /// </summary>

    public class Student

    {

        /// <summary>

        /// 姓名

        /// </summary>

        public string Name { get; set; }

        /// <summary>

        /// 年龄

        /// </summary>

        public int Age { get; set; }

        /// <summary>

        /// 拥有的课程

        /// </summary>

        public List<Course> Courses

        {

            get;

            set;

        }

    }

    /// <summary>

    /// 课程

    /// </summary>

    public class Course

    {

        public string Name { get; set; }

    }

    /// <summary>

    /// 处理结果返回值

    /// </summary>

    public class ReturnCode

    {

        public ReturnCode(int code, string msg)

        {

            this.Code = code;

            this.Msg = msg;

        }

        public int Code { get; set; }

        public string Msg { get; set; }

    }

}

巴特西

MVC + Vue.js 初体验(实现表单操作)

最新文章

热门文章