ASP.NET MVC4+BootStrap 实战(六)
最近面试了一个西安电子科技大学刚毕业的,不是计算机系毕业,却喜欢编程。除了书本上的知识以外,其他一窍不通,笔试题答得不错。经验欠佳,编程也只懂书本上的一些例子。本来不打算录用,但是后来聊到高等数学和物理是她学的最好的两门,那必须收下。人家都说了能考上西电,就能证明她的学习能力,我和项目经理也就相信人家了。毕竟当年面试的时候我面试的是南京擎天科技,有个西电的面试的是南京联创,人家和我聊了两句,得知我是二本院校的,人家说了句他同学面试的都是腾讯,阿里,百度,新浪,说完直接放弃面试,我去南京擎天还害怕人家不要呢。后来在工作的时候一个西电的小伙研究生毕业,专业是密码破译,在我们公司写js,后来去阿里做web前端工程师了,现在年薪三十多万。不说了,我还是草根一个,因为一个四级英语证,我工资没办法翻一翻。但是努力还是要继续,机会还是留给有准备的人的。
今天我们来看一下头条网后台管理的用户管理查询部分。先上一张图,调一下胃口。
看到了吧,就是这个界面,本节本来是要讲主界面的,但是由于angularJS只支持单页应用,所以我需要对页面导航做一下修改。OK,我们看一下用户管理界面的代码。
@{ Layout = null; } <div id="div_userManage" class="panel panel-primary" ng-app="userManageModule" ng-controller="userManageController"> <div class="panel-heading"> <h3 class="panel-title"> <img class="img-panel-title" src="~/Images/Base/userlogin.png" /> <b>用户管理</b> </h3> </div> <div class="div-panel-content" style="padding:5px"> <div class="form-inline panel panel-primary" style="padding:5px"> <div class="form-group"> <label for="userid">用户名:</label> <input type="text" list="userid_list" class="form-control" ng-model="UserID"> <datalist id="userid_list"> <option ng-repeat="user in userList" label="{{user.UserName}}" value="{{user.UserID}}" /> </datalist> </div> <div class="form-group" style="margin-left:10px;margin-right:10px"> <label for="username">姓名:</label> <input type="text" list="username_list" class="form-control" ng-model="UserName"> <datalist id="username_list"> <option ng-repeat="user in userList" label="{{user.UserID}}" value="{{user.UserName}}" /> </datalist> </div> <div class="form-group"> <label for="usersex">性别:</label> <select ng-model="UserSex" class="form-control"> <option value="">---请选择---</option> <option value="1">男</option> <option value="0">女</option> </select> </div> <div class="form-group" style="margin-top:0px"> <label for="startdate">出生日期:</label> <input type="date" class="form-control" ng-model="StartDate" /> <label for="enddate">-</label> <input type="date" class="form-control" ng-model="EndDate" /> </div> <input type="image" class="btn-search" ng-click="getDatabyPageSize()" src="~/Images/Base/search.png" /> </div> <div class="pre-scroll"> <table class="table table-bordered table-striped table-hover" ng-init="load()"> <tr style="background-color: #428bca; color: white"> <th>用户名</th> <th>姓名</th> <th>性别</th> <th>出生日期</th> <th>电话号码</th> <th>Email</th> </tr> <tr ng-repeat="userEntity in userEntityList"> <td>{{userEntity.UserID}}</td> <td>{{userEntity.UserName}}</td> <td>{{userEntity.UserSex}}</td> <td>{{userEntity.UserBirthDay.slice(6,-2)|date:‘yyyy-MM-dd HH:mm:ss‘}}</td> <td>{{userEntity.UserPhone}}</td> <td>{{userEntity.UserEmail}}</td> </tr> </table> </div> <div class="row" style="margin-top: 5px;"> <div class="col-md-2"> <select class="form-control pagesize-select" ng-model="PageSize" ng-options="ps for ps in pageSizeList" ng-change="getDatabyPageSize(1)"></select> </div> <div class="col-md-4"> <div style="height:35px;line-height:35px;"> <label>当前共</label><label style="color:red" ng:bind="TotalCount"></label><label>条记录</label> <label>当前是第</label><label style="color:red" ng:bind="PageIndex"></label><label>页</label> </div> </div> <div class="col-md-6"> <ul id="ul_pager" class="pagination" style="float:right;margin-top:0px"> <li id="linkPre"><a href="#" ng-click="getPrePageIndexes()">«</a></li> <li ng-repeat="pageIndex in pageIndexList" id="page_{{pageIndex}}"> <a href="#" ng-click="getDatabyPageIndex(pageIndex)">{{pageIndex}}</a> </li> <li id="linkNext"><a href="#" ng-click="getNextPageIndexes()">»</a></li> </ul> </div> </div> </div>
还是bootStrap布局及样式。在这里布局使用了BootStrap的panel以及样式。在查询条件中,有用户名,姓名,性别等查询条件。我们首先看一下这个用户名
<input type="text" list="userid_list" class="form-control" ng-model="UserID"> <datalist id="userid_list"> <option ng-repeat="user in userList" label="{{user.UserName}}" value="{{user.UserID}}" /> </datalist>
在这里我们使用了Html5的datalist,具体怎么用,看上面的代码就明白了。我们绑定其model为UserID,然后循环$scope中的userList,构建datalist的option选项。我们设置其label为UserName,value为UserID。这个标签其实有点像Silverlight中的AutoComplete控件。说了这么多,我们看一下。
当你双击的时候,会自动下拉加载的数据。当你输入的时候,他会自动匹配输入的字符串。需要注意的是他的匹配方式只是左匹配,而且不支持全匹配。ok,上面我们提到label和value,在这里lileiXXX这个是value值,而李磊123XXXXX这个是label。这个元素其实用的场合只限于数据量比较小的场合,如果数据量大,可能根本无法使用。这里我们是为了方便用户在查询UserID的时候,通过label可以方便的知道用户的姓名。
OK,姓名查询条件其实是和用户名查询条件差不多的,性别查询条件是写死的,出生日期使用的是html5的标签。所有查询条件都绑定了一个$scope中的变量。OK,接下来我们看看展示数据的table。其实就是绑定了一个数据源userEntityList,然后循环创建tr。在table上有个ng-init标签,它指向的function是load。这个load方法,我把页面对应的js代码贴出来好了。
<script type="text/javascript"> var appModule = angular.module(‘userManageModule‘, []); appModule.controller("userManageController", function ($scope, $http) { $scope.usersexvalue = ""; $scope.PageIndex = 1; $scope.PageSize = 10; $scope.pageSizeList = [10, 20, 30, 50]; $scope.pageIndexList = []; $scope.userList = []; $scope.userEntityList = []; $scope.TotalCount = 0; $scope.pageShow = 5; $scope.TotalPage = 0; $scope.load = function () { this.getDatabyPageSize(); }; //when pageSize changed,this method will be called $scope.getDatabyPageSize = function () { $scope.PageIndex = 1; $scope.pageIndexList = []; var jsonData = JSON.stringify({ PageIndex: 1, PageSize: $scope.PageSize, UserID: $.trim($scope.UserID), UserName: $.trim($scope.UserName), UserSex: $scope.UserSex, StartDate: $scope.StartDate, EndDate: $scope.EndDate }); //$.post("/UserManage/GetUserList", { requestJson: jsonData }, // function (data, textStatus) { // $scope.userEntityList = data.UserInfoEntityList; // alert(data.UserInfoEntityList[0].UserName); // }); $http.post("/UserManage/GetUserList", { requestJson: jsonData }).success(function (data) { $scope.TotalCount = data.TotalCount; $scope.TotalPage = $scope.TotalCount % $scope.PageSize == 0 ? $scope.TotalCount / $scope.PageSize : $scope.TotalCount / $scope.PageSize + 1; var tempArray = []; if ($scope.TotalPage <= $scope.pageShow) { for (var i = 1; i <= $scope.TotalPage; i++) { tempArray.push(i); } $scope.pageIndexList = tempArray; $("#linkPre,#linkNext").addClass("disabled"); } else if ($scope.pageShow < $scope.TotalPage) { $("#linkPre").addClass("disabled"); if ($("#linkNext").hasClass("disabled")) { $("#linkNext").removeClass("disabled"); } for (var i = 1; i <= $scope.pageShow; i++) { tempArray.push(i); } $scope.pageIndexList = tempArray; } $scope.userEntityList = data.UserInfoEntityList; angular.copy($scope.userEntityList, $scope.userList); }); }; }); angular.bootstrap(angular.element(‘#div_userManage‘), [‘userManageModule‘]); </script>
在load方法中我们先构造了json请求字符串,然后调用getDatabyPageSize方法。在getDatabyPageSize中,我们根据绑定的变量拿到所有查询条件以及pageSize,PageIndex。然后通过angular内部对象$http请求/UserManage/GetUserList这个action,并将json请求数据post到这个action。成功以后,得到总条数和总页数,再根据pageShow(显示的页码数)算出显示的页码以及前一批页和后一批页链接的可用性,再得到要显示的页码,这里算法很简单,就不多说了。完了之后,将数据源赋给$scope.userEntityList。并且将该页的数据源拷贝到$scope.userList用于用户名和姓名的datalist绑定。
angular.bootstrap(angular.element(‘#div_userManage‘), [‘userManageModule‘]);这句是为了注册一个初始化启动的module。因为我们的主界面有一个注册的module,如果我们在这里不注册,就意味着我们的这个页面无法应用angular。我也尝试了,当我们切换到别的界面,在通过ajax请求将该页面加载到主页面,angular会失效。这就是angular在遇到ajax的异步刷新时候的尴尬,我尝试如果是整页刷新,则没有问题,因为每次都会将入口全部重新注册。好了,这个问题我下节会在讲主页导航的时候解决。看完了table,我们最后看一下分页。
其实我们的查询界面正体面貌就是这样,只是新增和删除按钮还没做。在底部,有个pageSize的选项。
<select class="form-control pagesize-select" ng-model="PageSize" ng-options="ps for ps in pageSizeList" ng-change="getDatabyPageSize(1)"></select>
我们给它绑定了PageSize,默认是$scope.pageSizeList = [10, 20, 30, 50];当它change的时候,会调用getDatabyPageSize(1)方法。getDatabyPageSize这个方法在上面已经提到了,在这里就不赘述了。在这里ng-options又是一种新的写法,其实这里也可以用ng-repeat加到option上。
接下来其实就是"当前共100条记录 当前是第1页",这里的100和1都是绑定的值。MVVM嘛,页面的值可以反映到变量,变量改变也会反映到页面,类似于Silverlight MVVM的IPropertyChanged接口,是一种通知机制。
<div style="height:35px;line-height:35px;"> <label>当前共</label><label style="color:red" ng:bind="TotalCount"></label><label>条记录</label> <label>当前是第</label><label style="color:red" ng:bind="PageIndex"></label><label>页</label> </div>
在这里需要注意的是在label,span,div等元素上的绑定,要使用ng-bind或者ng:bind,ng_bind等一些写法,这些写法都是可以被angularJS识别的。
最后我们看一下这个分页,看一下代码,在这里我截个图好了,这样看着方便
大家注意到这个pageIndex的绑定,在VS中,它的颜色变成了紫色。在这里强调一点,ng-repeat在那个元素上,就是那个元素循环创建。所以这里除了开头<<和结尾>>,其他的具体页码都是根据数据量动态产生的。由于上面已经得到了pageIndexList,所以页码自然就出来了。最后我们再看看《和》以及点击页码的逻辑。先看页码吧,我们看到,点击的时候调用getDatabyPageIndex(pageIndex)方法。
$scope.getDatabyPageIndex = function (pageIndex) { var jsonData = JSON.stringify({ PageIndex: pageIndex, PageSize: $scope.PageSize, UserID: $.trim($scope.UserID), UserName: $.trim($scope.UserName), UserSex: $scope.UserSex, StartDate: $scope.StartDate, EndDate: $scope.EndDate }); $scope.PageIndex = pageIndex; $http.post("/UserManage/GetUserList", { requestJson: jsonData }).success(function (data) { $scope.userEntityList = data.UserInfoEntityList; }); }
传入当前页,再联合查询条件进行查询。在这里我想说的是,在查询的时候如果使用jquery的ajax请求$.post方法,即使查询出来数据也不能展示到页面,
$.post("/UserManage/GetUserList", { requestJson: jsonData }, function (data, textStatus) { $scope.userEntityList = data.UserInfoEntityList; alert(data.UserInfoEntityList[0].UserName); });
原因是序列化方式和angularJs不一样。如果使用angularJS提供的post方法,post的数据action也接不到,原因是angularJS的头文件和asp.net mvc解析的头文件的结构不一样。这样就要求我们在post的时候对数据进行转换,如下是转换方法,是一个老外写的。
$http.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=utf-8‘; var param = function (obj) { var query = ‘‘, name, value, fullSubName, subName, subValue, innerObj, i; for (name in obj) { value = obj[name]; if (value instanceof Array) { for (i = 0; i < value.length; ++i) { subValue = value[i]; fullSubName = name + ‘[‘ + i + ‘]‘; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + ‘&‘; } } else if (value instanceof Object) { for (subName in value) { subValue = value[subName]; fullSubName = name + ‘[‘ + subName + ‘]‘; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + ‘&‘; } } else if (value !== undefined && value !== null) query += encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value) + ‘&‘; } return query.length ? query.substr(0, query.length - 1) : query; }; // Override $http service‘s default transformRequest $http.defaults.transformRequest = [function (data) { return angular.isObject(data) && String(data) !== ‘[object File]‘ ? param(data) : data; }];
在这里我就不解释了,因为我不喜欢了解原理。OK,最后我们再看一下<< and >>的ng-click。
//when << clicked $scope.getPrePageIndexes = function () { if ($scope.pageIndexList.length > 0 && $scope.pageIndexList[0] > $scope.pageShow) { var currentPageFirst = $scope.pageIndexList[0]; $scope.pageIndexList = []; for (var i = $scope.pageShow; i >= 1; i--) { $scope.pageIndexList.push(currentPageFirst - i); } if ($("#linkNext").hasClass("disabled")) { $("#linkNext").removeClass("disabled"); } if ($scope.pageIndexList[$scope.pageShow - 1] <= $scope.pageShow) { if (!$("#linkPre").hasClass("disabled")) { $("#linkPre").addClass("disabled"); } } } }; //when >> clicked $scope.getNextPageIndexes = function () { if ($scope.pageIndexList.length > 0 && $scope.pageIndexList[$scope.pageShow - 1] < $scope.TotalPage) { var currentPageLast = $scope.pageIndexList[$scope.pageShow - 1]; $scope.pageIndexList = []; for (var i = 1; i <= $scope.pageShow; i++) { if (i > $scope.TotalPage) break; $scope.pageIndexList.push(currentPageLast + i); } if ($("#linkPre").hasClass("disabled")) { $("#linkPre").removeClass("disabled"); } if ($scope.pageIndexList[$scope.pageShow - 1] >= $scope.TotalPage) { if (!$("#linkNext").hasClass("disabled")) { $("#linkNext").addClass("disabled"); } } } };
还是那句话,算法很简单,自己一看就明白了。ok,我们看一下效果。
第五页数据,《是disabled状态。
当每页50条时,页码只有两页,《 and 》都是disabled。
当我选择每页10条,当点击》的时候,会出现6-10的页码,并且《为enabled,》为disabled。最后最后我再提一下,这个日期的问题
如果是在后端直接return Json的话,如下
[HttpPost] [OutputCache(Duration = 60)] public JsonResult GetUserList(FormCollection fc) { string requestJson = Request["requestJson"]; UserSearchRequest request = JsonBuilder.BuildUserSearchRequest(requestJson); UserSearchResponse response = UserInfoBiz.GetInstance().GetUserInfoEntityList(request); return Json(response, JsonRequestBehavior.AllowGet); }
则出来的日期会是/Date(XXXXXXXXXXXXXX)/这种格式,所以需要我们加一个filter去转一下。
OK,在控制器构造好request
public static UserSearchRequest BuildUserSearchRequest(string requestJson) { if (string.IsNullOrWhiteSpace(requestJson)) return new UserSearchRequest(); return (UserSearchRequest)JsonConvert.DeserializeObject<UserSearchRequest>(requestJson); }
最后调用DAL读取脚本文件中的脚本查询出数据
<Script Key="GetUserList"> <![CDATA[ DECLARE @UserTempTable TABLE ( ID INT IDENTITY(1,1) NOT NULL, UserNo VARCHAR(15) NOT NULL ) INSERT INTO @UserTempTable ( UserNo ) SELECT UserID FROM dbo.InformationUser WITH(NOLOCK) WHERE (@UserID IS NULL OR @UserID = ‘‘ OR UserID LIKE ‘%‘ + @UserID + ‘%‘) AND (@UserSex IS NULL OR @UserSex = ‘‘ OR UserSex = @UserSex) AND (@UserName IS NULL OR @UserName = ‘‘ OR UserName = @UserName) AND (@BirthStartDate IS NULL OR UserBirthDay >= @BirthStartDate) AND (@BirthEndDate IS NULL OR UserBirthDay <= @BirthEndDate) ORDER BY UserID ASC SELECT @TotalCount = COUNT(1) FROM @UserTempTable SELECT UserID, UserName, UserSex, UserBirthDay, UserEmail, UserPhone FROM( SELECT ID = ROW_NUMBER() OVER(ORDER BY UserID ASC), A.UserID, A.UserName, UserSex = CASE WHEN UserSex = ‘1‘ THEN ‘男‘ ELSE ‘女‘ END, A.UserBirthDay, A.UserEmail, A.UserPhone FROM dbo.InformationUser A WITH(NOLOCK) INNER JOIN @UserTempTable B ON A.UserID = B.UserNo ) N WHERE ID BETWEEN (@PageIndex - 1)* @PageSize + 1 AND @PageIndex * @PageSize ]]> </Script>
好了,今天到此结束,更多精彩内容,请看下节。
本文出自 “技术创造价值” 博客,请务必保留此出处http://leelei.blog.51cto.com/856755/1602609
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。