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开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
随机推荐
- winutils spark windows installation
http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation
- [iOS]C语言技术视频-08-结构体的定义
下载地址: 链接: http://pan.baidu.com/s/1dlEFW 密码: 9e5u
- 2014非专业知识学习---be smart
非专业部分--构建人生 以书籍和网易公开课为主 (1)理财&投资 基金投资相关,好的书籍? (2)哲学总览 <公正>这个看了大半,需要总结归纳. (必选) 同时结合哲学史,归纳西 ...
- tempnam问题
tempnam()函数创建一个具有唯一文件名的临时文件 若成功,则返回新的临时文件名,若失败,则返回false 失败原因 c:\windows\temp文件夹不具备读写权限(即 不是超级管理员)
- sublime text 配置文件中文说明
原文地址:http://www.feelcss.com/sublime-text-2-settings.html // While you can edit this file, it's best ...
- 【POJ2104】【HDU2665】K-th Number 主席树
[POJ2104][HDU2665]K-th Number Description You are working for Macrohard company in data structures d ...
- 3、手把手教你Extjs5(三)MVVM特性的简单说明
下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main. ...
- MySQL show master / slave status 命令参数
一.show master status 二.show slave status Slave_IO_State SHOW PROCESSLIST输出的State字段的拷贝.SHOW PROCESSLI ...
- NRF24L01无线通讯模块驱动
NRF24L01 无线模块,采用的芯片是 NRF24L01,该芯片的主要特点如下: )2.4G 全球开放的 ISM 频段,免许可证使用. )最高工作速率 2Mbps,高校的 GFSK 调制,抗干扰能力 ...
- [MySQL]mysql指定路径启动
/usr/sbin/mysqld --defaults-file=/etc/mysql/my.cnf --basedir=/usr --datadir=/var/lib/mysql --pid-fil ...