ASP.NET MVC + 百度富文本編輯器 + EasyUi + EntityFrameWork 制作一個添加新聞功能

本文轉載自查看原文 2014-07-29 15:00 2916 ASP.NET MVC/ Entity FrameWork/ EasyUI

本文將交大伙怎么集成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="@Url.Content("~/css/demo.css")"  rel="stylesheet"/>
 13     <link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3.6/themes/default/easyui.css")" />
 14     <link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3.6/themes/icon.css")" />
 15     <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
 16     <script type="text/javascript" src="@Url.Content("~/Plugins/EasyUI-1.3.6/jquery.easyui.min.js")"></script>
 17     <script type="text/javascript" src="@Url.Content("~/js/common.js")"> </script>
 18     <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
 19     <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 20     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
 21 
 22     <script src="@Url.Content("~/Plugins/ueditor/ueditor.config.js")" type="text/javascript"></script>
 23     <script src="@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="@ViewBag._Title" />
146                 <span>內容:</span><input type="text" id="_Content" value="@ViewBag._Content" />
147                 <input type="button" value="查詢" class="BtnSearch" />
148             </fieldset>
149         </div>
150         <div id="toolbar">
151             <a href="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="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="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="javascript:void();" onclick="UpdateWin('@item.ArticleID')">修改</a></td>
183                         <td><a href="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

百度編輯器需要使用的js

mvc數據驗證需要使用的js

Ajax提交表單需要使用的js

添加頁面如下：

 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="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
16     <script src="@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="@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="提交" />
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             #endregion
17 
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             #endregion
45 
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             #endregion
58 
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                         else
24                         {
25                             return JavaScript("$.messager.alert('系統提示', '操作失敗...','info');");
26                         }
27                     }
28                     else
29                     {
30                         return JavaScript("$.messager.alert('系統提示', '數據驗證失敗...','info');");
31                     }
32                 }
33                 else
34                 {
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
誠邀各路高手、初學者加入。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ASP.NET MVC5 中百度ueditor富文本編輯器的使用（轉） ASP.NET MVC5 中百度ueditor富文本編輯器的使用百度富文本編輯器UEDITOR Ueditor百度富文本編輯器 Ueditor百度富文本編輯器添加h5手機端預覽功能 vue項目添加百度富文本編輯器（ueditor） UEditor 百度富文本編輯器 .Net實例 laravel-admin 富文本編輯器-百度編輯器的配置 ASP.NET MVC異步上傳圖片和富文本編輯器的使用詳解 ASP.NET MVC實現layui富文本編輯器應用