首页 > 代码库 > MVC + Vue.js 初体验(实现表单操作)
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; } } }
MVC + Vue.js 初体验(实现表单操作)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。