1

How would you pass data code to angularjs variable. its working fine when the page loads. But when I click the button, for filter data. The server side does not load data.

$scope.studentinformation = <%= studentattendancejson %>

c# code:

 public static string studentattendancejson = string.Empty;

       protected void Page_Load(object sender, EventArgs e)
       {
        if (!IsPostBack)
        {
            string Query = "SELECT  ts.Idx, ts.student_name,ts.father_name,t.attendancedate,t2.class_name,tat.attendanceType FROM tblstudentattendence t " +
        "INNER JOIN  tblStudent  ts ON ts.student_id = t.student_id INNER JOIN tblclassinfo t2 ON t.class_id = t2.idx " +
        "INNER JOIN tblAttendanceType tat ON t.attendancetype_Id = tat.Idx";
            var getstudentattendance = DbAccess.GetResult(Query);
            studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);           
        }

    }
protected void btnSearch_Click1(object sender, EventArgs e)
        {
string Query = "Select * from tblstudent WHERE student_name = 'Adeel'";
 var getstudentattendance = DbAccess.GetResult(Query);

      studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
}

HTML\JavaScript\AngularJS code:

//Angularjs variable

<script type="text/javascript">
            var app = angular.module('myApp', []);
            app.controller('myCtrl', ['$scope', '$filter', function ($scope, $filter) {
                $scope.currentPage = 0;
                $scope.pageSize = 100;
                $scope.data = [];
                $scope.q = '';

                $scope.studentinformation = <%= studentattendancejson %>
                $scope.getData = function () {


                    return $filter('filter')($scope.studentinformation, $scope.q)

                }
                $scope.numberOfPages = function () {
                    return Math.ceil($scope.getData().length / $scope.pageSize);
                }


            }]);

            app.filter('startFrom', function () {
                return function (input, start) {
                    start = +start; //parse to int
                    return input.slice(start);
                }
            });

        </script>

 <tr ng-repeat="info in studentinformation| filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
                                                    <td>{{info.student_name}}</td>
                                                    <td>{{info.father_name}}</td>
                                                    <td>{{info.class_name}}</td>
                                                    <td>{{info.attendancedate | date:'dd-MM-yyyy'}}</td>
                                                    <td ng-if="info.attendanceType == 'Present'"> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-check"></i></td>
                                                     <td ng-if="info.attendanceType == 'Absent'"> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></td>
                                                     <td ng-if="info.attendanceType == 'Leave'"> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-list"></i></td>


                                                </tr>

                                          &nbsp;<asp:Button ID="btnSearch" runat="server" class="btn btn-primary" OnClick="btnSearch_Click1" Text="Search Student" Width="170px" />
                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                          <asp:Button ID="btnClearTxt" runat="server" class="btn btn-primary" Text=" Clear Text" Width="170px" />


                           </div>

Page load working fine enter image description here

button clicked result enter image description here

3
  • Do you mind adding your Page_OnLoad event, or whenever you set studentattendancejson for the first time? Commented Mar 12, 2017 at 15:20
  • i edit my question i am using Page_Load event Commented Mar 12, 2017 at 16:05
  • Thanks. I provided an answer below. Commented Mar 12, 2017 at 16:51

2 Answers 2

1

Finally I Solve my Problem :)

 $scope.myData.doClick = function () {

                        $http.post('abc.aspx/GetEmployees', { response: {} })
                         .then(function successCallback(response) {
                             $scope.studentinformation = {};

                             $scope.studentattendance = JSON.parse(response.data.d);

                         })
                          .error(function (response, status, headers, config) {
                              $scope.status = status;
                          });

                    }

//HTML

 <div ng-click="myData.doClick()">Click here</div>

//c#

 [WebMethod]
        public static string GetEmployees()
        {

           string Query "Select * from tblstudent WHERE student_name = 'Adeel'";
            var getstudentattendance = DbAccess.GetResult(Query);
            studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
            return studentattendancejson;
        }

Ajax call with parameter

  $scope.myData.doClick = function (item,event) {                             
                              var startdate = document.getElementById('txtstart').value;
                              var enddate = document.getElementById('txtend').value;
                              $.ajax({
                                  type: "POST",
                                  url: "studentattendance.aspx/GetEmployees",
                                  data: JSON.stringify({ title: startdate, songname: enddate}),
                                  contentType: "application/json; charset=utf-8",
                                  dataType: "json",
                                  success: function (msg) {
                                      $scope.studentattendance = {};
                                          $scope.studentattendance = JSON.parse(msg.d);
                                          $scope.$apply();

                                  },
                                  error: function (msg) {
                                      alert(msg.d);
                                  }
                              });
                          }

ASP.NET C#//

public static string GetEmployees(string title, string songname)
        {
        }
Sign up to request clarification or add additional context in comments.

1 Comment

Awesome. Thank your for including your answer to help others. Please don't forget to mark it as the "accepted" answer.
0

Page_Load is run as one of the last events in the page life cycle every time the page posts back. So, when you click the button the page posts back and the btnSearch_Click1 event fires and then the Page_load event runs. You need to modify your Page_Load event as follows, so it doesn't overwrite studentattendancejson:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack) {
        string Query = "SELECT  ts.Idx, ts.student_name,ts.father_name,t.attendancedate,t2.class_name,tat.attendanceType FROM tblstudentattendence t " +
       "INNER JOIN  tblStudent  ts ON ts.student_id = t.student_id INNER JOIN tblclassinfo t2 ON t.class_id = t2.idx " +
       "INNER JOIN tblAttendanceType tat ON t.attendancetype_Id = tat.Idx";
        var getstudentattendance = DbAccess.GetResult(Query);
        studentattendancejson = JsonConvert.SerializeObject(getstudentattendance, Formatting.Indented);
    }
}

Hope this helps. Let me know if you need anything else.

6 Comments

i add this but ...when page load its working fine but when i click button for filter data its not load ng-repeat
That's because Page_Load is always run, even when you click the button. When you click the button, the button click event fires, then the Page_Load event runs. That's just the way it works.
i edited above question add if (!IsPostBack){ } load event ... but when i clicked search button ... but same screen show...ng-repeat not load my filter data
Please add your button click HTML. Thanks!
added :) check please
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.