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开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
随机推荐
- cinder /etc/lvm/lvm.conf 注意点
在cinder节点,cinder-volume使用的磁盘(/dev/sdb),需要在/etc/lvm/lvm.conf中配置: devices {...filter = [ "a/sdb/& ...
- nginx 红黑树详解
1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...
- openstack controller ha测试环境搭建记录（一）——操作系统准备
为了初步了解openstack controller ha的工作原理,搭建测试环境进行学习. 在学习该方面知识时,当前采用的操作系统版本是centos 7.1 x64.首先在ESXi中建立2台用于测试 ...
- Nutch是个不错的选择
对搜索引擎的理解:我们并没有google 的源代码,因此学习搜索引擎Nutch是个不错的选择.了解一个大型分布式的搜索引擎如何工作是一件让人很受益的事情.在写 Nutch的过程中,从学院派和工业派借鉴 ...
- HTML学习（六）图像
图像标签(<img>)和源属性(Src)在 HTML 中,图像由 <img> 标签定义.<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签.要在页面上显 ...
- 利用智能手机(Android)追踪一块磁铁（转）
利用智能手机(Android)追踪一块磁铁(一) 利用智能手机(Android)追踪一块磁铁(二) 利用智能手机(Android)追踪一块磁铁(三)
- Bash中的变量
Bash中的变量1.用户定义的变量变量的定义 用户定义的变量有字母数字及下划线组成,并且变量名的第一个字符不能为数字. 与其它UNIX名字一样,变量名是大小写敏感的. 对于变量 ...
- realvnc viewer 5.3.2无需输入用户名和密码访问远程桌面
我从https://www.realvnc.com/download/viewer/下载了realvnc viewer用于访问远程的Linux桌面,这个版本不需要安装,直接运行就可以了.但在访问远程桌 ...
- 中国产品众筹NO.1诞生
中国产品众筹NO.1诞生 淘宝众筹打响新拐点之战 http://bbs.taobao.com/catalog/thread/508895-317240623.htm?spm=1.7274553.199 ...
- IOS开发－UI学习－NSBundle和NSURL的区别（读取文件以及写入文件）
NSBundle和NSURL的区别: 在项目的工程中添加一个文件,本例程添加的是aa.txt,文件的内容为百度: www.baidu.com,现在要使用NSBundle和NSURL分别去获取内容,代码 ...