MVC + Vue.js 初體驗(實現表單操做)

時間 2019-12-11

標籤 mvc vue.js vue 體驗實現表單欄目 JavaScript 简体版

原文原文鏈接

Vuejsjavascript

http://cn.vuejs.org/css

Vue.js（讀音 /vjuː/, 相似於 view）是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。html

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。前端

DEMO效果vue

前端源碼java

@{
    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>

後臺源碼ajax

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; }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。