ASP.NET MVC4+BootStrap 实战(八)

今天西安下雪了，贼冷，我去。今年的年终奖还没发，都快揭不开锅了。

今天的话我们来看一下用户删除和修改，天太冷，先调一下胃口，上图，无图无真相。

看到了吧，新增了选择列，操作列，以及页面最下面的全选，反选，新增，删除按钮。

我们先来看一下全选反选吧，经过修改之后，我们的Table变成如下的代码

<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>电话号码</th>
                    <th>Email</th>
                    <th>操作</th>
                </tr>
                <tr ng-repeat="userEntity in userEntityList">
                    <td><input id="chk_{{userEntity.UserID}}" type="checkbox" ng-model="userEntity.IsChecked" /></td>
                    <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>
                    <td>
                        <span style="cursor:pointer;" data-toggle="modal"
                              data-target="#userModifyModal" class="glyphicon glyphicon-pencil span-grid"></span>
                        <span style="cursor:pointer;margin-left:5px;" ng-click="deleteUser(userEntity.UserID)" class="glyphicon glyphicon-trash span-grid"></span>
                    </td>
                </tr>
            </table>

选择列，我们绑定CheckBox是否选中的model为userEntity.IsChecked，这样如果数据源中的IsChecked变量发生变化，checkBox是否选中的状态也会发生变化。以前在使用jquery的时候，我们的做法是取出第一列的所有checkbox，然后设置其属性checked为true。现在有了angularjs，一切都像Silverligt一样简单。OK，我们绑定好了，看一下全选反选按钮的代码

<div class="col-md-4">
                <button type="button" class="btn btn-primary" ng-click="selectAll()">
                    <span class="glyphicon glyphicon-check" title="全选" aria-hidden="true">
                        <label>全选</label>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" ng-click="inverseSelect()">
                    <span class="glyphicon glyphicon-share" title="反选" aria-hidden="true">
                        <label>反选</label>
                    </span>
                </button>
            </div>

在点击全选按钮的时候，我们调用selectAll方法，我们来看一下这个js方法。

$scope.selectAll = function () {
                angular.forEach($scope.userEntityList, function (value, key) {
                    value.IsChecked = true;
                });
            };

看到了吧，就是它，我们只需要循环数据源，设置每个json对象的IsChecked属性为true即可，我们根本不用像jquery那样关心html元素是什么。

那么反选的代码也就大同小异了，如下

$scope.inverseSelect = function () {
                angular.forEach($scope.userEntityList, function (value, key) {
                    value.IsChecked = !value.IsChecked;
                });
            };

还是循环，把选中的改为没选中，把没选中的改为选中，如下是全选反选的效果。

 

OK，全选反选算是完了，那么我们接下来当然是要看新增和删除了。新增其实没什么，就是把用户注册界面替换到div_content层。

<div class="col-md-8" style="text-align:right">
                <button type="button" class="btn btn-primary" ng-click="redirectToUserCreate()">
                    <span class="glyphicon glyphicon-plus" title="新增" aria-hidden="true">
                        <label>新增</label>
                    </span>
                </button>
                <button type="button" class="btn btn-primary" ng-click="userDelete()">
                    <span class="glyphicon glyphicon-trash" title="删除" aria-hidden="true">
                        <label>删除</label>
                    </span>
                </button>
            </div>

点击新增，调用redirectToUserCreate方法。

$scope.redirectToUserCreate = function () {
                $http.get("/Home/UserCreateView").success(function (data) {
                    $("#div_content").html(data);
                });
            };

点击删除，就是对批量选择的用户信息的删除，我们看一下userDelete方法。

var chooseUserID = [];
            $scope.userDelete = function () {
                chooseUserID = [];
                angular.forEach(
                    $filter(‘filter‘)($scope.userEntityList, { IsChecked: true }),
                    function (v) {
                        chooseUserID.push(v.UserID);
                    });

                if (chooseUserID.length == 0) {
                    alert("请选择要删除的数据！");
                    return;
                }

                if (confirm("您确定要删除吗?")) {
                    var param = { requestJson: JSON.stringify({ userIDs: chooseUserID }) };
                    userDelete(param);
                }
            };

            function userDelete(param) {
                $http({
                    method: "Delete",
                    url: "/UserManage/DeleteUser",
                    headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ },
                    data: $.param(param)
                }).success(function (data, status, headers, config) {
                    alert(data.msg);

                    if (data.suc == 1) {
                        $scope.getDatabyPageSize();
                    }
                }).error(function (data, status, headers, config) {
                    alert(status);
                });
            }

我们使用angular的过滤器，将userEntityList中IsChecked的所有用户的UserID放到一个数组中。如果用户确定要删除的话，我们构造一个json对象参数，调用userDelete。在userDelete方法中，我们发送ajax请求，访问DeleteUser这个后台action。如果删除成功，会根据当前页面选择的条件重新查数据。

我们看一下后台的代码

[HttpDelete]
        public JsonResult DeleteUser()
        {
            string requestJson = Request["requestJson"];
            string[] userIDArray = JsonBuilder.BuildUserIDs(requestJson);
            int suc = UserInfoBiz.GetInstance().DeleteUser(userIDArray);

            if (suc >= 0)
            {
                return GetJsonMessage("CM_002", JsonMsgType.SUCCESS);
            }

            return GetJsonMessage("CM_005");
        }

只有verb为Delete的请求才能访问这个action。拿到请求request参数后，反序列化得到一个数组。

public static string[] BuildUserIDs(string requestJson)
        {
            JObject jObj = (JObject)JsonConvert.DeserializeObject(requestJson);
            JToken jToken = jObj["userIDs"];
            return jToken.Values<string>().ToArray();
        }

将得到的UserID拼成以逗号隔开的参数传递到DAL层。

public int DeleteUser(string[] userIDArray)
        {
            if (userIDArray == null || userIDArray.Length == 0) return 1;

            string userIDs = string.Join(",", userIDArray);
            return UserInfoDAL.GetInstance().DeleteUser(userIDs);
        }

DAL层调用sqlScript进行处理

public int DeleteUser(string userIDs)
        {
            try
            {
                string sqlScript = DBScriptManager.GetScript(this.GetType(), "DeleteUserByIDs");
                SqlParameter[] sqlParameters = 
                {
                    new SqlParameter("@UserIDs",SqlDbType.VarChar,4000)
                };

                sqlParameters[0].Value = userIDs;
                return SqlHelper.ExecuteNonQuery(ConstValues.CON_DBConnection, CommandType.Text, sqlScript, sqlParameters);
            }
            catch (Exception ex)
            {
                LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(), ex);
                return -1;
            }
        }

我们看一下脚本的处理

<Script Key="DeleteUserByIDs">
    <![CDATA[
DECLARE @UserIDTable TABLE
(
	UserID VARCHAR(15) NOT NULL
)

INSERT INTO @UserIDTable
(
	UserID
)
SELECT short_str
FROM dbo.F_SQLSERVER_SPLIT(@UserIDs,‘,‘)

DELETE a FROM dbo.InformationUser a
WHERE EXISTS(
  SELECT TOP 1 1
  FROM @UserIDTable b
  WHERE a.UserID = b.UserID
)
    ]]>
  </Script>

将传进来的UserIDs用函数分割后插入临时表，再删除，OK，删除和新增就结束了。

接下来我们再看table中的操作列单个删除和修改，先看单个删除。

<td>
                        <span style="cursor:pointer;" data-toggle="modal"
                              data-target="#userModifyModal" class="glyphicon glyphicon-pencil span-grid"></span>
                        <span style="cursor:pointer;margin-left:5px;" ng-click="deleteUser(userEntity.UserID)" class="glyphicon glyphicon-trash span-grid"></span>
                    </td>

我们在点击单个删除的时候，调用deleteUser，并将当前行的用户名传到js方法中。

$scope.deleteUser = function (userID) {
                if (confirm("您确定要删除吗?")) {
                    chooseUserID = [];

                    chooseUserID.push(userID);
                    var param = { requestJson: JSON.stringify({ userIDs: chooseUserID }) };
                    userDelete(param);
                }
            };

其实和批量删除调用的是一个js function，再看一下修改。

点击修改Span的时候，有个data-target="#userModifyModal"，其实这里是弹出BootStrap的一个modal页面，userModifyModal其实是modal页面div的id。modal页面目前还没做好，不过可以先贴代码出来。

<div class="modal fade" id="userModifyModal" role="dialog"
         data-backdrop="static" data-keyboard="false"
         aria-labelledby="userModifyModalElement" aria-hidden="true">
        <div class="modal-dialog" style="width:450px">
            <div class="modal-content" style="width:450px">
                <div class="modal-header modal-head">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="userModifyModalElement">
                        <img src="../../Images/Base/useradd.png" class="img-panel-title" />
                        <label>用户信息修改</label>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-md-2 control-label">姓名:</label>
                            <div class="col-md-10 col-sm-5-pad">
                                <input name="userName"
                                       type="text"
                                       maxlength="10"
                                       ng-model="userInfo.userName"
                                       class="form-control"
                                       data-toggle="tooltip"
                                       data-placement="right"
                                       title="姓名不能超过10个汉字" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-md-2 control-label">
                                性别:
                            </label>
                            <div class="col-md-10 col-sm-5-pad">
                                <div class="radio-inline">
                                    <label>
                                        <input ng-model="userInfo.sex" ng-checked="true" name="radioSex" type="radio" value="1">男
                                    </label>
                                </div>
                                <div class="radio-inline">
                                    <label>
                                        <input name="radioSex" type="radio" value="0">女
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label for="disabledSelect" class="col-md-2 control-label">
                                生日:
                            </label>
                            <div class="col-md-10 col-sm-5-pad">
                                <input disabled id="txtBirthDay" ng-model="userInfo.birthDay" type="date" class="form-control" required />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <label class="col-md-2 control-label">
                                Emai:
                            </label>
                            <div class="col-md-10 col-sm-5-pad">
                                <input type="email" maxlength="30" ng-model="userInfo.email" class="form-control" id="txtEmail" data-toggle="tooltip"
                                       data-placement="right" title="请填写正确的邮箱地址，用于找回密码等" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <label class="col-md-2 control-label">
                                电话:
                            </label>
                            <div class="col-md-10 col-sm-5-pad">
                                <input type="tel" maxlength="15" ng-model="userInfo.telPhone" class="form-control" id="txtTelNo" data-toggle="tooltip"
                                       data-placement="right" pattern="^\d{11}$" title="只能输入11位手机号码" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-check" aria-hidden="true">
                            <label>保存</label>
                        </span>
                    </button>
                    <button type="button" ng-click="windowClose()" class="btn btn-danger">
                        <span class="glyphicon glyphicon-off" aria-hidden="true">
                            <label>关闭</label>
                        </span>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>

需要注意的是下面的这段

"userModifyModal" role="dialog"
         data-backdrop="static" data-keyboard="false"
         aria-labelledby="userModifyModalElement" aria-hidden="true">

data-backdrop和data-keyboard，官方解释如下

所以我们的设置意思是，点击modal页面以外的地方，modal页不关闭。按esc键，也不退出。

OK,我们看一下效果

默认情况下，modal页面的宽度为600。所以我们修改了其宽度，需要修改如下两个div。

 <div class="modal-dialog" style="width:450px">
     <div class="modal-content" style="width:450px">

但是这样的话，我们的modal无法垂直居中，那么我们就需要写如下的一段js脚本。

$("#userModifyModal").on(‘show.bs.modal‘, function (e) {
            $(this).find(‘.modal-dialog‘).css({
                ‘margin-top‘: function () {
                    var modalHeight = $("#userModifyModal").find(‘.modal-dialog‘).width();
                    return $(window).height() / 2 - modalHeight / 2;
                }
            });
        });

这样每次弹出来都是居中的，如下。

OK，最后，大家应该看到这个显眼的红色关闭按钮，是如何实现关闭的呢

$scope.windowClose = function () {
                angular.element(‘#userModifyModal‘).modal(‘hide‘);
            };

很简单，hide就行了，以下是w3cschool列出的方法

OK，本篇到此结束。

时间： 2024-03-12 18:56:23

ASP.NET MVC4+BootStrap 实战(八)的相关文章

ASP.NET MVC4+BootStrap 实战(二)

上一篇文章我们讲述了页面初始加载数据的一些东西,本篇我们来讲一下查询按钮和分页按钮.在很久以前我写过一篇ASP.NET MVC4切近实战的文章,有关于分页的代码,本篇我们不采用微软的AJAX框架. 先看一下查询效果,在点击Get按钮之后,会进行AJAX请求. js代码如下 jQuery(document).ready(function () {     setRowBackColor();     $("#btnsearch").click(function () {         

ASP.NET MVC4+BootStrap 实战(七)

连续三年年会中奖,第一年二等奖,价值2600元的魔音耳机,到现在才用了10几次.第二年中了个价值260元的飞利浦烧水壶,到现在还没用.今年中了个飞利浦挂烫机,也没查是多少钱,反正觉得奖项一年不如一年.在此我就给大家上一张年会热图. 男人的肚皮舞,嗨爆全场.好了,废话不多说,我们进入正题吧. 今天我们要说的就是主页面以及用户注册界面,功能做的都比较简单,我们先看一下Index界面. <div id="div_navigation" style="margin-top:10

ASP.NET MVC4+BootStrap 实战(六)

最近面试了一个西安电子科技大学刚毕业的,不是计算机系毕业,却喜欢编程.除了书本上的知识以外,其他一窍不通,笔试题答得不错.经验欠佳,编程也只懂书本上的一些例子.本来不打算录用,但是后来聊到高等数学和物理是她学的最好的两门,那必须收下.人家都说了能考上西电,就能证明她的学习能力,我和项目经理也就相信人家了.毕竟当年面试的时候我面试的是南京擎天科技,有个西电的面试的是南京联创,人家和我聊了两句,得知我是二本院校的,人家说了句他同学面试的都是腾讯,阿里,百度,新浪,说完直接放弃面试,我去南京擎天还害怕

ASP.NET MVC4+BootStrap 实战(三)

上节我们剩余Compare和Fix按钮没有讲,本节我们就来讲一下Compare按钮的功能,年底了,要开年会了,一个个积极的跟邱少云似得,给员工涨工资的时候能不能也积极点.不说了,说多了都是泪. 还记得我之前写的大数据实战之环境搭建,我们今天主要是拿DB的数据和solr的数据作比较,得出比较结果.首先,先启动centOS,启动tomcat,这样我们才能利用SolrNet调用solr公开的API.关于solr的启动再次我就不再赘述. OK,我们将solr实例启动起来后,用firefox浏览管理界面,

[转]ASP.NET MVC4+BootStrap 实战(一)

本文转自:http://leelei.blog.51cto.com/856755/1587301 好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没有实战web项目的机会.大D也辞职了,去搞web app了.自己也该闲暇时间多学习学习,每天进步一点点. OK,不多说了,看一下Solution的截图 基本上一看就明白了,控制器调用Biz层,Biz层调用DAL层,DAL层进行数据的CURD.Utility是一些公用的类库.ok,为什么程序集的命名都

ASP.NET MVC4+BootStrap 实战(十)

年过完了,也该收心了.想想过年这几天都是每天睡到12:00,实在是腐化.大家都沉浸在抢红包的喜悦之中. 不说了,今天我们主要看一下新闻链接管理界面.先上图,无图无真相. 上半部分主要是对已经添加的外链接进行修改删除,设置优先级,下半部分是新增外链接网站. 首先我们先看一下上半部分. <div id="div_newsManage" class="panel panel-primary" ng-app="newsLinkManageModule&quo

ASP.NET MVC4+BootStrap 实战(九)

哄孩子睡觉哄到现在,要两个孩子真的是不容易.孩子不睡觉,我没办法写博客.孩子睡着了,我一写就要写到半夜2点.6点起床,6:30骑自行车去上班,呼吸着雾霾,头皮冻得僵硬.到了软件园楼底下,还要排队买胡辣汤,排队上电梯.唉,生活不易. 今天,我们要说的当然是用户信息修改,请看下图. 看到一龙了么,重庆功夫盛典和日本变装拳手战成平手,打裂了日本拳手的眉骨.OK,我们点击铅笔,弹出用户信息修改界面.那么,我们在弹出用户信息修改界面之前,先要给弹出界面的form赋值.那么这一步要怎么做,当然了,是使用an

ASP.NET MVC4+BootStrap 实战(十三)

最近公司来了一个陕北的实习妹子,据说家里是开矿的,人长得一般,但很有气质.开矿的,当然钱很多了.以前在大学有个同学,家里是开油田的,有节毛概课,老师说西安的房价都是陕北人轰起来的,西安人都怨陕北人.我这个同学听了不开心了,周末直接在东西南北各买一套.牛逼啊,让你老师多嘴.这几天周围的同事心思都在这个姑娘身上,装作喝咖啡过去瞄一眼,或者站起来瞅瞅背影.IT爷们真的是空虚,IT界无美女啊,还是吉日嘎啦说的好,公司有美女,可以提升爷们的战斗力. OK,今天我们来看一下新闻审核界面,本来这节是要说ued

ASP.NET MVC4+BootStrap 实战(十一)

最近一天真的都不知道自己在忙什么,当了回Scrum Master.给自己的感觉就是像大学时期,饭堂经理看员工给学生打饭太慢,自己抡起大勺子给学生打菜,偶尔有些学生有情绪还要忍着.说到饭堂,最近都不知道该吃啥.黄焖鸡,biangbiang面,镇川碗托,麻辣香锅,自助餐都吃的没啥可吃了.偶尔咥一碗麦利鸡汤刀削面或者米线凉皮沙县.不说了,这会也确实有些饿,洗个苹果吃一下. 上面这一碗就是我经常吃的biangbiang面. 今天我们主要是来看一下新闻链接的修改和新增,先上图,无图无真相. 看到了吧,这个