首页 > 代码库 > ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统

先上截图:

添加页面如下:

下面来看代码部分

列表页如下:

  1 @{  2     Layout = null;  3 }  4   5 <!DOCTYPE html>  6   7 <html>  8 <head>  9     <meta name="viewport" content="width=device-width" /> 10     <title>Index</title> 11  12     <link href=http://www.mamicode.com/"@Url.Content("~/css/demo.css")"  rel="stylesheet"/> 13     <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"@Url.Content("~/Plugins/EasyUI-1.3.6/themes/default/easyui.css")" /> 14     <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"@Url.Content("~/Plugins/EasyUI-1.3.6/themes/icon.css")" /> 15     <script type="text/javascript" src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script> 16     <script type="text/javascript" src=http://www.mamicode.com/"@Url.Content("~/Plugins/EasyUI-1.3.6/jquery.easyui.min.js")"></script> 17     <script type="text/javascript" src=http://www.mamicode.com/"@Url.Content("~/js/common.js")"> </script> 18     <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 19     <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 20     <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 21  22     <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/ueditor/ueditor.config.js")" type="text/javascript"></script> 23     <script src=http://www.mamicode.com/"@Url.Content("~/Plugins/ueditor/ueditor.all.js")" type="text/javascript"></script> 24  25     <script type="text/javascript"> 26         $(document).ready(function () { 27             $(".BtnSearch").bind("click", function () { 28                 $(".BtnSearch").val("查询中..."); 29                 var _Label = $("#_Label").val(); 30                 var _Title = $("#_Title").val(); 31                 var _Content = $("#_Content").val(); 32                 window.location = /ArticleInfo/?LabelName= + _Label + &_Title= + _Title + &_Content= + _Content; 33             }); 34         }); 35  36     </script> 37     <script type="text/javascript"> 38         //设置登录窗口 39         $(document).ready(function () { 40             $(#Win).window(close); 41             function InitializeWindow() { 42                 $(#Win).window({ 43                     title: ‘‘, 44                     width: 1000, 45                     modal: true, 46                     shadow: true, 47                     closed: true, 48                     height: 570, 49                     inline: true, 50                     resizable: false 51                 }); 52             }; 53         }); 54         function OpenWin(Yewuyuan, Year, Month) { 55             $(#Win).window({ title: 添加文章, modal: true }); 56             $(#Win).window(refresh, /ArticleInfo/Add); 57             $(#Win).window(open); 58         }; 59         function UpdateWin(ID) { 60             $(#Win).window({ title: 修改文章, modal: true }); 61             $(#Win).window(refresh, /ArticleInfo/Update/ + ID); 62             $(#Win).window(open); 63         }; 64         function LookWin(ID, Title) { 65             $(#Win).window({ title: Title, modal: true }); 66             $(#Win).window(refresh, /ArticleInfo/Look/ + ID); 67             $(#Win).window(open); 68         }; 69     </script> 70  71     <script type="text/javascript"> 72         $(function () { 73             $("#delall").click(function () { 74                 //确定至少选择一项 75                 if ($("input[type=‘checkbox‘]:checked").length == 0) { 76                     $.messager.alert(系统提示, 请至少选择一项); 77                 } 78                 else { 79                     $.messager.confirm(系统提示, 您确认想要删除记录吗?, function (r) { 80                         if (r) { 81                             //批量删除 82                             $("input[type=‘checkbox‘]:checked").each(function () { 83                                 var id = $(this).attr("id").replace("CheckBox_", ""); 84                                 $.post("/ArticleInfo/DeleteAll", { id: id }, 85                             function (data) { 86                             }); 87                             }); 88                         }; 89                         $.messager.alert(系统提示, 操作完成!, info, function () { window.location = window.location.href; }); 90                     }); 91                 } 92             }); 93  94         }); 95     </script> 96  97     <script type="text/javascript"> 98         $(document).ready(function () { 99             $(#dg2).datagrid({100                 iconCls: icon-save,//图标  101                 nowrap: false,102                 striped: true,103                 border: true,104                 collapsible: true,//是否可折叠的  105                 fit: true,//自动大小  106                 remoteSort: false,107                 maximizable: false, //最大化108                 minimizable: false,  //最小化109                 closable: false, //可关闭110                 singleSelect: false,//是否单选  111                 pagination: true//分页控件  112             });113             //设置分页控件  114             var p2 = $(#dg2).datagrid(getPager);115             $(p2).pagination({116                 pagination: true,117                 pageNumber: parseInt(@ViewBag.pageNumber),118                 pageSize: parseInt(@ViewBag.pageSize),//每页显示的记录条数,默认为10 119                 total: parseInt(@ViewBag.RecordCount),120                 pageList: [10, 15, 20, 25, 30, 50],//可以设置每页记录条数的列表  121                 beforePageText: ,//页数文本框前显示的汉字  122                 afterPageText: 页    共 {pages} 页,123                 displayMsg: 当前显示 {from} - {to} 条记录   共 {total} 条记录,124                 onBeforeRefresh: function () {125                 },126                 onRefresh: function (pageNumber, pageSize) {127                     window.location = /ArticleInfo/?LabelName=@ViewBag.LabelName&_Title=@ViewBag._Title&_Content=@ViewBag._Content&pageNumber= + pageNumber + &pageSize= + pageSize;128                 },129                 onChangePageSize: function () {130                 },131                 onSelectPage: function (pageNumber, pageSize) {132                     window.location = /ArticleInfo/?LabelName=@ViewBag.LabelName&_Title=@ViewBag._Title&_Content=@ViewBag._Content&pageNumber= + pageNumber + &pageSize= + pageSize;133                 }134             });135         });136     </script>137 138 </head>139 <body>140     <div class="web">141         <div id="SearchBlock">142             <fieldset>143                 <legend>信息查询:</legend>144                 <span>标签:</span>@Html.DropDownList("_Label", ViewBag.LabelInfoList as SelectList, "--请选择--", new {id="_Label" })145                 <span>标题:</span><input type="text" id="_Title" value=http://www.mamicode.com/"@ViewBag._Title" />146                 <span>内容:</span><input type="text" id="_Content" value=http://www.mamicode.com/"@ViewBag._Content" />147                 <input type="button" value=http://www.mamicode.com/"查询" class="BtnSearch" />148             </fieldset>149         </div>150         <div id="toolbar">151             <a href=http://www.mamicode.com/"javascript:void(0)" class="easyui-splitbutton" data-options="plain:true,menu:‘#mm‘,iconCls:‘icon-ok‘">选择</a>152             <span class="datagrid-btn-separator2"></span>153             <a href=http://www.mamicode.com/"javascript:void()" id="delall" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-cut‘">删除所选</a>154             <span class="datagrid-btn-separator2"></span>155             <a href=http://www.mamicode.com/"javascript:void()" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-add‘" onclick="OpenWin()">添加</a>156         </div>157         <div id="mm" style="width: 100px;">158             <div id="checkall">全选</div>159             <div id="checknone">取消全选</div>160             <div id="check_revsern">反选</div>161         </div>162         <div class="TableBlock">163             <table id="dg2" class="easyui-datagrid" title="文章管理" style="height: 365px;" data-options=" rownumbers: true,toolbar:‘#toolbar‘">164                 <thead>165                     <tr>166                         <th data-options="field:‘CheckBox‘"></th>167                         <th data-options="field:‘LabelID‘">标题</th>168                         <th data-options="field:‘LabelName‘">所属标签</th>169                         <th data-options="field:‘CreateTime‘,width:200">创建时间</th>170                         <th data-options="field:‘Act‘,width:60">操作</th>171                         <th data-options="field:‘Look‘,width:60">查看</th>172                     </tr>173                 </thead>174                 @foreach (var item in (ViewBag.List as IList<SnsModels.ArticleInfo>))175                 { 176                     <tr>177                         <td>178                             <input type="CheckBox" id="CheckBox_@item.ArticleID" name="CheckBox_@item.ArticleID" /></td>179                         <td>@item.Title</td>180                         <td>@item.LabelName</td>181                         <td>@item.CreateTime</td>182                         <td><a href=http://www.mamicode.com/"javascript:void();" onclick="UpdateWin(‘@item.ArticleID‘)">修改</a></td>183                         <td><a href=http://www.mamicode.com/"javascript:void();" onclick="LookWin(‘@item.ArticleID‘,‘@item.Title‘)">查看</a></td>184                     </tr>185                 }186             </table>187         </div>188 189         <div id="Win" class="easyui-window" title="" icon="icon-save" style="width: 1000px; height: 570px;">190         </div>191 192     </div>193 </body>194 </html>

   EeasyUI需要使用到的js   

    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/@Url.Content("~/Plugins/EasyUI-1.3.6/themes/default/easyui.css")" />
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/@Url.Content("~/Plugins/EasyUI-1.3.6/themes/icon.css")" />
    <script type="text/javascript" src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
    <script type="text/javascript" src="http://www.mamicode.com/@Url.Content("~/Plugins/EasyUI-1.3.6/jquery.easyui.min.js")"></script>

   百度编辑器需要使用的js

   <script src="http://www.mamicode.com/@Url.Content("~/Plugins/ueditor/ueditor.config.js")" type="text/javascript"></script>
    <script src="http://www.mamicode.com/@Url.Content("~/Plugins/ueditor/ueditor.all.js")" type="text/javascript"></script>

    mvc数据验证需要使用的js

    <script src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

     Ajax提交表单需要使用的js

    <script src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

 

    添加页面如下:

  

 1 @{ 2     Layout = null; 3 } 4 @model SnsModels.ArticleInfo 5  6 <!DOCTYPE html> 7  8 <html> 9 <head>10     <meta name="viewport" content="width=device-width" />11     <title>Add</title>12 13 </head>14 <body>15     <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>16     <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>17     <div class="web">18         @using (Ajax.BeginForm("AddSubmit", "ArticleInfo", new AjaxOptions { HttpMethod = "Post" }))19         {20             <table class="table" style="margin-top: 20px; margin-bottom: 20px;" cellspacing="0">21                 <tr>22                     <td class="td1" style="width:200px;">@Html.LabelFor(m => m.Title)</td>23                     <td class="td2" style="width:800px;">@Html.TextBoxFor(m => m.Title, new { style="width:500px;"}) @Html.ValidationMessageFor(m => m.Title)</td>24                 </tr>25                 <tr>26                     <td class="td1">@Html.LabelFor(m => m.LabelName)</td>27                     <td class="td2">28                         @foreach (var item in (ViewBag.List as IList<SnsModels.LabelInfo>))29                         {30                             <input type="checkbox" id="LabelName" name="LabelName" value=http://www.mamicode.com/"@item.LabelName" />31                             <label>@item.LabelName</label>32                         }33                         @Html.ValidationMessageFor(m => m.LabelName)34                     </td>35                 </tr>36                 <tr>37                     <td class="td1">@Html.LabelFor(m => m.Content)</td>38                     <td class="td2">39                         @Html.TextArea("Content", "")40                         <script type="text/javascript">41                             var editor = new UE.ui.Editor();42                             editor.render("Content");43                             //1.2.4以后可以使用一下代码实例化编辑器44                             //UE.getEditor(‘myEditor‘)45                         </script>46                     </td>47                 </tr>48                 <tr>49                     <td class="td1"></td>50                     <td class="td2">51                         <input type="submit" value=http://www.mamicode.com/"提交" />52                     </td>53                 </tr>54             </table>55         }56     </div>57 </body>58 </html>

下面这段代码是绑定百度富文本编辑器

1 @Html.TextArea("Content", "")2                         <script type="text/javascript">3                             var editor = new UE.ui.Editor();4                             editor.render("Content");5                             //1.2.4以后可以使用一下代码实例化编辑器6                             //UE.getEditor(‘myEditor‘)7                         </script>

 列表页新闻内容可能比较多,那我就调用存储过程进行分页,控制器如下:

 1 public ActionResult Index(string LabelName,string _Title,string _Content, int pageNumber = 1, int pageSize = 10) 2         { 3             #region 分页 4             SnsModels.PageinationInfo pageinationInfo = new SnsModels.PageinationInfo(); 5             pageinationInfo.pageIndex = pageNumber; 6             pageinationInfo.pageSize = pageSize; 7             pageinationInfo.RecordCount = 0; 8             pageinationInfo.strField = "*"; 9             pageinationInfo.strOrderBy = true;10             pageinationInfo.strSortField = "ArticleID desc";11             pageinationInfo.strSortKey = "ArticleID";12             pageinationInfo.strTable = "ArticleInfo";13             pageinationInfo.strWhere = " 1=1";14             pageinationInfo.UsedTime = 0;15             pageinationInfo.PageCount = 0;16             #endregion17 18             IList<SnsModels.LabelInfo> LabelInfoList = Repository.GetList<SnsModels.LabelInfo>();19             ViewBag.LabelInfoList = new SelectList(LabelInfoList,"LabelName","LabelName");20 21             #region 参数处理22             if (LabelName != null)23             {24                 if (!string.IsNullOrEmpty(LabelName))25                 {26                     pageinationInfo.strWhere += " and LabelName like ‘%" + LabelName.Trim() + "%‘";27                     ViewBag.LabelInfoList = new SelectList(LabelInfoList, "LabelName", "LabelName",LabelName.Trim());28                 }29             }30             if (_Title != null)31             {32                 if (!string.IsNullOrEmpty(_Title))33                 {34                     pageinationInfo.strWhere += " and Title like ‘%" + _Title.Trim() + "%‘";35                 }36             }37             if (_Content != null)38             {39                 if (!string.IsNullOrEmpty(_Content))40                 {41                     pageinationInfo.strWhere += " and Content like ‘%" + _Content.Trim() + "%‘";42                 }43             }44             #endregion45 46 47             IList<SnsModels.ArticleInfo> List = PageinationInfoManager.GetPageinationInfoList<SnsModels.ArticleInfo>(pageinationInfo);48 49             #region 传值50             ViewBag.List = List;51             ViewBag.pageNumber = pageNumber;52             ViewBag.pageSize = pageSize;53             ViewBag.RecordCount = pageinationInfo.RecordCount;54             ViewBag.LabelName = LabelName;55             ViewBag._Title = _Title;56             ViewBag._Content = _Content;57             #endregion58 59             return View();60         }

这个是EasyUI分页和调用存储过程进行分页结合的,1000万数据测试,页面基本不会有卡的感觉。

下面是添加新闻的提交事件,如下:

 1 [HttpPost] 2         [ValidateInput(false)] 3         public ActionResult AddSubmit(SnsModels.ArticleInfo Model, FormCollection collection) 4         { 5             try 6             { 7                 if (Request.IsAjaxRequest()) 8                 { 9                     if (collection.GetValues("LabelName") != null)//这是判断name为checkboxRole的checkbox的值是否为空,若为空返回NULL;10                     {11                         Model.LabelName = collection.GetValue("LabelName").AttemptedValue;//AttemptedValue返回一个以,分割的字符串12                     }13                     if (Model.LabelName == null)14                     {15                         return JavaScript("$.messager.alert(‘系统提示‘, ‘未选择标签...‘,‘info‘);");16                     }17                     if (ModelState.IsValid)18                     {19                         if (Repository.Create<SnsModels.ArticleInfo>(Model))20                         {21                             return JavaScript("$.messager.alert(‘系统提示‘, ‘操作成功...‘, ‘info‘, function () {window.location=window.location.href;});");22                         }23                         else24                         {25                             return JavaScript("$.messager.alert(‘系统提示‘, ‘操作失败...‘,‘info‘);");26                         }27                     }28                     else29                     {30                         return JavaScript("$.messager.alert(‘系统提示‘, ‘数据验证失败...‘,‘info‘);");31                     }32                 }33                 else34                 {35                     return Content("<script>alert(‘请求发生异常...‘);parent.location=‘/‘;</script>");36                 }37             }38             catch (Exception ex)39             {40                 return JavaScript("$.messager.alert(‘系统提示‘, ‘" + ex.Message.ToString() + "‘,‘info‘);");41             }42         }

因为文章中使用了编辑器,对于string类型的Content装载的可能带有不安全因素的内容,所以,我们要对表单提交去除威胁验证,所以添加 [ValidateInput(false)]

但是这并不意味着我们再Model中对数据部验证,我们还是有 ModelState.IsValid

EasyUI部分可以参考EasyUI官网极其API, 百度富文本编辑器也可以查看其官网,都是比较好用的东西。

 

本群提供ASP.NET MVC,EF,LINQ,WEB API技术支持,不在乎人多,在乎人精。
ASP.NET MVC群 171560784  
诚邀各路高手、初学者加入。