使用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="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; }); }, 1000); }); </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 = 0; i < rnd.Next(40,200); i++) { list.Add(new Users { name = "新人" + i, pwd = rnd.Next(100) + "" }); } return Json(list,JsonRequestBehavior.AllowGet); }