问题
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>
<asp:Button ID="btnSearch" runat="server" class="btn btn-primary" OnClick="btnSearch_Click1" Text="Search Student" Width="170px" />
<asp:Button ID="btnClearTxt" runat="server" class="btn btn-primary" Text=" Clear Text" Width="170px" />
</div>
Page load working fine
button clicked result
回答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)
{
}
回答2:
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.
来源：https://stackoverflow.com/questions/42747396/how-to-reload-ng-repeat-when-i-clicked-button-asp-net-angularjs