1

你會如何將數據代碼傳遞給angularjs變量。它在頁面加載時工作正常。但是當我點擊按鈕時,用於篩選數據。服務器端不加載數據。如何重新加載ng-repeat當我點擊按鈕asp.net(angularjs)

$ scope.studentinformation = <%= studentattendancejson%>

C#代碼:

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

+0

你介意將您Page_OnLoad事件,或當你設置的第一次'studentattendancejson'? –

+0

我編輯我的問題,我正在使用Page_Load事件 –

+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) 
     { 
     } 
+0

太棒了。感謝您提供幫助他人的答案。請不要忘記將其標記爲「已接受」的答案。 –

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); 
    } 
} 

希望這有助於。需要幫助請叫我。

+0

我加了這個,但是...當頁面加載它的工作正常,但是當我點擊按鈕的過濾器數據它不加載ng-repeat –

+0

這是因爲'Page_Load'總是運行,即使你點擊按鈕。當你點擊按鈕時,按鈕點擊事件觸發,然後'Page_Load'事件運行。這只是它的工作方式。 –

+0

我編輯上面的問題添加如果(!IsPostBack){}加載事件...但當我點擊搜索按鈕...但同樣的屏幕顯示... ng - 重複不加載我的過濾器數據 –

相關問題