51 Mordern技术站

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

2017年12月28日 22:22

原创作品，转载时请务必以超链接形式标明文章原始出处，否则将追究法律责任。

最近实在是太忙，没时间写博客，只能夜里等孩子睡着了再写。感觉最近一个月又是在浪费时间，心里万分焦急。感觉自己的技术还不行，但是却没有时间去加强。吉日嘎啦的《程序员你伤不起》一书中讲到要孩子要晚了的坏处，比如自己30岁要的孩子，自己60岁了，孩子都30岁了，可能谁也照顾不上谁。其实我想说的是生早了也同样有坏处，比如现在只能晚上12点后写博客写程序。

好了，不多说了，来点高兴的，第一次也是第一个获得组内季度之星奖杯的我，终于觉得自己这三个月来当Master并且承担Coding任务的艰辛得到了很好的回报，先晒一下奖杯。

这就是我的那个奖杯，还不错吧，看到这个我就想到了杨坤的剪刀手。

今天我们主要看的是新闻发布界面，新闻发布界面很简单，先上图，还是那句话，无图无真相。

大家发现了么，这个富文本编辑器就是51cto使用的那个富文本编辑器，百度出的ueditor(http://ueditor.baidu.com/website/)。我们将其最新版本下载下来之后加入我们的项目中。

我是将其放到了Content下面，ok，我们看一下页面是如何使用的。

<form id="form_newsadd">
    <div id="div_newsManage" class="panel panel-primary">
        <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">
            <div class="form-inline">
                <label for="txtNewsTitle" class="control-label">
                    标题:
                </label>
                <input name="NewsTitle" id="txtNewsTitle" type="text" maxlength="20" class="form-control" style="width:500px" />
            </div>
            <div class="form-inline" style="line-height:30px">
                <label for="ddl_newstype" class="control-label">
                    分类:
                </label>
                @Html.DropDownList("NewsType", ViewBag.NewsTypeList as SelectList, string.Empty, new { id = "ddl_newstype", style = "margin-top:10px", @class = "form-control" })
            </div>
            <div class="row" style="margin-top:10px">
                <div class="col-md-12">
                    <label class="control-label">内容:</label>
                    <span style="color:red">（注:非会员最多只能输入10000字符）</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- 加载编辑器的容器 -->
                    <script id="container" name="content" type="text/plain">
                    </script>
                    <script src="~http://admin.51mordern.com/Content/ueditor/ueditor.config.js"></script>
                    <script src="~http://admin.51mordern.com/Content/ueditor/ueditor.all.js"></script>
                   
                    <script type="text/javascript">
                        jQuery(document).ready(function () {
                            var ue = UE.getEditor('container');
                            $("#btnSubmit").click(function () {
                                var newsTitle = $.trim($("#txtNewsTitle").val());
                                var newsType = $("#ddl_newstype").val();
 
                                if (newsTitle.length == 0) {
                                    alert("标题不能为空!");
                                    return;
                                }
 
                                if (newsType == "-999") {
                                    alert("请选择类别!");
                                    return;
                                }
 
                                var contentText = ue.getContentTxt();
                                if (contentText.length <= 200) {
                                    alert("请输入至少200个字符!");
                                    return;
                                }
 
                                $('#form_newsadd').ajaxSubmit({
                                    url: "/NewsManage/AddNativeNews/",
                                    datatype: 'json',
                                    type: "POST",
                                    success: function (data) {
                                        if (data == null) {
                                            return;
                                        }
 
                                        alert(data.msg);
                                    }
                                });
                            });
                        });
 
                    </script>
                </div>
            </div>
            <div style="margin-top:20px">
                <button id="btnSubmit" type="button" class="btn btn-primary btn-form-width">提交</button>
                <button id="btnCancel" type="reset" class="btn btn-warning btn-form-width">取消</button>
            </div>
        </div>
    </div>
</form>

整个Partial页面的html代码如上，没什么可说的，需要注意的是ueditor相关js的引用以及容器的加载。该页面我们并未使用angularjs，因为这个界面真的是很简单。在点击提交按钮的时候，我们将该form以ajax的方式提交到后台action。

在讲后台之前，我想说的是ueditor的一些配置，一个文件是ueditor.config.js，里面是关于ueditor的一些属性的配置，比如toolbar显示哪些项目(51cto网站使用时裁掉了一些toolbar项目)。

还有一些其他的属性，都有很详细的说明，一看就明白。

好的，还有另外一个配置文件就是net\config.json,这个文件中我们需要修改的是一些路径。

因为我们把ueditor放到了Content下面，所以我们需要把所有xxxUrlPrefix全部改成http://admin.51mordern.com/Content/ueditor/net/，否则上传的图片以及视频将不能在编辑器正确显示，演示一下。

在线管理列出的这些图片其实是我在图片搜索中搜索并上传的照片，我们随便选一张插入编辑器，看能否显示正确。

显示没啥问题，那我们再从本地选一张看看

还是不错的，我们看一下生成的html源码。

很简单，在这里就不多说了，图片是被上传到了http://admin.51mordern.com/Content/ueditor/net/upload/image/，路径其实就是上面提到的config.json中的imageUrlPrefix+imagePathFormat。这个editor其实是个不错的东西，又免费，还支持地图，视频，以及在线搜索图片。

唉，看见美女就饿。最后这个ueditor还能支持编程语言的高亮显示，当我们选择C#，粘贴代码进去后，点击工具栏上的预览

OK，我们再看一下后台的处理。

[HttpPost]
[ValidateInput(false)]
public JsonResult AddNativeNews()
{
    string content = Request["content"];
    string title = Request["NewsTitle"];
    string type = Request["NewsType"];
 
    NewsAddRequest request = new NewsAddRequest()
    {
        NewsTitle = title,
        NewsType = type,
        NewsContent = content
    };
 
    int suc = NewsMngBiz.GetInstance().AddNativeNews(request, this.UserID);
 
    if (suc > 0)
    {
        return GetJsonMessage("CM_001", JsonMsgType.SUCCESS);
    }
 
    return GetJsonMessage("CM_004");
}

在这里我要说的是，这里的Attribute ValidateInput=false。意思是让action不要检查传递过来的数据是否包含危险的字符。因为富文本编辑器提交过来的就是一段html，如果不加这个属性的话就会直接报错，提交看看。