当前位置：首页 > news >正文

.net MVC中使用angularJs刷新页面数据列表

news 来源：原创 2024/4/25 17:21:22

使用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;
                });
            }, 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);
        }