ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能
本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统
先上截图：
添加页面如下：
下面来看代码部分
列表页如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="@Url.Content("~/css/demo.css")" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3./themes/default/easyui.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3./themes/icon.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7..min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Plugins/EasyUI-1.3./jquery.easyui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/js/common.js")"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Plugins/ueditor/ueditor.config.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Plugins/ueditor/ueditor.all.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".BtnSearch").bind("click", function () {
$(".BtnSearch").val("查询中...");
var _Label = $("#_Label").val();
var _Title = $("#_Title").val();
var _Content = $("#_Content").val();
window.location = '/ArticleInfo/?LabelName=' + _Label + '&_Title=' + _Title + '&_Content=' + _Content;
});
});
</script>
<script type="text/javascript">
//设置登录窗口
$(document).ready(function () {
$('#Win').window('close');
function InitializeWindow() {
$('#Win').window({
title: '',
width: ,
modal: true,
shadow: true,
closed: true,
height: ,
inline: true,
resizable: false
});
};
});
function OpenWin(Yewuyuan, Year, Month) {
$('#Win').window({ title: '添加文章', modal: true });
$('#Win').window('refresh', '/ArticleInfo/Add');
$('#Win').window('open');
};
function UpdateWin(ID) {
$('#Win').window({ title: '修改文章', modal: true });
$('#Win').window('refresh', '/ArticleInfo/Update/' + ID);
$('#Win').window('open');
};
function LookWin(ID, Title) {
$('#Win').window({ title: Title, modal: true });
$('#Win').window('refresh', '/ArticleInfo/Look/' + ID);
$('#Win').window('open');
};
</script>
<script type="text/javascript">
$(function () {
$("#delall").click(function () {
//确定至少选择一项
if ($("input[type='checkbox']:checked").length == ) {
$.messager.alert('系统提示', '请至少选择一项');
}
else {
$.messager.confirm('系统提示', '您确认想要删除记录吗？', function (r) {
if (r) {
//批量删除
$("input[type='checkbox']:checked").each(function () {
var id = $(this).attr("id").replace("CheckBox_", "");
$.post("/ArticleInfo/DeleteAll", { id: id },
function (data) {
});
});
};
$.messager.alert('系统提示', '操作完成!', 'info', function () { window.location = window.location.href; });
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#dg2').datagrid({
iconCls: 'icon-save',//图标
nowrap: false,
striped: true,
border: true,
collapsible: true,//是否可折叠的
fit: true,//自动大小
remoteSort: false,
maximizable: false, //最大化
minimizable: false, //最小化
closable: false, //可关闭
singleSelect: false,//是否单选
pagination: true//分页控件
});
//设置分页控件
var p2 = $('#dg2').datagrid('getPager');
$(p2).pagination({
pagination: true,
pageNumber: parseInt(@ViewBag.pageNumber),
pageSize: parseInt(@ViewBag.pageSize),//每页显示的记录条数，默认为10
total: parseInt(@ViewBag.RecordCount),
pageList: [, , , , , ],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
onBeforeRefresh: function () {
},
onRefresh: function (pageNumber, pageSize) {
window.location = '/ArticleInfo/?LabelName=@ViewBag.LabelName&_Title=@ViewBag._Title&_Content=@ViewBag._Content&pageNumber=' + pageNumber + '&pageSize=' + pageSize;
},
onChangePageSize: function () {
},
onSelectPage: function (pageNumber, pageSize) {
window.location = '/ArticleInfo/?LabelName=@ViewBag.LabelName&_Title=@ViewBag._Title&_Content=@ViewBag._Content&pageNumber=' + pageNumber + '&pageSize=' + pageSize;
}
});
});
</script>
</head>
<body>
<div class="web">
<div id="SearchBlock">
<fieldset>
<legend>信息查询:</legend>
<span>标签:</span>@Html.DropDownList("_Label", ViewBag.LabelInfoList as SelectList, "--请选择--", new {id="_Label" })
<span>标题:</span><input type="text" id="_Title" value="@ViewBag._Title" />
<span>内容:</span><input type="text" id="_Content" value="@ViewBag._Content" />
<input type="button" value="查询" class="BtnSearch" />
</fieldset>
</div>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-splitbutton" data-options="plain:true,menu:'#mm',iconCls:'icon-ok'">选择</a>
<span class="datagrid-btn-separator2"></span>
<a href="javascript:void()" id="delall" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cut'">删除所选</a>
<span class="datagrid-btn-separator2"></span>
<a href="javascript:void()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="OpenWin()">添加</a>
</div>
<div id="mm" style="width: 100px;">
<div id="checkall">全选</div>
<div id="checknone">取消全选</div>
<div id="check_revsern">反选</div>
</div>
<div class="TableBlock">
<table id="dg2" class="easyui-datagrid" title="文章管理" style="height: 365px;" data-options=" rownumbers: true,toolbar:'#toolbar'">
<thead>
<tr>
<th data-options="field:'CheckBox'"></th>
<th data-options="field:'LabelID'">标题</th>
<th data-options="field:'LabelName'">所属标签</th>
<th data-options="field:'CreateTime',width:200">创建时间</th>
<th data-options="field:'Act',width:60">操作</th>
<th data-options="field:'Look',width:60">查看</th>
</tr>
</thead>
@foreach (var item in (ViewBag.List as IList<SnsModels.ArticleInfo>))
{
<tr>
<td>
<input type="CheckBox" id="CheckBox_@item.ArticleID" name="CheckBox_@item.ArticleID" /></td>
<td>@item.Title</td>
<td>@item.LabelName</td>
<td>@item.CreateTime</td>
<td><a href="javascript:void();" onclick="UpdateWin('@item.ArticleID')">修改</a></td>
<td><a href="javascript:void();" onclick="LookWin('@item.ArticleID','@item.Title')">查看</a></td>
</tr>
}
</table>
</div>
<div id="Win" class="easyui-window" title="" icon="icon-save" style="width: 1000px; height: 570px;">
</div>
</div>
</body>
</html>
EeasyUI需要使用到的js
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3.6/themes/default/easyui.css")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Plugins/EasyUI-1.3.6/themes/icon.css")" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Plugins/EasyUI-1.3.6/jquery.easyui.min.js")"></script>
百度编辑器需要使用的js
<script src="@Url.Content("~/Plugins/ueditor/ueditor.config.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Plugins/ueditor/ueditor.all.js")" type="text/javascript"></script>
mvc数据验证需要使用的js
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Ajax提交表单需要使用的js
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
添加页面如下：
@{
Layout = null;
}
@model SnsModels.ArticleInfo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Add</title>
</head>
<body>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<div class="web">
@using (Ajax.BeginForm("AddSubmit", "ArticleInfo", new AjaxOptions { HttpMethod = "Post" }))
{
<table class="table" style="margin-top: 20px; margin-bottom: 20px;" cellspacing="">
<tr>
<td class="td1" style="width:200px;">@Html.LabelFor(m => m.Title)</td>
<td class="td2" style="width:800px;">@Html.TextBoxFor(m => m.Title, new { style="width:500px;"}) @Html.ValidationMessageFor(m => m.Title)</td>
</tr>
<tr>
<td class="td1">@Html.LabelFor(m => m.LabelName)</td>
<td class="td2">
@foreach (var item in (ViewBag.List as IList<SnsModels.LabelInfo>))
{
<input type="checkbox" id="LabelName" name="LabelName" value="@item.LabelName" />
<label>@item.LabelName</label>
}
@Html.ValidationMessageFor(m => m.LabelName)
</td>
</tr>
<tr>
<td class="td1">@Html.LabelFor(m => m.Content)</td>
<td class="td2">
@Html.TextArea("Content", "")
<script type="text/javascript">
var editor = new UE.ui.Editor();
editor.render("Content");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
</td>
</tr>
<tr>
<td class="td1"></td>
<td class="td2">
<input type="submit" value="提交" />
</td>
</tr>
</table>
}
</div>
</body>
</html>
下面这段代码是绑定百度富文本编辑器
@Html.TextArea("Content", "")
<script type="text/javascript">
var editor = new UE.ui.Editor();
editor.render("Content");
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
</script>
列表页新闻内容可能比较多，那我就调用存储过程进行分页，控制器如下：
public ActionResult Index(string LabelName,string _Title,string _Content, int pageNumber = , int pageSize = )
{
#region 分页
SnsModels.PageinationInfo pageinationInfo = new SnsModels.PageinationInfo();
pageinationInfo.pageIndex = pageNumber;
pageinationInfo.pageSize = pageSize;
pageinationInfo.RecordCount = ;
pageinationInfo.strField = "*";
pageinationInfo.strOrderBy = true;
pageinationInfo.strSortField = "ArticleID desc";
pageinationInfo.strSortKey = "ArticleID";
pageinationInfo.strTable = "ArticleInfo";
pageinationInfo.strWhere = " 1=1";
pageinationInfo.UsedTime = ;
pageinationInfo.PageCount = ;
#endregion IList<SnsModels.LabelInfo> LabelInfoList = Repository.GetList<SnsModels.LabelInfo>();
ViewBag.LabelInfoList = new SelectList(LabelInfoList,"LabelName","LabelName"); #region 参数处理
if (LabelName != null)
{
if (!string.IsNullOrEmpty(LabelName))
{
pageinationInfo.strWhere += " and LabelName like '%" + LabelName.Trim() + "%'";
ViewBag.LabelInfoList = new SelectList(LabelInfoList, "LabelName", "LabelName",LabelName.Trim());
}
}
if (_Title != null)
{
if (!string.IsNullOrEmpty(_Title))
{
pageinationInfo.strWhere += " and Title like '%" + _Title.Trim() + "%'";
}
}
if (_Content != null)
{
if (!string.IsNullOrEmpty(_Content))
{
pageinationInfo.strWhere += " and Content like '%" + _Content.Trim() + "%'";
}
}
#endregion IList<SnsModels.ArticleInfo> List = PageinationInfoManager.GetPageinationInfoList<SnsModels.ArticleInfo>(pageinationInfo); #region 传值
ViewBag.List = List;
ViewBag.pageNumber = pageNumber;
ViewBag.pageSize = pageSize;
ViewBag.RecordCount = pageinationInfo.RecordCount;
ViewBag.LabelName = LabelName;
ViewBag._Title = _Title;
ViewBag._Content = _Content;
#endregion return View();
}
这个是EasyUI分页和调用存储过程进行分页结合的，1000万数据测试，页面基本不会有卡的感觉。
下面是添加新闻的提交事件，如下：
[HttpPost]
[ValidateInput(false)]
public ActionResult AddSubmit(SnsModels.ArticleInfo Model, FormCollection collection)
{
try
{
if (Request.IsAjaxRequest())
{
if (collection.GetValues("LabelName") != null)//这是判断name为checkboxRole的checkbox的值是否为空，若为空返回NULL;
{
Model.LabelName = collection.GetValue("LabelName").AttemptedValue;//AttemptedValue返回一个以，分割的字符串
}
if (Model.LabelName == null)
{
return JavaScript("$.messager.alert('系统提示', '未选择标签...','info');");
}
if (ModelState.IsValid)
{
if (Repository.Create<SnsModels.ArticleInfo>(Model))
{
return JavaScript("$.messager.alert('系统提示', '操作成功...', 'info', function () {window.location=window.location.href;});");
}
else
{
return JavaScript("$.messager.alert('系统提示', '操作失败...','info');");
}
}
else
{
return JavaScript("$.messager.alert('系统提示', '数据验证失败...','info');");
}
}
else
{
return Content("<script>alert('请求发生异常...');parent.location='/';</script>");
}
}
catch (Exception ex)
{
return JavaScript("$.messager.alert('系统提示', '" + ex.Message.ToString() + "','info');");
}
}
因为文章中使用了编辑器，对于string类型的Content装载的可能带有不安全因素的内容，所以，我们要对表单提交去除威胁验证，所以添加 [ValidateInput(false)]
但是这并不意味着我们再Model中对数据部验证，我们还是有 ModelState.IsValid 。
EasyUI部分可以参考EasyUI官网极其API， 百度富文本编辑器也可以查看其官网，都是比较好用的东西。
本群提供ASP.NET MVC,EF,LINQ,WEB API技术支持，不在乎人多，在乎人精。
ASP.NET MVC群 171560784
诚邀各路高手、初学者加入。
ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能的更多相关文章
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
- 在MVC中应用百度富文本编辑器
1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...
- 对于MVC中应用百度富文本编辑器问题的解决办法
1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- JAVA 集成 Ueditor 百度富文本编辑器
开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
随机推荐
- 将Sublime Text 2搭建成一个好用的IDE(转)
将Sublime Text 2搭建成一个好用的IDE 说起编辑器,可能大部分人要推荐的是Vim和Emacs,本人用过Vim,功能确实强大,但是不是很习惯,之前一直有朋友推荐SUblime Text 2 ...
- JMeter模拟多个用户进行登录
1.将用户名密码保存在cvs或txt文件中格式为 username1,password1 username2,password2 username3,password4 一行一个,用户名和密码之间使用 ...
- SICP 练习 （2.12）解决摘要 :不同的实现时间
SICP 2.12 要求我们定义一个构造函数make-center-percent,它接收两个參数,分别代表中心点和一个误差百分比.我们须要通过这个构造函数产生一个区间.此外还须要定义一个选择函数pe ...
- js 正则学习小记之匹配字符串
原文:js 正则学习小记之匹配字符串 今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高 ...
- HTTPS那个东西(一)-HTTPS原理
HTTPS那个东西(一) 最近看了<http权威指南>几个章节,对HTTPS随着节,了一些资料,遂打算记录一下心得.写的仓促,肯定有非常多错误的地方,欢迎大家指正. 1.HTTP是什么 那 ...
- 使用PHP顶替JS有趣DOM
較简单,我须要把一个导航页的数据整理好写入数据库.一个比較直观的方法是对html文件进行分析.通用的方法是用php的正則表達式来匹配.可是这样做开发和维护都非常困难,代码可读性非常差. 导航页的数据都 ...
- ASP.NET MVC学习之控制器篇扩展性
原文:ASP.NET MVC学习之控制器篇扩展性 一.前言 在之前的一篇随笔中已经讲述过控制器,而今天的随笔是作为之前的扩展. 二.正文 1.自定义动作方法 相信大家在开发过程一定会遇到动作方法的重名 ...
- Drop dual
一些互联网用户删除dual表还有一个问题: 删除dual时间表hang直播,然后直接shutdown abort.话又说回来,当您启动数据库.发现open时间已经hang直播.但该数据库是真正开放的另 ...
- 【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
- Utility Classes Are Evil
原文地址:http://alphawang.com/blog/2014/09/utility-classes-are-evil/ This post is a summary of this arti ...