一、kindeditor
网页中经常会用到富文本框编辑器，第三方的富文本框编辑器很多，本课程主要介绍kindeditor的基本使用。
官网网站： http://kindeditor.net
富文本框在asp.net中提交数据的时候，会涉及到格式的HTML内容，asp.net会认为是不安全操作，需要获取
kindeditor文本框内容，需要在在aspx页面取消安全检查：
<%@ Page ValidateRequest="false" %>
（1）默认参数调用
0073.PNG
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KindEditor-常用功能</title>
<script src="kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (k) {
//最简单的调用模式
KindEditor.options.filterMode = false; //关闭过滤模式，保留所有标签
window.editor = k.create('#txtContent');
//或者
//var editor = k.create('#txtContent');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtContent" runat="server" Height="356px" TextMode="MultiLine"
Width="748px" ClientIDMode="Static"></asp:TextBox>
</div>
<div>
<asp:Button ID="btSubmit" runat="server" Text="提交数据"
onclick="btSubmit_Click" />
</div>
<div id="divResult" runat="server">
</div>
</form>
</body>
</html>
protected void btSubmit_Click(object sender, EventArgs e)
{
this.divResult.InnerHtml = this.txtContent.Text;
}
（2）设置文件上传
【1】上传文件需要LitJson.dll的支持，先添加引用导入dll
【2】如果提示上传路径不存在，则在kindeditor下面创建attached文件夹即可
【3】上传文件代码在kindeditor/asp.net/upload_json.ashx中，如需要进行安全性判断，自行修改此文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KindEditor-常用功能</title>
<script src="kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (k) {
//设置文件上传程序
KindEditor.options.filterMode = false; //关闭过滤模式，保留所有标签
window.editor = k.create('#txtContent', {
uploadJson: 'kindeditor/asp.net/upload_json.ashx',
fileManagerJson: 'kindeditor/asp.net/file_manager_json.ashx',
allowFileManager: true //图片空间管理
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtContent" runat="server" Height="356px" TextMode="MultiLine"
Width="748px" ClientIDMode="Static"></asp:TextBox>
</div>
<div>
<asp:Button ID="btSubmit" runat="server" Text="提交数据"
onclick="btSubmit_Click" />
</div>
<div id="divResult" runat="server">
</div>
</form>
</body>
</html>
protected void btSubmit_Click(object sender, EventArgs e)
{
this.divResult.InnerHtml = this.txtContent.Text;
}
如果出于安全考虑，也可以屏蔽所有的上传属性：
KindEditor.options.filterMode = false; //关闭过滤模式，保留所有标签
window.editor = k.create('#txtContent', {
allowImageUpload:false,
allowFlashUpload:false,
allowMediaUpload:false,
allowFileUpload:false
});
（3）自定义工具栏
配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
[
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak',
'link', 'unlink', '|', 'about'
]
| source | HTML代码 |
|---|---|
| preview | 预览 |
| undo | 后退 |
| redo | 前进 |
| cut | 剪切 |
| copy | 复制 |
| paste | 粘贴 |
| plainpaste | 粘贴为无格式文本 |
| wordpaste | 从Word粘贴 |
| selectall | 全选 |
| justifyleft | 左对齐 |
| justifycenter | 居中 |
| justifyright | 右对齐 |
| justifyfull | 两端对齐 |
| insertorderedlist | 编号 |
| insertunorderedlist | 项目符号 |
| indent | 增加缩进 |
| outdent | 减少缩进 |
| subscript | 下标 |
| superscript | 上标 |
| formatblock | 段落 |
| fontname | 字体 |
| fontsize | 文字大小 |
| forecolor | 文字颜色 |
| hilitecolor | 文字背景 |
| bold | 粗体 |
| italic | 斜体 |
| underline | 下划线 |
| strikethrough | 删除线 |
| removeformat | 删除格式 |
| image | 图片 |
| flash | Flash |
| media | 视音频 |
| table | 表格 |
| hr | 插入横线 |
| emoticons | 插入表情 |
| link | 超级链接 |
| unlink | 取消超级链接 |
| fullscreen | 全屏显示 |
| about | 关于 |
| 打印 | |
| code | 插入程序代码 |
| map | 地图 |
| lineheight | 行距 |
| clearhtml | 清理HTML代码 |
| pagebreak | 插入分页符 |
| quickformat | 一键排版 |
| insertfile | 插入文件 |
| template | 插入模板 |
自定义工具栏示例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KindEditor-常用功能</title>
<script src="kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (k) {
//自定义工具栏
KindEditor.options.filterMode = false; //关闭过滤模式，保留所有标签
window.editor = k.create('#txtContent', {
items: ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/','formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage','flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak','anchor', 'link', 'unlink', '|', 'about']
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtContent" runat="server" Height="356px" TextMode="MultiLine"
Width="748px" ClientIDMode="Static"></asp:TextBox>
</div>
<div>
<asp:Button ID="btSubmit" runat="server" Text="提交数据"
onclick="btSubmit_Click" />
</div>
<div id="divResult" runat="server">
</div>
</form>
</body>
</html>
protected void btSubmit_Click(object sender, EventArgs e)
{
this.divResult.InnerHtml = this.txtContent.Text;
}
（4）常见简洁模式
0074.PNG
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>KindEditor-简单模式</title>
<link href="kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
<script src="kindeditor/kindeditor-all.js" type="text/javascript"></script>
<script src="kindeditor/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (k) {
//自定义工具栏
KindEditor.options.filterMode = false; //关闭过滤模式，保留所有标签
window.editor = k.create('#txtContent', {
//resizeType: 1,
//allowPreviewEmoticons: false,
allowImageUpload: false,
items: ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist','insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtContent" runat="server" Height="356px" TextMode="MultiLine"
Width="748px" ClientIDMode="Static"></asp:TextBox>
</div>
<div>
<asp:Button ID="btSubmit" runat="server" Text="提交数据" onclick="btSubmit_Click" />
</div>
<div id="divResult" runat="server">
</div>
</form>
</body>
</html>
protected void btSubmit_Click(object sender, EventArgs e)
{
this.divResult.InnerHtml = this.txtContent.Text;
}
二、AspNetPager
0075.PNG
AspNetPager可以帮助我们快速实现数据分页效果
官方网站： http://www.webdiyer.com
AspNetPager的使用方法：
【1】添加引用：AspNetPager.dll
【2】工具箱中添加选项卡,选项卡中添加控件->浏览，找到dll
【3】页面添加
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
【4】设置属性PageSize.
【5】在AspNetPager1_PageChanged中编写代码
AspNetPager使用示例代码：
数据库代码：
--专业
create table Major
(
MajorId int primary key identity(1,1), --编号
MajorName varchar(50) not null --专业名称
)
insert into Major(MajorName) values('计算机科学与应用')
insert into Major(MajorName) values('建筑学')
insert into Major(MajorName) values('美术学')
insert into Major(MajorName) values('戏剧与影视学')
--学生
create table Student
(
StudentId int primary key identity(1,1), --编号
MajorId int not null, --专业编号
StudentName varchar(50) not null, --学生姓名
StudentSex varchar(50) not null, --学生性别
StudentPhone varchar(50) not null, --电话
StudentMail varchar(50) not null, --邮箱
StudentImg varchar(50) not null --相片
)
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(1,'刘备','男','13554878965','liubei@qq.com','1.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(1,'关羽','男','15389874521','guanyu@qq.com','2.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(2,'张飞','男','18987542525','zhangfei@qq.com','3.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(2,'赵云','男','13696896547','zhaoyun@qq.com','4.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(3,'黄忠','男','13778777888','huangzhong@qq.com','5.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(3,'马超','男','13221212325','machao@qq.com','6.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(4,'魏延','男','13996147455','weiyan@qq.com','7.jpg')
insert into Student(MajorId,StudentName,StudentSex,StudentPhone,StudentMail,StudentImg)
values(4,'周仓','男','13437522241','zhoucang@qq.com','8.jpg')
实体类代码：
public class MajorEntity
{
public int MajorId { get; set; } //编号
public string MajorName { get; set; } //专业名称
}
public class StudentEntity
{
public int StudentId { get; set; } //编号
public int MajorId { get; set; } //专业编号
public string StudentName { get; set; } //学生性别
public string StudentSex { get; set; } //学生性别
public string StudentPhone { get; set; } //学生电话
public string StudentMail { get; set; } //学生邮箱
public string StudentImg { get; set; } //学生照片
//添加对象方便查询
public MajorEntity majorEntity { get; set; } //专业对象
}
ASPX代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AspNetPager分页控件</title>
<style type="text/css">
/*Bootstrap pagination风格（该风格需要bootstrap.css支持）-更多样式在AspNetPager官网查询*/
/*
.pagination a[disabled]{ color: #777;cursor: not-allowed;background-color: #fff;border-color: #ddd;}
.pagination span.active{z-index: 2;color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
*/
/*迅雷风格*/
.pages { color: #999;overflow: auto; }
.pages a, .pages .cpb { text-decoration:none;float: left; padding: 0 5px; border: 1px solid #ddd;background: #ffff;margin:0 2px; font-size:11px; color:#000;}
.pages a:hover { background-color: #E61636; color:#fff;border:1px solid #E61636; text-decoration:none;}
.pages .cpb { font-weight: bold; color: #fff; background: #E61636; border:1px solid #E61636;}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>AspNetPager分页控件使用</h2>
<div>
<asp:GridView ID="gvStudent" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None" Width="876px" DataKeyNames="StudentId"
AutoGenerateColumns="False" onrowdeleting="gvStudent_RowDeleting">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="StudentId" HeaderText="编号" />
<asp:BoundField DataField="majorEntity.MajorName" HeaderText="专业名称" />
<asp:BoundField DataField="StudentName" HeaderText="学生姓名" />
<asp:BoundField DataField="StudentSex" HeaderText="学生性别" />
<asp:BoundField DataField="StudentPhone" HeaderText="学生电话" />
<asp:BoundField DataField="StudentMail" HeaderText="学生邮箱" />
<asp:TemplateField>
<HeaderTemplate>操作</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lbDelete" runat="server" CommandName="delete" OnClientClick="return confirm('确定要删除吗？');">删除</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
</div>
<div style=" margin-top:10px;">
<webdiyer:AspNetPager ID="AspNetPager1" runat="server"
onpagechanged="AspNetPager1_PageChanged" PageSize="3"
CssClass="pages" CurrentPageButtonClass="cpb" PagingButtonSpacing="0"
FirstPageText="首页" LastPageText="末页" NextPageText="下一页" PrevPageText="上一页">
</webdiyer:AspNetPager>
</div>
</form>
</body>
</html>
C#代码：
public partial class Demo05 : System.Web.UI.Page
{
DBHelper db = new DBHelper();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
//当前页页码，页码大小，一共多少页
int pageIndex = this.AspNetPager1.CurrentPageIndex;
int pageSize = this.AspNetPager1.PageSize;
string sqlCount = "select count(*) from Student inner join Major on Student.MajorId = Major.MajorId";
db.PrepareSql(sqlCount);
this.AspNetPager1.RecordCount = (int)db.ExecScalar();
if (pageIndex > this.AspNetPager1.PageCount)
pageIndex = 2;
string sql = "select * from(select row_number() over(order by StudentId) RowId, Student.*, Major.MajorName MajorName from Student inner join Major on Student.MajorId = Major.MajorId) Stu where RowId between @start and @end";
db.PrepareSql(sql);
db.SetParameter("start", (pageIndex - 1) * pageSize + 1);
db.SetParameter("end", pageIndex* pageSize);
List<StudentEntity> list = new List<StudentEntity>();
SqlDataReader reader = db.ExecDataReader();
while (reader.Read())
{
StudentEntity entity = new StudentEntity();
entity.StudentId = int.Parse(reader["StudentId"].ToString());
entity.MajorId = int.Parse(reader["MajorId"].ToString());
entity.StudentName = reader["StudentName"].ToString();
entity.StudentSex = reader["StudentSex"].ToString();
entity.StudentPhone = reader["StudentPhone"].ToString();
entity.StudentMail = reader["StudentMail"].ToString();
entity.StudentImg = reader["StudentImg"].ToString();
entity.majorEntity = new MajorEntity();
entity.majorEntity.MajorId = int.Parse(reader["StudentId"].ToString());
entity.majorEntity.MajorName = reader["MajorName"].ToString();
list.Add(entity);
}
reader.Close();
this.gvStudent.DataSource = list;
this.gvStudent.DataBind();
}
protected void AspNetPager1_PageChanged(object sender, EventArgs e)
{
BindData();
}
protected void gvStudent_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string sql = "delete from Student where StudentId = " + this.gvStudent.DataKeys[e.RowIndex]["StudentId"].ToString();
db.PrepareSql(sql);
db.ExecNonQuery();
BindData();
Page.ClientScript.RegisterStartupScript(this.GetType(),"js","<script>alert('删除成功!');</script>");
}
}
