ASP.NET MVC4+BootStrap 实战(十)

年过完了，也该收心了。想想过年这几天都是每天睡到12:00，实在是腐化。大家都沉浸在抢红包的喜悦之中。

不说了，今天我们主要看一下新闻链接管理界面。先上图，无图无真相。

上半部分主要是对已经添加的外链接进行修改删除，设置优先级，下半部分是新增外链接网站。

首先我们先看一下上半部分。

<div id="div_newsManage" class="panel panel-primary" ng-app="newsLinkManageModule" ng-controller="newsLinkManageController">
    <div class="panel-heading">
        <h3 class="panel-title">
            <img class="img-panel-title" src="~/Images/Base/newslink.png" />
            <b>新闻链接管理</b>
        </h3>
    </div>
    <div class="panel-body">
        <fieldset>
            <legend>
                <h5><b>外链接管理</b></h5>
            </legend>
            <div class="row">
                <div class="col-md-1">
                    <input type="checkbox" ng-model="IsSelectAll" />
                </div>
                <label class="col-md-5" style="color:#333333">网站名称</label>
                <label class="col-md-2" style="color:#333333">TOP(X)</label>
                <label class="col-md-2" style="color:#333333">操作</label>
                <label class="col-md-2" style="color:#333333">优先级</label>
            </div>
            <div class="line-seperate-style-main"></div>
            <div ng-repeat="website in WebSites" class="a-list">
                <div class="row" style="line-height:40px">
                    <div class="col-md-1">
                        <input class="chklist-vertical-align" type="checkbox" ng-model="website.IsChecked" />
                    </div>
                    <div class="col-md-5">
                        <a href="{{website.WebSiteURL}}">{{website.WebSiteName}}</a>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control" ng-model="website.TopNewsCount" ng-options="number for number in numbers">
                            @*<option ng-repeat="num in numbers" label="{{num}}" value="{{num}}"></option>*@
                        </select>
                    </div>
                    <div class="col-md-2">
                        <span style="cursor: pointer;" class="glyphicon glyphicon-pencil span-grid"></span>
                        <span ng-click="newslinkdeleteSingle(website.TransactionNumber)" style="cursor:pointer;margin-left:5px;" class="glyphicon glyphicon-trash span-grid"></span>
                    </div>
                    <div class="col-md-2">
                        <span style="cursor:pointer;" class="glyphicon glyphicon-arrow-up span-grid"></span>
                        <span style="cursor: pointer; margin-left: 5px;" class="glyphicon glyphicon-arrow-down span-grid"></span>
                    </div>
                </div>
                <div class="line-seperate-style"></div>
            </div>
            <input type="button" value="移除" ng-click="newslinkdelete()" style="margin-top:10px" class="btn btn-danger" />
        </fieldset>

还是bootStrap布局，将div分成1,5,2,2,2比例的五等份。我们通过ng-repeat生成多行div。在这里需要注意的是这里的select标签的ng-options，在这里如果不使用ng-options的话，ng-model是无法选中的。OK，我们看到头部有一个复选框，那个复选框是用来全选和反选的。OK，我们看一下js代码

var appModule = angular.module(‘newsLinkManageModule‘, []);
appModule.controller("newsLinkManageController", function ($scope, $http, $filter) {
    initData();

    $scope.AddedWebSites = [];

    $scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    $scope.IsSelectAll = false;

在页面加载以后，我们首先会调用initData方法。

function initData() {
    $http.get("/NewsManage/NewsLinkList").success(function (data) {
         $scope.WebSites = data;
    });
};

其实就是调用一个后台action，得到WebSites。

[HttpGet]
[OutputCache(Duration = 60)]
public JsonResult NewsLinkList()
{
     var newsEntityList = NewsMngBiz.GetInstance().GetNewsLinkList();
     if (newsEntityList == null) return null;

     return Json(newsEntityList, JsonRequestBehavior.AllowGet);
}

在这里，实体的定义如下

public class NewsLinkEntity
    {
        public int TransactionNumber { get; set; }
        public string WebSiteName { get; set; }
        public string WebSiteURL { get; set; }
        public int TopNewsCount { get; set; }
        public int Priority { get; set; }
    }

就是将这样一个实体list以json格式返回到客户端。全选和全不选的js代码如下

$scope.$watch("IsSelectAll", setCheckState);
function setCheckState(newValue, oldValue) {
     angular.forEach($scope.WebSites, function (obj, key) {
           obj.IsChecked = newValue;
     });
}

我们通过监控IsSelectAll的值来实时设置列表中的选中状态。

接着我们看一下这里移除按钮的实现。

var linkIDs = [];
$scope.newslinkdelete = function () {
     linkIDs = [];
     angular.forEach(
          $filter(‘filter‘)($scope.WebSites, { IsChecked: true }),
                function (v) {
                    linkIDs.push(v.TransactionNumber);
                }
     );

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

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

在这里先拿到选中的TransactionNumber，然后发送到服务端进行处理。

function newsLinkDelete(param) {
      $http({
                method: "Delete",
                url: "/NewsManage/DeleteNewsLink",
                headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ },
                data: $.param(param)
            }).success(function (data, status, headers, config) {
                alert(data.msg);
                if (data.suc == 1) {
                    initData();
                }
            }).error(function (data, status, headers, config) {
                alert(status);
      });
}

我们看一下服务端的处理

[HttpDelete]
public JsonResult DeleteNewsLink()
{
     string requestJson = Request["requestJson"];
     string[] linkIDArray = JsonBuilder.BuildStringArray(requestJson, "linkIDs");
     int suc = NewsMngBiz.GetInstance().DeleteNewsLinks(linkIDArray);

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

     return GetJsonMessage("CM_005");
}

DAL层调用如下的脚本进行处理

DECLARE @NewsLinkIDTable TABLE
(
    ID INT IDENTITY(1,1),
    TransactionNumber INT NOT NULL
)

INSERT INTO @NewsLinkIDTable
(
    TransactionNumber
)
SELECT short_str
FROM dbo.F_SQLSERVER_SPLIT(@NewsLinkIDs,‘,‘)

DELETE A FROM dbo.InformationNewsLink A
WHERE EXISTS(
    SELECT TOP 1 1
    FROM @NewsLinkIDTable B
    WHERE B.TransactionNumber = A.TransactionNumber
)

OK，接下来我们看一下下半部分。下半部分，当用户点击新增按钮的时候，会动态增加一个用于添加链接网站的div。

看一下代码

<fieldset style="margin-top:20px">
            <legend>
                <h5><b>外链接新增</b></h5>
            </legend>
            <div class="row">
                <label class="col-md-1">序号</label>
                <label class="col-md-1">勾选</label>
                <label class="col-md-4">网站名称</label>
                <label class="col-md-6">网站URL</label>
            </div>
            <div class="line-seperate-style-main"></div>
            <div class="row" style="line-height:40px">
                <div class="col-md-1">
                    <div class="div-circal-list">1</div>
                </div>
                <div class="col-md-1">
                    <input disabled type="checkbox" ng-model="IsChecked" class="chklist-vertical-align" />
                </div>
                <div class="col-md-4">
                    <input type="text" ng-model="WebSiteName" maxlength="30" style="width:100%" class="form-control" />
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="请以http或者https开头" maxlength="200" ng-model="WebSiteURL" style="width:100%" class="form-control" />
                </div>
            </div>
            <div ng-repeat="website in AddedWebSites">
                <div class="row" style="line-height:40px">
                    <div class="col-md-1">
                        <div class="div-circal-list">{{$index + 2}}</div>
                        @*<img src="~/Images/orderedList{{$index + 1}}.png" />*@
                    </div>
                    <div class="col-md-1">
                        <input type="hidden" value="{{$index + 1}}" ng-model="website.Index" />
                        <input type="checkbox" ng-model="website.IsChecked" class="chklist-vertical-align" />
                    </div>
                    <div class="col-md-4">
                        <input type="text" ng-model="website.LinkName" maxlength="30" style="width:100%" class="form-control" />
                    </div>
                    <div class="col-md-6">
                        <input type="text" placeholder="请以http或者https开头" maxlength="200" ng-model="website.URL" style="width:100%" class="form-control" />
                    </div>
                </div>
            </div>
            <div style="margin-top:20px">
                <input type="button" class="btn btn-primary" value="新增" ng-click="addnewlink()" />
                <input type="button" class="btn btn-info" value="保存" />
                <input type="button" class="btn btn-danger" value="移除" ng-click="removelink()" />
            </div>
        </fieldset>

这个界面上第一个复选框是disabled，因为我们始终要保持一个表单在。在这里我们表单的新增其实就是通过更新model实现的。当我们给数组中新增一个对象时，界面就会自动新增一行。我们看一下实现

$scope.addnewlink = function () {
      if ($scope.AddedWebSites.length >= 9) {
           alert("您一次最多只能添加10个网站链接！");
           return;
      }

      $scope.AddedWebSites.push({ URL: "", LinkName: "" });
};

很简单，前面的圆圈序列号是由如下div实现的。

<div class="div-circal-list">{{$index + 2}}</div>

css代码很简单。

.div-circal-list {
    width:30px;
    height:30px;
    border-radius:50%;
    background-color:#428bca;
    text-align:center;
    line-height:30px;
    color:white;
}

我们再看一下移除。

$scope.removelink = function () {
      var selectedIDs = [];
      angular.forEach($scope.AddedWebSites, function (obj, key) {
           if (obj.IsChecked) {
                 selectedIDs.push(key);
           }
      });

      var num = 0;
      angular.forEach(selectedIDs, function (value, key) {
          $scope.AddedWebSites.splice(value - num, 1);
                ++num;
      });
};

在这里我们根据数组的下标进行删除。因为每删除一行，会重新生成一个$index，所以我们必须先把选中的index放到一个数组中，然后循环从列表中删除。因为每删除一个index就会减1，所以我们就每次value-num。OK，本篇到此结束。

最后我们看一下上节遗留的Excel导出功能，其实就是将form提交到如下action

[OutputCache(Duration = 60, NoStore = true)]
        [HttpPost]
        public FileResult Export(FormCollection fc)
        {
            string userID = fc["searchUserID"];
            string userName = fc["searchUserName"];
            string userSex = fc["searchUserSex"];
            string birthDayStart = fc["searchStartDate"];
            string birthDayEnd = fc["searchEndDate"];

            string pageIndex = fc["hfdPageIndex"];
            string pageSize = fc["hfdPageSize"];

            UserSearchRequest userSearchRequest = new UserSearchRequest()
            {
                UserID = userID,
                UserName = userName,
                UserSex = userSex,
                StartDate = string.IsNullOrEmpty(birthDayStart) ? null : (DateTime?)DateTime.Parse(birthDayStart),
                EndDate = string.IsNullOrEmpty(birthDayEnd) ? null : (DateTime?)DateTime.Parse(birthDayEnd),
                PageIndex = int.Parse(pageIndex),
                PageSize = int.Parse(pageSize)
            };

            byte[] fileBytes = UserInfoBiz.GetInstance().GetExportFileBytes(userSearchRequest);
            if (fileBytes == null) return File("~/NoData.xls", "application/ms-excel");

            return File(fileBytes, "application/ms-excel", string.Concat("UserInfo", Guid.NewGuid().ToString(), ".xls"));
        }

在这里我们通过NPOI组件返回个byte数组，通过Biz层调用得到数组，在action中输出到客户端。

public static byte[] ExportExcel(DataTable dt, string title)
        {
            HSSFWorkbook workbooks = new HSSFWorkbook();
            HSSFSheet worksheet = (HSSFSheet)workbooks.CreateSheet(title);

            if (dt.Rows.Count == 0)
            {
                return null;
            }
            //标题
            int titleCell = dt.Columns.Count;

            worksheet.AddMergedRegion(new Region(0, 0, 0, titleCell - 1));//合并单元格，第0行0列开始到第0行titleCell-1列
            HSSFCell cell = (HSSFCell)worksheet.CreateRow(0).CreateCell(0);//创建单元格
            cell.SetCellValue(title);
            //设置样式
            HSSFCellStyle style = (HSSFCellStyle)workbooks.CreateCellStyle();
            HSSFFont font = (HSSFFont)workbooks.CreateFont();
            font.Boldweight = (short)FontBoldWeight.BOLD;//粗体
            font.Color = HSSFColor.RED.index;//字体颜色 red
            font.FontHeightInPoints = 18;//字体大小
            style.SetFont(font);
            style.Alignment = HorizontalAlignment.CENTER;
            cell.CellStyle = style;

            //设置样式
            HSSFCellStyle style1 = (HSSFCellStyle)workbooks.CreateCellStyle();
            HSSFFont font1 = (HSSFFont)workbooks.CreateFont();
            font1.Boldweight = (short)FontBoldWeight.BOLD;//粗体

            font1.FontHeightInPoints = 12;//字体大小
            style1.SetFont(font1);
            style1.WrapText = false;
            style1.Alignment = HorizontalAlignment.LEFT;
            HSSFRow row1 = (HSSFRow)worksheet.CreateRow(1);
            //写入字段
            for (int i = 0; i < dt.Columns.Count; i++)
            {
                HSSFCell cell1 = (HSSFCell)row1.CreateCell(i);//创建单元格
                cell1.SetCellValue(dt.Columns[i].ColumnName);
                cell1.CellStyle = style1;
            }

            for (int r = 0; r < dt.Rows.Count; r++)
            {
                HSSFRow rowr = (HSSFRow)worksheet.CreateRow(r + 2);
                for (int c = 0; c < dt.Columns.Count; c++)
                {
                    HSSFCell cell2 = (HSSFCell)rowr.CreateCell(c);//创建单元格
                    var aa = dt.Columns[c].DataType.ToString();
                    var cellvalue = dt.Rows[r][dt.Columns[c].ColumnName].ToString();
                    #region
                    switch (dt.Columns[c].DataType.ToString())
                    {
                        case "System.String"://字符串类型
                            cell2.SetCellValue(cellvalue);
                            break;
                        case "System.Nullable`1[System.DateTime]"://日期类型
                        case "System.DateTime":
                            DateTime dateV;
                            DateTime.TryParse(cellvalue, out dateV);
                            cell2.SetCellValue(cellvalue);
                            break;
                        case "System.Boolean"://布尔型
                            bool boolV = false;
                            bool.TryParse(cellvalue, out boolV);
                            cell2.SetCellValue(cellvalue);
                            break;
                        case "System.Int16"://整型
                        case "System.Int32":
                        case "System.Int64":
                        case "System.Byte":
                            int intV = 0;
                            int.TryParse(cellvalue, out intV);
                            cell2.SetCellValue(cellvalue);
                            break;
                        case "System.Decimal"://浮点型
                        case "System.Double":
                            double doubV = 0;
                            double.TryParse(cellvalue, out doubV);
                            cell2.SetCellValue(cellvalue);
                            break;
                        case "System.DBNull"://空值处理
                            cell2.SetCellValue("");
                            break;
                        default:
                            cell2.SetCellValue("");
                            break;
                    }

                    #endregion
                }
            }

            try
            {
                using (MemoryStream ms = new MemoryStream())
                {
                    workbooks.Write(ms);
                    ms.Flush();
                    ms.Position = 0;
                    worksheet.Dispose();
                    workbooks.Dispose();

                    byte[] data = ms.ToArray();
                    GC.Collect();
                    return data;
                }
            }
            catch (Exception ex)
            {
                LogHelper.WriteExceptionLog(MethodBase.GetCurrentMethod(),ex);
                return null;
            }
        }

Ok，我们看一下效果

打开Excel，结果如下，样式没有细调。

最后祝大家在新的一年里一顺百顺事事顺，欢天喜地迎新年。