AngularJS

  • AngularJS 通过新的属性和表达式扩展了 HTML。
  • AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
  • AngularJS 学习起来非常简单

http://www.runoob.com/angularjs/angularjs-tutorial.html

DEMO效果

MVC 页面代码

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="testApp" ng-controller="myCtrl">
<table border="0">
<tr class="textCenter">
<td style="width: 100px;">姓名</td>
<td style="width: 60px;">年龄</td>
<td style="width: 200px;">课程</td>
</tr>
<tr data-ng-repeat="student in StudentList">
<td>
{{student.Name}}
</td>
<td>
{{student.Age}}
</td>
<td>
<div ng-repeat="x in student.Courses">{{x.Name}}</div>
</td>
<td>
<input type="button" data-ng-click="deleteStudent(student)" value="删除" />
</td>
</table>
<form name="myForm">
<table>
<tr>
<td style="width: 50px;">姓名:</td>
<td>
<input type="text" data-ng-model="newStudent.Name" ng-minlength="1" required />
</td>
</tr>
<tr>
<td style="width: 50px;">年龄:</td>
<td>
<input type="number" data-ng-model="newStudent.Age" />
</td>
</tr>
<tr>
<table class="js_addcourses">
<tr ng-repeat="x in newStudent.Courses"><td style="width: 50px;">课程{{$index + 1}}:</td><td><input type="text" data-ng-model="x.Name" ng-minlength="1" required /></td></tr>
</table>
</tr>
<tr>
<td colspan="2" style="text-align: right;">
<input type="button" data-ng-click="addCourses()" value="添加课程" />
<input type="submit" ng-disabled="myForm.$invalid" data-ng-click="addStudent(newStudent)" value="添加" />
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var app = angular.module('testApp', []);
app.controller('myCtrl', function ($scope, dataService) {
//初始化
$scope.init = function () {
//初始化新增学生对象实体
$scope.newStudent = {};
$scope.newStudent.Courses = [];
//初始化已有学生对象实体
$scope.StudentList = [];
$scope.addCourses();
dataService.loadStudentData().then(function (response) {
$scope.StudentList = response;
});
};
//添加
$scope.addStudent = function (newStudent) {
dataService.addStudent(newStudent).then(function (response) {
//添加成功
if (response.Code == 1) {
$scope.init();
}
else {
alert(response.Msg);
}
});
return false;
};
//动态添加班级
$scope.addCourses = function () {
$scope.newStudent.Courses.push({ Name: "" });
};
$scope.deleteStudent = function (student) {
dataService.deleteStudent(student).then(function (response) {
if (response.Code == 1) {
$scope.init();
}
else {
alert(response.Msg);
}
});
};
//执行初始化方法
$scope.init();
});
app.factory('dataService', function (studentService, $q) {
var service = {};
service.loadStudentData = function () {
//异步处理
var defer = $q.defer();
studentService.loadStudents().then(function (response) {
defer.resolve(response.data);
});
return defer.promise;
};
service.addStudent = function (newStudent) {
//异步处理
var defer = $q.defer();
studentService.addStudent(newStudent).then(function (response) {
defer.resolve(response.data);
});
return defer.promise;
};
service.deleteStudent = function (student) {
//异步处理
var defer = $q.defer();
studentService.deleteStudent(student).then(function (response) {
defer.resolve(response.data);
});
return defer.promise;
};
return service;
});
app.factory('studentService', function ($http) {
var service = {};
service.loadStudents = function () {
return $http.get("/Home/GetAllStudent");
};
service.addStudent = function (newStudent) {
return $http.post("/Home/AddStudent", newStudent);
};
service.deleteStudent = function (student) {
return $http.post("/Home/DeleteStudent", { name: student.Name });
};
return service;
}); </script>
</body>
</html>

控制器代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace Test.AngularJS.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 + AngularJS 初体验(实现表单操作)的更多相关文章

  1. js控制表单操作的常用代码小结

    收集了一些在WEB前台开发中常用的一些控制表单操作函数. 1.鼠标经过时自动选择文本鼠标划过自动选中:<input type="text" value="默认值&q ...

  2. 不可错过的10个超棒jQuery表单操作代码片段

    jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...

  3. angularJs初体验,实现双向数据绑定!使用体会:比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  4. MVC + Vue.js 初体验(实现表单操作)

    Vuejs http://cn.vuejs.org/ Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  5. AngularJS初体验

    最近突然发现,Coding.net真是一个神奇的网站.这各网站90%的请求都是通过ajax完成的.可以发现,不管你点任何链接,网页都不会刷新,点击浏览器的返回或前进按钮也是这样,打开chrome的开发 ...

  6. 10 个实用的 jQuery 表单操作代码片段

    jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...

  7. 10个超棒jQuery表单操作代码片段

    jQuery绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的javascript,在今天这篇代码片段分享文章中,这里 ...

  8. asp.net mvc 5 初体验

    参考:http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started 1. 新建 ASP.Net Web 应用程序,跟着向导一路 ...

  9. spring mvc 之初体验

    Spring MVC最简单的配置 配置一个Spring MVC只需要三步: 在web.xml中配置Servlet: 创建Spring MVC的xml配置文件: 创建Controller和View &l ...

随机推荐

  1. Restful based service 的跨域调用

    1.关于跨域, w3c的官方文档:https://www.w3.org/TR/cors/ 2.有时间再整理吧. <html> <head> <script src=&qu ...

  2. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  3. 【poj解题】3663

    排序, 遍历,需要裁减 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX ...

  4. LintCode 11 二叉查找树的搜索区间

    题目链接:http://www.lintcode.com/zh-cn/problem/search-range-in-binary-search-tree/ 1.描述 给定两个值 k1 和 k2(k1 ...

  5. The 2014 ACMICPC Asia Regional Shanghai Online

    XorZip小队第一次合作,虽然结果还是有些可惜,但是状态和感觉都还不错. [A]数论+二分(-_-///) [B]Lucas定理+数位DP(-_-///) [C]LCA.LCT+树链剖分 [D]题目 ...

  6. cookie讲解-------浏览器种cookie

    1  responce添加Set-Cookie参数: http request的返回responce为: [('Content-Type', 'application/x-javascript'), ...

  7. openstack controller ha测试环境搭建记录(九)——配置nova(计算节点)

    编辑所有节点的/etc/hosts:10.0.0.14 controller110.0.0.12 controller210.0.0.13 controller310.0.0.10 myvip10.0 ...

  8. Spring自学教程-AOP学习(五)

    Spring中的AOP 一.概述 (一)基本概念 1.什么是AOP?     面向方面编程.所谓方面即是指日志.权限.异常处理.事务处理等. 2.AOP的3个关键概念    (1)切入点(Pointc ...

  9. JQuery实现超链接鼠标提示效果

    一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...

  10. realvnc viewer 5.3.2无需输入用户名和密码访问远程桌面

    我从https://www.realvnc.com/download/viewer/下载了realvnc viewer用于访问远程的Linux桌面,这个版本不需要安装,直接运行就可以了.但在访问远程桌 ...