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

浏览数：26 / 时间：2015年06月09日

今年没涨工资，心里些许有些不爽。看了吉日嘎拉写的《程序员你伤不起》，觉得自己的经历和老吉比起来，还是相差甚远。心里的那些不爽也渐渐的没了，人一生也就短短的这么几十年，何必把自己搞的不高兴，心情郁闷，要学会自己调节。那些当和尚的，一辈子也就那么回事，开法拉利天天泡妞的也不就那么回事。最终都是一个结局，那就是从哪里来到哪里去。人生来，汲取大自然的各种化学元素保持生命，人死后，将汲取的化学元素再还给大自然。也许被动物吃了，也许被植物吸收了。大家有时间还是要看一下吉日嘎啦的这本书，人家现在可是年薪80w。

话说右边这篇文章中被辞职的员工叫方XX，这个小方是我介绍的。他不是我徒弟，他之前发给我一个系统的源码说是他做的，我当时刚毕业，觉得做得还行，就推荐了他。可是从吉日的描述来看，那系统肯定不是他做的。

OK，今天我们来看一下上一节新闻审核遗留的功能，本节的功能没什么难度，建议初学者看。

主要是未通过的以超链接显示，还有Preview功能，先看超链接这个。

在这里我们发现这一列有个自定义的rowcontent，是的，我们准备用指令来实现。

appModule.directive(‘rowcontent‘, function () {
    return {
        restrict: ‘E‘,
        replace: true,
        template: ‘<div><a href="#" ng-click="showComment(newsEntity)" style="color:{{newsEntity.Color}}" ng-show="{{newsEntity.AuditState==0}}">{{newsEntity.AuditStatus}}</a>‘
        + ‘<span style="color:{{newsEntity.Color}}" ng-show="{{newsEntity.AuditState!=0}}">{{newsEntity.AuditStatus}}</span>‘,
        link: function (scope, element, attr) {
            $(element).show();
        }
    }
});

我们看到，这个指令是一个html元素，模版就是一个超链接和一个段落。如果审核状态是未通过(0)，那么就显示超链接，否则显示段落。当点击超链接的时候，弹出审核界面，查看不通过原因。

OK，我们看一下

我们看到，这个确实是一个超链接，点击它，调用showComment(newsEntity)，将当前行的对象传入function中，看一下这个方法。

$scope.showComment = function (newsEntity) {
    angular.element("#labTitle").text(newsEntity.SubTitle);
    angular.element("#labTitle").attr("title", newsEntity.Title);
    $scope.AuditResult = "0";
    document.getElementById("div_reason").innerHTML = newsEntity.UnPassReson;
    document.getElementById("div_reason").contentEditable = "false";
    $("#btnSubmit").hide();
    $("#radio_AuditPass").attr("disabled", "disabled")
    $("#radio_AuditUnPass").attr("disabled", "disabled");
    angular.element(‘#newAuditModal‘).modal(‘show‘);
}

很简单，该赋值的赋值，该隐藏的隐藏，该禁用的禁用。

OK，接下来我们看一下preView功能。Preview界面我们不准备用js，只用mvc模式，先看一下点击preview按钮的代码。

<a href="#" ng-click="showPreview(newsEntity.TransactionNumber)"><img title="浏览"  src="~/Images/Base/preview.png" class="img-table-column" /></a>

$scope.showPreview = function (transactionNumber) {
    window.open("/NewsManage/GetNewsContent/" + transactionNumber, "新闻预览", "fullscreen=0,width=900,height=600,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
}

在点击preview按钮的时候，我们打开一个新界面，新界面的内容是根据某一行数据在数据库的主键TrnsactionNumber得到的。OK，我们先看一下这个新闻预览界面的action。

[HttpGet]
public ActionResult GetNewsContent(int id)
{
    NewsNativeEntity newsNativeEntity = NewsMngBiz.GetInstance().GetNewsContent(id);
    return View("~/Views/NewsManage/NewsPreview.cshtml", newsNativeEntity);
}

SELECT TOP(1)
	A.Title,
	A.NewsContent,
	A.InDate,
	B.UserName
FROM ChinaInformation.dbo.InformationNative A WITH(NOLOCK)
LEFT JOIN ChinaInformation.dbo.InformationUser B WITH(NOLOCK)
	ON A.InUser = B.UserID
WHERE TransactionNumber = @TransactionNumber

action和sql脚本很简单，就不说了，我们看一下新闻预览界面的代码。

@model ChinaInforControlCenter.Model.NewsInfo.NewsNativeEntity
@if (Model != null)
{
    <div style="text-align:center">
        <h3 style="color: #666666">@(Model.Title.Length > 50 ? Model.Title.Substring(0, 50) : Model.Title)</h3>
    </div>
    <div style="text-align: right; margin-right: 15px; font-size: 10px; color: #999999">
        @Model.InDate.Value.ToString("yyyy-MM-dd HH:mm:ss")
    </div>
    <div style="border: 1px dashed #CCCCFF; color: #333333;margin-top:5px;">
        <span>
            <label style="padding:10px">原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。</label>
        </span>
    </div>
    <div style="width:99%;margin-top:15px">
        @Html.Raw(Model.NewsContent)
    </div>
}
else
{
     <div style="border: 1px dashed #CC0033; color: #333333;">
        <span>
            您要预览的新闻已经被移除。
        </span>
    </div>
}
<div class="form-horizontal">
    <img src="~/Images/Base/share.png"/>
    <img src="~/Images/ThirdParty/baidu.jpg" class="img-panel-title" />
    <img src="~/Images/ThirdParty/qq.jpg" style="width:30px;height:40px"/>
    <img src="~/Images/ThirdParty/sina.jpg" style="margin-left:10px" class="img-panel-title" />
    <img src="~/Images/ThirdParty/weixin.jpg" style="width:40px;height:40px" />
</div>

由于找不到合适的图标，所以最底下的这些图片高度和宽度不统一。这个界面也很简单，就是绑定一个从action得到的NewsNativeEntity对象。在这里需要注意的是新闻内容的展示，需要使用Html.Raw来显示html，否则只显示原字符串，而不是html。我们最后来看一下这个新闻预览界面，我们就预览第一条新闻吧。