08-常用第三方

一、kindeditor

網(wǎng)頁中經(jīng)常會用到富文本框編輯器，第三方的富文本框編輯器很多，本課程主要介紹kindeditor的基本使用。

官網(wǎng)網(wǎng)站： http://kindeditor.net

富文本框在asp.net中提交數(shù)據(jù)的時候，會涉及到格式的HTML內(nèi)容，asp.net會認為是不安全操作，需要獲取

kindeditor文本框內(nèi)容，需要在在aspx頁面取消安全檢查：

<%@ Page ValidateRequest="false" %>

（1）默認參數(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)閉過濾模式，保留所有標簽
            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的支持，先添加引用導入dll

【2】如果提示上傳路徑不存在，則在kindeditor下面創(chuàng)建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) {
            //設(shè)置文件上傳程序
            KindEditor.options.filterMode = false; //關(guān)閉過濾模式，保留所有標簽
            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)閉過濾模式，保留所有標簽
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 關(guān)于
print 打印
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)閉過濾模式，保留所有標簽
            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)閉過濾模式，保留所有標簽
            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可以幫助我們快速實現(xiàn)數(shù)據(jù)分頁效果

官方網(wǎng)站： http://www.webdiyer.com

AspNetPager的使用方法：

【1】添加引用：AspNetPager.dll

【2】工具箱中添加選項卡,選項卡中添加控件->瀏覽，找到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('計算機科學與應用')
insert into Major(MajorName) values('建筑學')
insert into Major(MajorName) values('美術(shù)學')
insert into Major(MajorName) values('戲劇與影視學')

--學生
create table Student
(
    StudentId int primary key identity(1,1), --編號
    MajorId int not null, --專業(yè)編號
    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,'關(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')

實體類代碼：

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; } //學生性別
    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; } //專業(yè)對象
}

ASPX代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AspNetPager分頁控件</title>
    
    <style type="text/css">
    /*Bootstrap pagination風格（該風格需要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;}
*/
    /*迅雷風格*/
    .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="學生姓名" />
                <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>");
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容