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

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

好了,本篇文章就到这里,有需要源码的同学请联系我,联系我之前必须对文章进行评论。

时间: 2024-10-27 07:17:57

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

ASP.NET MVC4+BootStrap 实战(十)

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

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

最近实在是太忙,没时间写博客,只能夜里等孩子睡着了再写.感觉最近一个月又是在浪费时间,心里万分焦急.感觉自己的技术还不行,但是却没有时间去加强.吉日嘎啦的<程序员你伤不起>一书中讲到要孩子要晚了的坏处,比如自己30岁要的孩子,自己60岁了,孩子都30岁了,可能谁也照顾不上谁.其实我想说的是生早了也同样有坏处,比如现在只能晚上12点后写博客写程序. 好了,不多说了,来点高兴的,第一次也是第一个获得组内季度之星奖杯的我,终于觉得自己这三个月来当Master并且承担Coding任务的艰辛得到了很好的

ASP.NET MVC4+BootStrap 实战(二)

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

ASP.NET MVC4+BootStrap 实战(四)

现在呆惯了外企,觉得跳槽出去都没地方去,在外企请假干什么的方便,而且相对轻松,就是money少了点,但是饭也要吃饱啊. 今天要讲的当然是最后一个按钮了,fix按钮.我们看一下js代码 $("#btnfix").click(function () {         $.ajax({             url: "/Home/SolrDataFix?pam=" + new Date().toTimeString(),             type: &quo

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 实战(八)

今天西安下雪了,贼冷,我去.今年的年终奖还没发,都快揭不开锅了. 今天的话我们来看一下用户删除和修改,天太冷,先调一下胃口,上图,无图无真相. 看到了吧,新增了选择列,操作列,以及页面最下面的全选,反选,新增,删除按钮. 我们先来看一下全选反选吧,经过修改之后,我们的Table变成如下的代码 <table class="table table-bordered table-striped table-hover" ng-init="load()">