.net母版+validate+js+cookies自动保存草稿代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】 .net母版+validate+js+cookies自动保存草稿
作者:x123jing / 发布于2014/2/24/ 538
.net母版+validate+js+cookies自动保存草稿案例
环境：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>&nbsp;&nbsp;请输入稿件标题！",
              maxlength: "<BR>&nbsp;&nbsp;输入字符最多只能有40个！"
            },
            action:
            {
            //required: "&nbsp;&nbsp;请选择稿件操作，必须选择一项！"
          }
        }
      }
    }
  </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> &nbsp;
    <span class="STYLE1">&nbsp;</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">
        &nbsp;&nbsp;<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">
        &nbsp;&nbsp;<input type="radio" name="action" id="id" value="0" checked="checked" /><label
          for="id">保存为草稿</label><label for="action" class="error">&nbsp;&nbsp;请选择稿件操作，必须选择一项！</label>
    </tr>
    <tr>
      <td bgcolor="d3eaef" class="style1">
        &nbsp;&nbsp;<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">
  
  <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
    <tr>
      <td height="20" bgcolor="d3eaef" class="STYLE10">
        <div class="neterror">
          &nbsp;&nbsp;使用说明</div>
      </td>
    </tr>
    <tr>
      <td height="20" bgcolor="ffffff" class="STYLE6">
        <div class="neterror">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、*为必填项！稿件标题不可为空，稿件操作不可为空！
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2、稿件操作必须一项，发布到是指提交到相应报社进行初审！
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3、稿件内容框大小可以拉动右下角扩大或缩小稿件内容框！
        </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');
}
试试其它关键字
　自动保存草　
同语言下
可能有用的
x123jing贡献的其它代码(6)