MVC + Vue.js 初体验(实现表单操作)
Vuejs
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 初体验(实现表单操作)的更多相关文章
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- vue.js——初体验
看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...
- Laravel 5.4+Vue.js 初体验：Laravel下配置运行Vue.js
生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...
- node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
- js控制表单操作的常用代码小结
收集了一些在WEB前台开发中常用的一些控制表单操作函数. 1.鼠标经过时自动选择文本鼠标划过自动选中:<input type="text" value="默认值&q ...
- 范仁义web前端介绍课程---4、html、css、js初体验
范仁义web前端介绍课程---4.html.css.js初体验 一.总结 一句话总结: html:就是网站的骨架,比如div标签.a标签等 css:style标签或者style属性里面的就是css j ...
- 不可错过的10个超棒jQuery表单操作代码片段
jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...
- Knockout.js初体验
前不久在网上看到一个轻量级MVVM js类库叫Knockout.js,觉得很好奇,搜了一下Knockout.js相关资料,也初体验了一下,顿时感觉这个类库的设计很有意思.接下来就搞清楚什么是Knock ...
- ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
随机推荐
- sqlDataAdapter的FillSchema用法
摘自于网络:http://blog.csdn.net/bupt_zoucq/article/details/6653385 FillSchema是用来向DataTable中填入详细的元数据信息的,例如 ...
- 网页解析的全过程(输入url到展示页面)
1.用户输入网址,浏览器发起DNS查询请求 用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址. 域名解析服务器是基于UDP协议实现的一个应用程序,通常通过监听53端口来 ...
- PAT (Advanced Level) 1009. Product of Polynomials (25)
简单模拟. #include<iostream> #include<cstring> #include<cmath> #include<algorithm&g ...
- 如何理解java的引用传递
1. 数组的引用传递 public class TestArray { public static void changeAry1(int[] ary){ int[] ary1 = {9,9,9}; ...
- 编码器芯片MLX90363的使用
文档资料 MLX90363 Datasheet MLX90363 Application Note 使用 对于编码器来说,Rotary Application模式 SPI驱动中,CS必须在8个字节都发 ...
- memcached 第二篇----安装使用
摘要:set add replace get delete gets cas stats 和 flush_all 命令 获取所有key .你可以使用MemCachedClient的statsItem ...
- 如何实现简单的位数组(bit array)（转）
源:如何实现简单的位数组(bit array) 在 comp.lang.c 上面看到一则不错的 FAQ,<How can I implement sets or arrays of bits?& ...
- Servlet实现文件上传（简单）（一）
1..使用到的jar包,为apache的一个子项目 此commons-fileupload-1.2.2需要以下commons-io-2.0.1的支持 2.页面展示fileUpload.jsp ...
- Online Schema Change for MySQL
It is great to be able to build small utilities on top of an excellent RDBMS. Thank you MySQL. This ...
- RabbitMQ消息队列（四）：分发到多Consumer（Publish/Subscribe）
上篇文章中,我们把每个Message都是deliver到某个Consumer.在这篇文章中,我们将会将同一个Message deliver到多个Consumer中.这个模式也被成为 "pub ...