.net MVC中使用angularJs刷新页面数据列表
使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/angularjs.js"></script>
<style>
.bg {
background: #0094ff;
}
.red {
background: red;
}
</style>
</head>
<body ng-app="myM">
<div ng-controller="myC">
<div>
<table class="table table-responsive" style="width:300px;">
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module("myM", []);
app.controller("myC", function ($scope, $interval, $http) {
$scope.list = [];
$interval(function () {
$.get("/home/data", {}, function (data) {
$scope.list = data;
});
}, );
});
</script>
</body>
</html>
public ActionResult data()
{
// if (user.name == "admin" && user.pwd == "admin")
// {
// return Content("ok");
// }
// else List<Users> list = new List<Users>();
Random rnd = new Random();
for (int i = ; i < rnd.Next(,); i++)
{
list.Add(new Users { name = "新人" + i, pwd = rnd.Next() + "" });
}
return Json(list,JsonRequestBehavior.AllowGet);
}
.net MVC中使用angularJs刷新页面数据列表的更多相关文章
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- AngularJs 刷新页面
第一种: AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$window,然后定义函数$scope.reloadRoute,在需要刷新页面的地方调用函数$scope.reloadRo ...
- ASP.NET Web Form和MVC中防止F5刷新引起的重复提交问题
转载 http://www.cnblogs.com/hiteddy/archive/2012/03/29/Prevent_Resubmit_When_Refresh_Reload_In_ASP_NET ...
- vue主动刷新页面及列表数据删除后的刷新方法
在继刷新当前页面,重载页面数据那篇之后 那一篇 深入理解数据驱动 以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重. 1. 获取列表方法 2.重新获取数据 3.这样再次调 ...
- MVC 中引用Angularjs
首先在Maname NuGet Packages中 安装相应的包,我用的是作者为 AngualrJS Team的 随后在相应的Scripts中会出现对应文件. 如果只在某一个页面中使用Angualrj ...
- knockoutjs中使用mapping插件绑定数据列表
使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的 ...
- 在ASP.NET MVC中使用Juqery实现页面局部刷新
自己做的一个实验,留作备忘,此实例包括扩一下几个文件: 1.MyMovieController.cs 2.Index.aspx 3.ViewUserControl1.ascx 4.movie类 其中M ...
随机推荐
- 20155209林虹宇虚拟机的安装及一点Linux的学习
预备作业3 虚拟机的安装 首先,我先了解了一下Linux和安装虚拟机的有关常识. Linux:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支 ...
- 2017-2018-1 20155339 第十一周加分项Linux下Mypwd的实现
2017-2018-1 20155339 第十一周加分项Linux下Mypwd的实现 学习pwd命令 通过man命令查看pwd命令的功能 由图可知pwd命令的用途是显示工作目录的路径名称.pwd 命令 ...
- 【转载】从零实现3D图像引擎:(1)环境配置与项目框架
原文:从零实现3D图像引擎:(1)环境配置与项目框架 0. 要学懂3D程序设计,必然要精通3D相关的线性代数.3D几何.复分析等相关知识,我也因为如此才开始这个博客系列的写作,不自己实现,就不是自己的 ...
- idea css文件不识别的问题的解决方案
可以看到 progressBar不识别 发现仅仅是这一个文件名不识别 所以换一个任意别的文件名即可识别
- JQuery事件机制
1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$ ...
- Spring学习(二)-----eclipse新建spring项目
一:准本工作(下载需要的jar包) 1.下载准备Spring-framework-4.2.0 链接为: http://repo.springsource.org/libs-release-local/ ...
- dalao自动报表邮件2.0
经过昨天的修改优化后,dalao收到了不是“木马”的邮件,欣慰地点了点头,“不错,不错,这几张表设计的简洁明了,看着有货!不过呀,,,这些表的数据太多了一点,十几天的数据一大溜,能不能再简洁一点,做一 ...
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
- cinder的组件
跟nova相似,cinder也有很多组件,每个组件负责各自的业务,然后共同协作完成volume的管理.组件之间的通信方式与nova个组件之间的通信方式相同,都是通过消息队列进行通信. cinder-a ...
- centos7.2下解决用Mysql 使用navicate远程连接数据库出现1045 access denied for user 'root'@'localhost' using password yes
在mysql命令行中执行 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('123456'); GRANT ALL PRIVILEGES ON *.* ...