.net母版+validate+js+cookies自动保存草稿案例

于 2011-12-30 22:22:36 发布
阅读量735 收藏 1
点赞数
分类专栏： asp.net 文章标签： cookies .net function class server javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x123jing/article/details/7166337
版权

环境：vs2010+sql2008

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="manage.master.cs" Inherits="website.manage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="<%= Page.ResolveClientUrl("~/js/jquery-1.6.min.js") %>" type="text/javascript"></script>
    <script src="<%= Page.ResolveClientUrl("~/js/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= Page.ResolveClientUrl("~/js/jQuery.validate.message_cn.js") %>" type="text/javascript"></script>
    <link href="<%= Page.ResolveClientUrl("~/css/jquery.validate.css") %>" rel="stylesheet" type="text/css" />
    <link href="<%= Page.ResolveClientUrl("~/css/right.css") %>" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        var opts = null;
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td height="30">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td height="24" bgcolor="#353c44">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="6%" height="19" valign="bottom">
                                                        <div align="center">
                                                            <asp:Image ID="Image1" runat="server" Width="14" Height="14" ImageUrl="~/images/tb.gif" /></div>
                                                    </td>
                                                    <td width="94%" valign="bottom">
                                                        <asp:ContentPlaceHolder ID="MenuTitle" runat="server">
                                                        </asp:ContentPlaceHolder>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <asp:ContentPlaceHolder ID="SelectMenu" runat="server">
                                            </asp:ContentPlaceHolder>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="Content" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td height="30">
                    <asp:ContentPlaceHolder ID="Footer" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>
    </div>
    </form>
    <script type="text/javascript" language="javascript">
        $(function () {
            if (opts != undefined || opts != null) {
                $("#<%=form1.ClientID %>").validate(opts);
            }
        });
    </script>
</body>
</html>

Article_Join.aspx 

<%@ Page Title="" Language="C#" MasterPageFile="../manage.Master" AutoEventWireup="true"
    CodeBehind="Article_Join.aspx.cs" Inherits="website.Article.Article_Join" ValidateRequest="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../js/ckeditor/ckeditor.js" type="text/javascript"></script>//Ckeditor的js文件
    <style type="text/css">
        .style1
        {
            height: 20px;
            font-size: 12px;
        }
    </style>
    <script src="../js/Jquery.validate.Customrules.js" type="text/javascript"></script>//Validate的自定义规则
    <script type="text/javascript" language="javascript">
        function InitRules() {
            opts = {
                rules:
                    {
                        Title:
                        {
                            required: true,
                            maxlength: 40,
                            chinaenglishDigital: true
                        },
                        action:
                        {
                            required: true
                        }
                    },
                messages:
                    {
                        Title:
                        {
                            required: "<BR>  请输入稿件标题！",
                            maxlength: "<BR>  输入字符最多只能有40个！"
                        },
                        action:
                        {
                        //required: "  请选择稿件操作，必须选择一项！"
                    }
                }
            }
        }
    </script>
    <script src="../js/JQuery.AutoSave.js" type="text/javascript"></script>//自动保存js文件
    <script type="text/javascript" language="javascript">
        $(function () {
            $(window).load(function () {//窗口开启时判断是否有草稿
                if ($("#Title").val() == "" || editor.getData() == "") {
                    AutoSave();
                }
            });

            $("#Title").click(function () {//点击稿件标题判断是否有草稿及运行时存入草稿
                AutoSave();
            }).keyup(function () {
                AutoSave();
            }).select(function () {
                AutoSave();
            });

            $("#form1").submit(function () {//提交表单时删除草稿
                DelCookie();
            });

            CKEDITOR.instances["Content"].on("instanceReady", function () {//绑定Ckeditor的事件
                //set keyup event
                this.document.on("keyup", AutoSave);
                //and click event
                this.document.on("click", AutoSave);
                //and select event
                this.document.on("select", AutoSave);
            });

        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MenuTitle" runat="server">
    <span class="STYLE1">添加稿件</span>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SelectMenu" runat="server">
    <div id="AutoSaveMsg">
    </div>
    <div align="right">
        <span class="STYLE1">
            <img src="../images/fh.gif" width="10" height="10" />
            <a href="../Article_Manage.aspx" class="STYLE1">返回我的稿件信息列表</a></span>  
        <span class="STYLE1"> </span></div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Content" runat="server">
    <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
        <tr>
            <td width="20%" height="20" bgcolor="d3eaef">
                <div align="center">
                    <span class="STYLE10">稿件标题：<em style="color: Red;">*</em></span></div>
            </td>
            <td bgcolor="d3eaef" class="STYLE10">
                  <input type="text" name="Title" id="Title" />
            </td>
        </tr>
        <tr>
            <td height="20" bgcolor="#FFFFFF">
                <div align="center" class="STYLE10">
                    稿件内容：<input id="newid" name="newid" type="hidden" /></div>
            </td>
            <td height="20" bgcolor="#FFFFFF">
                <textarea name="Content" rows="10" cols="20" id="Content"></textarea>
                <script type="text/javascript">
                    var editor = CKEDITOR.replace('Content', {
                        language: 'zh-cn', //简体中文 
                        width: 739,
                        height: 125,
                        toolbar: 'DJArticle'
                    }); 
                </script>
            </td>
        </tr>
        <tr>
            <td bgcolor="d3eaef" class="style1" rowspan="2">
                <div align="center">
                    <span class="STYLE10">稿件操作：<em style="color: Red;">*</em></span></div>
            </td>
            <td bgcolor="d3eaef" class="style1">
                  <input type="radio" name="action" id="id" value="0" checked="checked" /><label
                    for="id">保存为草稿</label><label for="action" class="error">  请选择稿件操作，必须选择一项！</label>
        </tr>
        <tr>
            <td bgcolor="d3eaef" class="style1">
                  <input type="radio" name="action" id="id2" value="1" /><label for="id2">发布到<asp:DropDownList
                    ID="DDL_NewsOffice" runat="server">
                </asp:DropDownList>
                </label>
            </td>
        </tr>
        <tr>
            <td height="20" colspan="2" bgcolor="#FFFFFF">
                <div align="center" class="STYLE21">
                    <input name="UserID" type="hidden" id="UserID" value="1" />
                    <asp:Button ID="Button1" runat="server" Text="提交" />
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript" language="javascript">
        InitRules()
    </script>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="Footer" runat="server">
    <br />
    <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
        <tr>
            <td height="20" bgcolor="d3eaef" class="STYLE10">
                <div class="neterror">
                      使用说明</div>
            </td>
        </tr>
        <tr>
            <td height="20" bgcolor="ffffff" class="STYLE6">
                <div class="neterror">
                            1、*为必填项！稿件标题不可为空，稿件操作不可为空！<br />
                            2、稿件操作必须一项，发布到是指提交到相应报社进行初审！<br />
                            3、稿件内容框大小可以拉动右下角扩大或缩小稿件内容框！<br />
                </div>
            </td>
        </tr>
    </table>
</asp:Content>

Article_Join.aspx.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Model;
using BLL;
using System.Data;
using System.Web.UI.HtmlControls;

namespace website.Article
{
    public partial class Article_Join : System.Web.UI.Page
    {
        private commonManager comm = new commonManager();
        private common com=new common();
        private DJ_ArticalManager djam = new DJ_ArticalManager();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DDL_Bind();
            }
            else
            {
                int intUserID = Convert.ToInt32(Request.Form["UserID"]);
                string strTitle = Request.Form["Title"].Trim().ToString();
                string strContent = Request.Form["Content"].Trim().ToString();
                int intaction = Convert.ToInt32(Request.Form["action"]);
                int strDDL_NewsOffice=0;
                if (intaction==1)
                {
                    strDDL_NewsOffice = Convert.ToInt32(DDL_NewsOffice.Text);
                } 
                DJ_Artical dja = new DJ_Artical();
                dja.UserID = intUserID;
                dja.Title = com.qhtml(strTitle);
                dja.Content =com.qhtml(strContent);
                dja.State = intaction;
                dja.FaUnit = strDDL_NewsOffice;
                //Response.Write(dja.UserID+"<BR>"+dja.Title+"<BR>"+dja.Content+"<BR>"+dja.State+"<BR>"+dja.FaUnit);
                int res = djam.Artical_Join(dja);
                if (res>0)
                {
                    com.Show(this, "添加成功");
                    com.zx(this, "../Article_Manage.aspx");
                }
                else
                {
                    com.Show(this, "添加不成功");
                    com.zx(this, "../Article_Manage.aspx");
                }
            }
        }

        private void DDL_Bind()
        {
            DDL_NewsOffice.DataSource = comm.DDL_NewOffice_Show();
            DDL_NewsOffice.DataTextField = "BSName";
            DDL_NewsOffice.DataValueField = "BSID";
            DDL_NewsOffice.DataBind();
        }



    }
}

jquery.dimensions.js 

function AutoSave() {
    var _Title = $("#Title").val();
    var _Content = editor.getData();
    var _UserId = 1;

    if (!_Title) {
        var _LastTitle = GetCookie('AutoSaveTitle');
        var _LastContent = GetCookie('AutoSaveContent');
        var _LastUserId = GetCookie('AutoSaveUserID');

        if (!_LastTitle) return;
        if (!_LastContent) return;

        if (_LastUserId == _UserId) {
            if (confirm("加载上次没有编辑完的信息?")) {
                $("#Title").val(_LastTitle);
                editor.setData(_LastContent);
                return true;
            }
        }

    } else {

        var expDays = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + (expDays * 86400000)); // 24*60*60*1000 = 86400000
        var expires = '; expires=' + exp.toGMTString();

        // SetCookie
        document.cookie = "AutoSaveTitle=" + escape(_Title) + expires;
        document.cookie = "AutoSaveContent=" + escape(_Content) + expires;
        document.cookie = "AutoSaveUserID=" + escape(_UserId) + expires;
    }
}

function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}
function DeleteCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = GetCookie(name);
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function DelCookie() {
    DeleteCookie('AutoSaveTitle');
    DeleteCookie('AutoSaveContent');
    DeleteCookie('AutoSaveUserID');
}


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值