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开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
随机推荐
- ecostore搜索注意事项
ecostore搜索时会把特殊字符转换为相应的文字 如 洋河480ml_52°天之蓝 进行html url编码时会把_(下划线)转换成%25xia%25(%25对应的ascii是%) 搜索时会把%.x ...
- Xcode之Alcatraz
Alcatraz的安装和使用 转发:http://www.cnblogs.com/wendingding/p/4964661.html 一.简单说明 Alcatraz 是一款 Xcode的插件管理工具 ...
- vm10虚拟机安装Mac OS X10.10教程
VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift . 最近WWDC放出终极大招——新的编程语言Swift(雨燕),导致一大波程序员的 ...
- extJS4.2.0 Json数据解析,嵌套及非嵌套（二）
Ext.data.reader.Reader Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Rea ...
- PAT (Advanced Level) 1001. A+B Format (20)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...
- Java模拟post提交表单数据
package test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOExcep ...
- PHP的几种排序算法的比较
这里列出了几种PHP的排序算法的时间比较的结果,,希望对大家有所帮助 /* * php 四种排序算法的时间与内置的sort排序比较 * 3000个元素,四种算法的排序所用的时间比较 * 冒泡排序 85 ...
- CKeditor使用js验证不得为空
if (CKEDITOR.instances.TextArea1.getData() == '') { alert('警告:详细内容不得为空!'); CKEDITOR.instances.TextAr ...
- MySQL的IP处理函数inet_aton()和inet_ntoa()
给出一个作为字符串的网络地址的"点地址"(如127.0.0.1)表示,返回一个代表该地址数值的整数.地址可以是4或8比特地址. mysql> SELECT inet_aton ...
- LPC1788的EMC驱动norflash
Norflash型号为sst39vf32 #ifndef __NORFLASH_H_ #define __NORFLASH_H_ #include "common.h" #incl ...