对于OA系统，表单签核功能必不可少。而根据公司的情况，表单自然又五花八门，所以就要求能够让用户自己建立表单并设定表单的流程、填写内容等等。我之前写过一篇文章【地址：pivot的用法(SQL SERVER 2005 以上)】，对于OA系统这些填写内容的数据表结构作过一定的说明，而今天，我会给大家说明一下，用户在新建表单时，填表填到一半时，怎么暂存所填写的内容(此原理适用于表单提交时的保存操作)。
1、首先，以下面这张table为例子说明，其中【colValue】为用户填写的内容：
图一、表格详情
2、其次，我们需要把这些内容输出到页面，输出的话，比较简单，新建一个WebBaseSetup.aspx文件，以下为源码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebBaseSetup.aspx.cs" Inherits="Admin_WebBaseSetup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>網址導覽設定</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div style="width:600px;">
<input type="button" id="btnSave" value="保存" style="width:50px" />
<asp:Literal ID="ltList" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>3、至于WebBaseSetup.aspx.cs文件的源码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class Admin_WebBaseSetup : clsCheckRole
{
clsBaseSetup oBaseSetup = new clsBaseSetup();
private readonly string _colValue = "colValue_";
private readonly string _colDesction = "colDesction_";
protected void Page_Load(object sender, EventArgs e)
{
ckSession();
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
var baseList = oBaseSetup.GetBaseSetupList();
if (baseList.Any())
{
StringBuilder sb = new StringBuilder();
sb.Append("<table class='tbinfo' border='0' cellpadding='0' cellspacing='1' style='background-color:#D9E6FF;'>\n");
sb.Append("<tr><th style='width:130px;'>變量名</th><th style='width:70px;'>數值</th><th>備注</th></tr>");
foreach (var item in baseList)
{
sb.AppendFormat("<tr>\n<td>{0}</td>\n", item.colName);
sb.AppendFormat("<td style='text-align:center;'><input type='input' name='{0}' class='colControl' value='{1}' style='width:40px;' /></td>\n", _colValue + item.id, item.colValue);
sb.AppendFormat("<td><input type='input' name='{0}' class='colControl' value='{1}' style='width:98%;' /></td>\n<tr>\n", _colDesction + item.id, item.colDesction);
}
sb.Append("</table>");
ltList.Text = sb.ToString();
}
}
}4、需要引用的clsBaseSetup.cs类源码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
/// <summary>
/// clsBaseSetup 的摘要说明
/// </summary>
public class clsBaseSetup
{
#region model
/// <summary>
/// 主鍵
/// </summary>
public string id { get; set; }
/// <summary>
/// 系統標識名稱
/// </summary>
public string colName { get; set; }
/// <summary>
/// 設定值
/// </summary>
public string colValue { get; set; }
/// <summary>
/// 說明
/// </summary>
public string colDesction { get; set; }
#endregion
public clsBaseSetup()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
#region method
/// <summary>
/// 返回基礎設定表中的所有設定項
/// </summary>
/// <returns></returns>
public List<clsBaseSetup> GetBaseSetupList()
{
List<clsBaseSetup> list = new List<clsBaseSetup>();
string sql = "SELECT id,colName,colValue,colDesction FROM CWNS_BaseSetUp_Tab ORDER BY colName";
using (SqlDataReader dr = DbHelperSQL.ExecuteReader(sql))
{
while (dr.Read())
{
list.Add(GetModel(dr));
}
}
return list;
}
/// <summary>
/// 獲取基礎設定表中的設定項
/// </summary>
/// <param name="colName">字段名</param>
/// <param name="defaultValue">如果抓不到值則取默認值</param>
/// <returns></returns>
public Object GetColValueByColName(string colName, string defaultValue)
{
string sql = string.Format("SELECT ISNULL(colValue,'{0}') FROM CWNS_BaseSetUp_Tab WHERE colName='{1}'", defaultValue, colName);
Object obj = DbHelperSQL.GetSingle(sql);
if (obj == null)
{
obj = defaultValue;
}
return obj;
}
#endregion
#region 私有方法
/// <summary>
/// 獲取實體
/// </summary>
/// <param name="dr"></param>
/// <returns></returns>
private clsBaseSetup GetModel(SqlDataReader dr)
{
return new clsBaseSetup
{
id = dr["id"].ToString(),
colName = dr["colName"].ToString(),
colValue = dr["colValue"].ToString(),
colDesction = dr["colDesction"].ToString()
};
}
#endregion
}
5、好了，到了这步以后，运行网站，看到的界面应该会类似于下面这张图的，当然，CSS文件没提供，所以样式可能不一样，可以自己调：
图二、预览效果图
6、右键浏览器查看它生成的那个table的代码如下：
<table class='tbinfo' border='0' cellpadding='0' cellspacing='1' style='background-color:#D9E6FF;'>
<tr>
<th style='width:130px;'>變量名</th>
<th style='width:70px;'>數值</th>
<th>備注</th>
</tr>
<tr>
<td>Navigate_maxCount</td>
<td style='text-align:center;'><input type='input' name='colValue_2' class='colControl' value='100' style='width:40px;' /></td>
<td><input type='input' name='colDesction_2' class='colControl' value='設置網址導覽首頁每分類下顯示的最大項目數量' style='width:98%;' /></td>
<tr>
<tr>
<td>Navigate_rowNum</td>
<td style='text-align:center;'><input type='input' name='colValue_1' class='colControl' value='6' style='width:40px;' /></td>
<td><input type='input' name='colDesction_1' class='colControl' value='設置綱址導覽首頁每行顯示多少項' style='width:98%;' /></td>
<tr>
</table>
7、下面接下来的动作，就是编写【保存】按钮的动作了，目标是把input的表单打包传输到后台的一个处理程序处理，可以用jquery操作：
在【WebBaseSetup.aspx】的head标签中加入以下代码：
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnSave").click(function () {
SaveColValue();
});
});
function SaveColValue() {//保存欄位值
var param = $(".tbinfo").find('.colControl').serializeArray();
param.push({ name: 'Action', value: 'Save' });
jQuery.ajax({
url: '../ajax/UpdateBaseSetupColValue.ashx',
type: 'POST',
data: param,
async: false,
success: function (data) {
alert(data);
}
});
}
</script>
8、由于【数值】跟【备注】两栏均要保存，所以调用.find('.colControl')全部传过去，接着，看一下【UpdateBaseSetupColValue.ashx】的代码吧：
<%@ WebHandler Language="C#" Class="UpdateBaseSetupColValue" %>
using System;
using System.Web;
using System.Collections.Generic;
public class UpdateBaseSetupColValue : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
var req = context.Request;
context.Response.Write(SaveColValue(req));
}
public bool IsReusable {
get {
return false;
}
}
/// <summary>
/// 保存欄位值
/// </summary>
/// <returns></returns>
private string SaveColValue(HttpRequest reqForm)
{
var req = reqForm.Form;
var action = req["Action"];
var _colValue = "colValue_";
var _colDesction = "colDesction_";
if (!string.IsNullOrEmpty(action) && action == "Save")
{
List<String> listSql = new List<string>();
foreach (var item in req.AllKeys)
{
if (item.IndexOf(_colValue) > -1)
{
listSql.Add(string.Format("UPDATE [CWNS_BaseSetUp_Tab] SET [colvalue] =N'{0}' WHERE ID='{1}'",
req[item], item.Replace(_colValue, "")));
}
else if (item.IndexOf(_colDesction) > -1)
{
listSql.Add(string.Format("UPDATE [CWNS_BaseSetUp_Tab] SET [colDesction] =N'{0}' WHERE ID='{1}'",
req[item], item.Replace(_colDesction, "")));
}
}
try
{
DbHelperSQL.ExecuteSqlTran(listSql);
return "保存成功！";
}
catch (Exception)
{
return "保存失敗！";
}
//Response.Redirect(Request.Url.ToString());
}
return "參數缺失，請聯系管理員！";
}
}
这样子，就实现了动态保存用户所作的修改了。当然，就算用户没修改，也会重新update一次所有的数据，这点需要注意，嘻嘻。
虽然过程没有细说，但该说的全都有写了，如果感兴趣的话，不妨花点时间仔细阅读一下。
补充一下css文件吧，也挺不错的，后面我还会单独写一篇出来分享一下：
/*-- 表格樣式 --*/
.tbinfo{background: #d6e0ef; line-height: 18px;
width: 100%;
}
.tbinfo th{font-size:12px;background-color:#97CBFF;border-bottom:1px solid #a5ceef; text-align:center;color: #003399;}
.tbinfo td{background: #fff;padding:2px 0;}
.tbinfo .lt{background: #fafafa;text-align: right; padding:0 4px; width:15%; white-space:nowrap;}
.tbinfo .rt{background: #fff; text-align:left; padding:0 2px;}
.tbinfo .rt:hover{background: #fafafa;}
.hidden { display:none;}
/*-- 頁碼樣式 --*/
.page
{
text-align:center;
height:26px;
}
.page a
{
padding:2px 6px 2px 6px;
width:24px;
border:1px solid blue;
text-align:center;
font-size:12px;
line-height:20px;
}
.page a:hover
{
padding:2px 6px 2px 6px;
width:24px;
border:1px solid red;
text-align:center;
font-size:12px;
line-height:20px;
}
.page span
{
padding:2px 6px 2px 6px;
width:24px;
border:1px solid silver;
text-align:center;
font-size:12px;
line-height:20px;
color:silver;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
