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(-1, "error"), JsonRequestBehavior.AllowGet);
            }
            students.Add(student);
            return Json(new ReturnCode(1, "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(1, "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; }
    }
}

 

posted @ 2017-01-20 11:05  释迦苦僧  阅读(16261)  评论(3)  编辑  收藏  举报