refresh angular data asp net webservice

All we need is an easy explanation of the problem, so here it is.

I’m starting to learn angularJS in asp net so i can implement some data binding that is refresh every x time async and avoid using update panels. I managed to get the databinding to work, here is my code.

    <head runat="server">
    <title></title>

    <script src="Scripts/angular.min.js"></script>  

    <script>

        var app = angular.module("myModule", []).controller("myController",
            function($scope, $http) {

  $http.get("UsersService.asmx/GetAllUsers").then(function(response) {

                    $scope.users = response.data;

                });
            });

    </script>

</head>
<body ng-app="myModule">
    <form id="form1" runat="server">
    <div ng-controller="myController">

       <table>
           <thead>
               <tr>
                   <th>ID</th>
                   <th>Username</th>
                   <th>Password</th>
                   <th>LastLogin</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="user in users">
                   <td>{{ user.ID }}</td>
                   <td>{{ user.Username }}</td>
                   <td>{{ user.Password }}</td>
                   <td>{{ user.LastLogin }}</td>
               </tr>
           </tbody>
       </table>

    </div>
    </form>
</body>
</html>

and the webservice

        [WebMethod]
        public void GetAllUsers()
        {
            List<User> listUsers = new List<User>();
            string cs = ConfigurationManager.ConnectionStrings["AngularJS_ConnectionString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM Users", con))
            {
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        User user = new User();
                        user.ID = Convert.ToInt32(sdr["UserID"]);
                        user.Username = sdr["Username"].ToString();
                        user.Password = sdr["Password"].ToString();
                        user.LastLogin = sdr["LastLogin"] as DateTime?;
                        listUsers.Add(user);
                    }
                }
            }

            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(listUsers));
        }

My question is, how can i for example, make it so that the webservice is called every x time and refreshed on the page using ajax and angular js?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Use setInterval in javascript

//first argument is function to call in interval
setInterval(function () {
    $http.get("UsersService.asmx/GetAllUsers").then(function (response) {

        $scope.users = response.data;
    }
}, 1000); //milliseconds

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Tags: , , ,

Leave a Reply