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()">&laquo;</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()">&raquo;</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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。