asp.net中AngularJS+ashx的使用

<%@ Page Language="C#" MasterPageFile="~/temp.master" AutoEventWireup="true" CodeFile="temp.aspx.cs" Inherits="temp" Title="" %>

<asp:Content ID="Content_head" ContentPlaceHolderID="temphead" Runat="Server">
<title></title>

    <script type="text/javascript" src="../script/jquery-1.11.1.js"></script>

</asp:Content>
<asp:Content ID="Content_body" ContentPlaceHolderID="tempContent" Runat="Server">
    <div ng-app="gradeaddapp" ng-controller="gradeaddController">
        <div id="execCondition">
            <table>
                <tr style="height:40px">
                    <td align="left" colspan="1">学员账号：<input type="text" id="userName" /></td>
                    <td align="left" colspan="3">学员注册  
                    起始日期 <asp:TextBox ID="createDateFrom" runat="server" Width="80px"></asp:TextBox> 
                    截止日期 <asp:TextBox ID="createDateTo" runat="server" Width="80px"></asp:TextBox></td>
                    <td class="tc" colspan="4"><input type="button" id="execQuery" class="integralSearch" ng-click="execQuery()" /></td>
                </tr>
                <tr style="height:40px">
                    <td>成绩变更：<input type="text" id="gradeChange" /></td>
                    <td>变更原因：<asp:DropDownList ID="modifyReasons" runat="server" Width="140px"></asp:DropDownList></td>
                    <td><input type="button" id="allModify" class="allModify" ng-click="allModify()" /></td>
                    <td class="tc" colspan="4">
                        <asp:Button ID="batchUpload" runat="server" Text="" CssClass="batchUpload" OnClientClick="return fileUploadProcess()" />
                        <asp:FileUpload ID="fileUpload" runat="server" CssClass="controlDisplayNone" οnchange="fileChange()" />
                        <asp:Button ID="batchUpload2" runat="server" Text="" CssClass="controlDisplayNone" οnclick="batchUpload2_Click" />
                    </td>
                </tr>
            </table>
            <ajax:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="createDateFrom" Format="yyyy-MM-dd"></ajax:CalendarExtender>
            <ajax:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="createDateTo" Format="yyyy-MM-dd"></ajax:CalendarExtender>
        </div>
        <div id="resultShow">
            <div id="waitMessage"></div>
            <div id="smartpaginator" class="smartpaginator">
                <table id="mt" style="border:solid 1px #ccc">
                    <thead>
                        <tr><th></th><th>学员账号</th><th>学员成绩</th><th>变更成绩</th><th>变更原因</th></tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="x in members track by $index" on-Finish-Render-Filters>
                        <td style="width:14px"><input type="checkbox" ng-model="x.SelectedFlag" /></td>
                        <td><input type="text" ng-model="x.Name" class="inactive" readonly /></td>
                        <td><input type="text" ng-model="x.Currentgrade" class="inactive" readonly /></td>
                        <td><input type="text" ng-model="x.Grade" class="inactive" style="width:98%" /></td>
                        <td><select class="inactive" ng-model="x.Reason" ng-options="o.REASON_CODE as o.REASON_DESC for o in reasons" style="width:98%"></select></td>
                        <td style="display:none"><input type="text" ng-model="x.UserId" /></td>
                      </tr>
                    </tbody>
                </table>
                <div id="green"></div>
                <div>
                    <input type="button" id="confirmOk" class="confirmOk" ng-click="postgradeOk()" />
                    <input type="button" id="cancelAction" class="cancelAction" ng-click="cancelAction()" />
                    <input type="button" id="searchHistorygrade" class="searchHistorygrade" ng-click="searchHistory()" />
                </div>
            </div>
        </div>
        <div id="detailShow" class="controlDisplayNone">
        <span style="color:Blue">{{memmberUserName}}</span><div style="float:right"><input id="detailViewCancel" type="button" value="返回" /></div>
            <table id="mt2" style="border:solid 1px #ccc">
                <thead>
                    <tr style="background-color:#DFEFFF;border-color:inherit"><th>日期</th><th style="border-left:1px solid #fff">获得成绩</th><th style="border-left:1px solid #fff">成绩方式</th><th style="border-left:1px solid #fff">类型</th><th style="border-left:1px solid #fff">来源</th><th style="border-left:1px solid #fff">有效期</th></tr>
                </thead>
                <tbody>
                  <tr ng-repeat="x in gradedetail" on-Finish-Render-Filters>
                    <td>{{x.createDate | date:'yyyy-MM-dd'}}</td>
                    <td>{{x.incomePoint}}</td>
                    <td>{{x.gradePoint}}</td>
                    <td>{{x.createReasonDesc}}</td>
                    <td>{{x.detailId}}</td>
                    <td>{{x.expiredDate}}</td>
                  </tr>
                </tbody>
            </table>
            <div id="green2"></div>
        </div>
    </div>

    <script src="/script/angular.js" type="text/javascript"></script>
    <script src="/script/smartpaginator.js" type="text/javascript"></script>    
    
    <script type="text/javascript">
        var fileUploadProcess = function () {
                $("[id$='fileUpload']").click();
                return false;
            }
            var fileChange = function() {
                if ($("[id$='fileUpload']").val().indexOf("成绩变更.txt") > -1) {
                    $("[id$='batchUpload2']").click();
                } else {
                    alert("上传文件命名不符合规范");
                }
            }
        var app = angular.module("gradeaddapp", []);
        app.controller("gradeaddController", function($scope, $http) {
            $scope.execQuery = function() {
                var queryName = $("#userName").val();
                var startTime = $("[id$='createDateFrom']").val();
                var endTime = $("[id$='createDateTo']").val();
                if (queryName == "" && startTime == "" && endTime == "") {
                    alert("学员账号、起始日期、截止日期至少填一项");
                } else {
                    $http.get("gradeBatch.ashx?flag=getmembers", { params: { 'userName': queryName, 'startTime': startTime, 'endTime': endTime} }).success(function(Data) {
                        $scope.members = Data.members;
                        $scope.reasons = Data.reasons;
                        $("#resultShow").show();
                        $("#smartpaginator").removeClass("smartpaginator");
                    }).error(function(data, status) {
                        alert("error");
                    });
                }
            };

            $scope.allModify = function() {
                var modifygrade = $("#gradeChange").val();
                var modifyReason = $("[id$='modifyReasons']").val();
                var patten = new RegExp("^[1-9]+[0-9]*$");
                if (modifygrade == "" || modifyReason == "") {
                    alert("成绩变更及变更原因为必填项");
                } else if (!patten.test(modifygrade)) {
                    alert("请填写正整数");
                } else {
                $http.post("gradeBatch.ashx?flag=allModify" + "&modifygrade=" + modifygrade + "&modifyReason=" + modifyReason, $scope.members).success(function(Data) {
                        alert("更新成功。");
                    }).error(function(data, status) {
                        alert("error");
                    });
                }
            };

            $scope.postgradeOk = function() {
                var rows = $("#resultShow tbody").find("tr");
                var patten = new RegExp("^[1-9]+[0-9]*$");
                var errFlag = false;
                var selectedItem;
                for (var index = 0; index < rows.length; index++) {
                    var checkflag = rows[index].children[0].children[0].checked;
                    if (checkflag == false) continue;
                    var gradeInput = rows[index].children[3].children[0];
                    if (!patten.test($(gradeInput).val())) {
                        errFlag = true;
                        $(gradeInput).addClass("errorInput");
                    } else {
                        errFlag = false;
                        $(gradeInput).removeClass("errorInput");
                    }
                    var reasonSelect = rows[index].children[4].children[0];
                    if ($(reasonSelect).val() == "") {
                        errFlag = true;
                        $(reasonSelect).addClass("errorInput");
                    } else {
                        errFlag = false;
                        $(reasonSelect).removeClass("errorInput");
                    }
                }
                if (errFlag == false) {
                    $http.post("gradeBatch.ashx?flag=modifydataok", $scope.members).success(function(Data) {
                        alert("更新成功。");
                    }).error(function(data, status) {
                    alert("error");
                    });
                }
            };

            $scope.cancelAction = function() {
                $("#resultShow").hide();
                $("#userName").val("");
                $("[id$='createDateFrom']").val("");
                $("[id$='createDateTo']").val("");
                $("#gradeChange").val("");
            }

            $scope.searchHistory = function() {
                var rows = $("#resultShow tbody").find("tr");
                var selected = 0;
                var selectedItem;
                for (var index = 0; index < rows.length; index++) {
                    var checkflag = rows[index].children[0].children[0].checked;
                    if (checkflag == true) {
                        selected += 1;
                        selectedItem = rows[index];
                    }
                }
                if (selected == 0) {
                    alert("请选择数据");
                } else if (selected > 1) {
                    alert("不允许多选");
                } else {
                    $scope.memmberUserName = selectedItem.children[1].children[0].value;
                    $scope.memberUserId = selectedItem.children[5].children[0].value;
                    $http.post("gradeBatch.ashx?flag=searchHistory&userid=" + $scope.memberUserId, "").success(function(Data) {
                        $scope.gradedetail = Data.gradedetail;
                        if (Data != null) {
                            $("#execCondition").hide();
                            $("#resultShow").hide();
                            $("#detailShow").show();
                        } else {
                            alert("不存在历史记录");
                        }
                    }).error(function(data, status) {
                        alert("error");
                    });
                }
            };

            $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
            $('#green').smartpaginator({ totalrecords: $scope.members.length, recordsperpage: 10, datacontainer: 'mt', dataelement: 'tbody tr', initval: 0, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green' });
            $('#green2').smartpaginator({ totalrecords: $scope.gradedetail.length, recordsperpage: 10, datacontainer: 'mt2', dataelement: 'tbody tr', initval: 0, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green' });
            });
        });
        
        app.directive('onFinishRenderFilters',function ($timeout) {
            return {
                restrict: 'A',
                link: function(scope,element,attr) {
                        if (scope.$last === true) {
                            $timeout(function() {
                                scope.$emit('ngRepeatFinished');
                            });
                        }
                      }
                   };
        });

        $(document).ready(function() {
            $("[id$='submitOk']").click(function() {
            });

            $("#detailViewCancel").click(function() {
                $("#execCondition").show();
                $("#resultShow").show();
                $("#detailShow").hide();
            });
            $("#a1").addClass("current");
        });
    </script>
</asp:Content>