美文网首页
08-常用第三方

08-常用第三方

作者: D丝学编程 | 来源:发表于2024-02-20 14:08 被阅读0次

一、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 关于
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; //关闭过滤模式，保留所有标签
            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>");
    }
}

相关文章

网友评论

      本文标题：08-常用第三方

      本文链接：https://www.haomeiwen.com/subject/mxpbadtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|08-常用第三方|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！