当我点击按钮asp.net(angularjs)

时间:2017-03-12 12:29:55

标签: javascript asp.net angularjs angularjs-scope angularjs-ng-repeat

如何将数据代码传递给angularjs变量。页面加载时工作正常。但是,当我单击按钮时,对于过滤数据。服务器端不加载数据。

  

$ scope.studentinformation =<%= studentattendancejson%>

c#c​​ode:

 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代码:

//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>

页面加载正常 enter image description here

按钮点击结果 enter image description here

2 个答案:

答案 0 :(得分:1)

最后我解决了我的问题:)

 $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
  $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)
        {
        }

答案 1 :(得分:0)

每次页面回发时,

Page_Load都会作为页面生命周期中的最后一个事件运行。因此,当您单击按钮时,页面会回发并btnSearch_Click1事件触发,然后Page_load事件将运行。您需要按如下方式修改Page_Load事件,因此不会覆盖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);
    }
}

希望这会有所帮助。如果您还有其他需要,请告诉我。