1

variablejにどのようにデータコードを渡しますか?ページが読み込まれたときに正常に動作します。しかし、ボタンをクリックすると、フィルターデータが表示されます。サーバー側はデータをロードしません。ボタンをクリックしたときに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 (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); 
            } 
           }); 
          } 
$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呼び出し

ASP.NET C#//

public static string GetEmployees(string title, string songname) 
     { 
     } 
+0

です。他人を助けるためのあなたの答えを含めてくれてありがとう。それを「受け入れられた」回答としてマークすることを忘れないでください。 –

0

Page_Load結果をクリックしたバックページのライフサイクルの最後のイベントの一つたびにページの記事として実行されます。したがって、ボタンをクリックすると、ページがポストバックし、btnSearch_Click1イベントが発生し、Page_loadイベントが実行されます。それはstudentattendancejsonが上書きされないようにするには、次のようにあなたのPage_Loadイベントを変更する必要があります。

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

私は上記の質問を編集if(!IsPostBack){}イベントをロード...しかし、私は検索ボタンをクリックした...しかし、同じ画面表示... ng-repeatは、フィルタデータを読み込まない –

関連する問題