一、kindeditor
網(wǎng)頁中經(jīng)常會用到富文本框編輯器，第三方的富文本框編輯器很多，本課程主要介紹kindeditor的基本使用。
官網(wǎng)網(wǎng)站： http://kindeditor.net
富文本框在asp.net中提交數(shù)據(jù)的時候劈猪，會涉及到格式的HTML內(nèi)容，asp.net會認(rèn)為是不安全操作良拼，需要獲取
kindeditor文本框內(nèi)容战得，需要在在aspx頁面取消安全檢查：
<%@ Page ValidateRequest="false" %>
（1）默認(rèn)參數(shù)調(diào)用
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) {
//最簡單的調(diào)用模式
KindEditor.options.filterMode = false; //關(guān)閉過濾模式，保留所有標(biāo)簽
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="提交數(shù)據(jù)"
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）設(shè)置文件上傳
【1】上傳文件需要LitJson.dll的支持庸推，先添加引用導(dǎo)入dll
【2】如果提示上傳路徑不存在常侦，則在kindeditor下面創(chuàng)建attached文件夾即可
【3】上傳文件代碼在kindeditor/asp.net/upload_json.ashx中，如需要進(jìn)行安全性判斷贬媒，自行修改此文件
<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) {
//設(shè)置文件上傳程序
KindEditor.options.filterMode = false; //關(guān)閉過濾模式聋亡，保留所有標(biāo)簽
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="提交數(shù)據(jù)"
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; //關(guān)閉過濾模式际乘，保留所有標(biāo)簽
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 | 預(yù)覽 |
| undo | 后退 |
| redo | 前進(jìn) |
| cut | 剪切 |
| copy | 復(fù)制 |
| paste | 粘貼 |
| plainpaste | 粘貼為無格式文本 |
| wordpaste | 從Word粘貼 |
| selectall | 全選 |
| justifyleft | 左對齊 |
| justifycenter | 居中 |
| justifyright | 右對齊 |
| justifyfull | 兩端對齊 |
| insertorderedlist | 編號 |
| insertunorderedlist | 項(xiàng)目符號 |
| indent | 增加縮進(jìn) |
| outdent | 減少縮進(jìn) |
| subscript | 下標(biāo) |
| superscript | 上標(biāo) |
| formatblock | 段落 |
| fontname | 字體 |
| fontsize | 文字大小 |
| forecolor | 文字顏色 |
| hilitecolor | 文字背景 |
| bold | 粗體 |
| italic | 斜體 |
| underline | 下劃線 |
| strikethrough | 刪除線 |
| removeformat | 刪除格式 |
| image | 圖片 |
| flash | Flash |
| media | 視音頻 |
| table | 表格 |
| hr | 插入橫線 |
| emoticons | 插入表情 |
| link | 超級鏈接 |
| unlink | 取消超級鏈接 |
| fullscreen | 全屏顯示 |
| about | 關(guān)于 |
| 打印 | |
| 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; //關(guān)閉過濾模式罪塔，保留所有標(biāo)簽
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="提交數(shù)據(jù)"
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; //關(guān)閉過濾模式投蝉，保留所有標(biāo)簽
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="提交數(shù)據(jù)" 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可以幫助我們快速實(shí)現(xiàn)數(shù)據(jù)分頁效果
官方網(wǎng)站： http://www.webdiyer.com
AspNetPager的使用方法：
【1】添加引用：AspNetPager.dll
【2】工具箱中添加選項(xiàng)卡,選項(xiàng)卡中添加控件->瀏覽征堪，找到dll
【3】頁面添加
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
【4】設(shè)置屬性PageSize.
【5】在AspNetPager1_PageChanged中編寫代碼
AspNetPager使用示例代碼：
數(shù)據(jù)庫代碼：
--專業(yè)
create table Major
(
MajorId int primary key identity(1,1), --編號
MajorName varchar(50) not null --專業(yè)名稱
)
insert into Major(MajorName) values('計算機(jī)科學(xué)與應(yīng)用')
insert into Major(MajorName) values('建筑學(xué)')
insert into Major(MajorName) values('美術(shù)學(xué)')
insert into Major(MajorName) values('戲劇與影視學(xué)')
--學(xué)生
create table Student
(
StudentId int primary key identity(1,1), --編號
MajorId int not null, --專業(yè)編號
StudentName varchar(50) not null, --學(xué)生姓名
StudentSex varchar(50) not null, --學(xué)生性別
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,'關(guān)羽','男','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')
實(shí)體類代碼：
public class MajorEntity
{
public int MajorId { get; set; } //編號
public string MajorName { get; set; } //專業(yè)名稱
}
public class StudentEntity
{
public int StudentId { get; set; } //編號
public int MajorId { get; set; } //專業(yè)編號
public string StudentName { get; set; } //學(xué)生性別
public string StudentSex { get; set; } //學(xué)生性別
public string StudentPhone { get; set; } //學(xué)生電話
public string StudentMail { get; set; } //學(xué)生郵箱
public string StudentImg { get; set; } //學(xué)生照片
//添加對象方便查詢
public MajorEntity majorEntity { get; set; } //專業(yè)對象
}
ASPX代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AspNetPager分頁控件</title>
<style type="text/css">
/*Bootstrap pagination風(fēng)格（該風(fēng)格需要bootstrap.css支持）-更多樣式在AspNetPager官網(wǎng)查詢*/
/*
.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;}
*/
/*迅雷風(fēng)格*/
.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="專業(yè)名稱" />
<asp:BoundField DataField="StudentName" HeaderText="學(xué)生姓名" />
<asp:BoundField DataField="StudentSex" HeaderText="學(xué)生性別" />
<asp:BoundField DataField="StudentPhone" HeaderText="學(xué)生電話" />
<asp:BoundField DataField="StudentMail" HeaderText="學(xué)生郵箱" />
<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()
{
//當(dāng)前頁頁碼，頁碼大小佃蚜，一共多少頁
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>");
}
}
