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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文将交大伙怎么集成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/[email protected]&_Title=@ViewBag._Title&_Content=@ViewBag._Content&pageNumber=' + pageNumber + '&pageSize=' + pageSize;
128                 },
129                 onChangePageSize: function () {
130                 },
131                 onSelectPage: function (pageNumber, pageSize) {
132                     window.location = '/ArticleInfo/[email protected]&_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="[email protected]" name="[email protected]" /></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 
                       
                    
                     
                      



鲜花




握手




雷人




路过




鸡蛋