zoukankan      html  css  js  c++  java
  • .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="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);
            }
  • 相关阅读:
    读写分离
    使用xtrabackup对不同版本的mysql进行备份还原
    tomcat开启管理页面
    面试简单整理之rabbitmq
    面试简单整理之zookeeper
    面试简单整理之mybatis
    面试简单整理之spring、spring mvc
    面试简单整理之Redis
    记一次菜鸟的惊心动魄(另求原因和说明)
    面试简单整理之IO
  • 原文地址:https://www.cnblogs.com/lunawzh/p/6816882.html
Copyright © 2011-2022 走看看