作者:顾庆岗 prettywolf@vip.sina.com
在ASP.NET应用程序中,服务器端控件给我们的开发工作带来很多便利,但是其代价就是增加了服务器处理的负担,频繁的提交大大增加了网络资源的使用和服务器资源的使用。本文介绍使用JavaScript等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。在下面我们通过一个实例来了解这一方法的使用。
假设有着用这样一个需求:登记若干人员的信息(为简单起见,实例中只使用姓名和年龄)。如果使用服务端处理的方法那么在输入时针对每一个人员信息都要进行一次提交,即使改进操作每次生成指定数量的人员信息表单操作仍然不十分方便。那么使用浏览器端处理的方式会有什么效果呢?请看下图:
点击[添加人员信息]按钮,生成一组“姓名”、“年龄”输入表单,再点击可在生成若干组。每一组可以单独删除。点击[提交]按钮时将上面添加的所有人员信息通过一次提交全部提交到服务器,整个录入过程流畅无界面提交时的闪烁,对用户体验也有较好的提升。
这一功能的实现其实很简单,请看下面的代码:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptForm.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
var index = 0;
var count = 0;
function AddForm()
{
document.all.FormList.insertAdjacentHTML("beforeEnd", CreateForm(index));
count += 1;
index += 1;
document.all.txtCount.value = index;
}
function CreateForm(id)
{
var code = "<TABLE id=/"Table_"+id+"/" cellSpacing=/"1/" cellPadding=/"1/" border=/"0/">";
code += "<TR><TD>姓名:</TD><TD><INPUT id=/"txtName"+id+"/" type=/"text/" name=/"txtName"+id+"/"></TD><TD><INPUT id=/"btnDelete_"+id+"/" name=/"btnDelete_"+id+"/" οnclick=/"RemoveForm(this.parentElement.parentElement.parentElement);/" type=/"button/" value=/"删除/"></TD></TR>";
code += "<TR><TD>年龄:</TD><TD><INPUT id=/"txtAge"+id+"/" type=/"text/" name=/"txtAge"+id+"/"></TD><TD></TD></TR>";
code += "</TABLE>";
return code;
}
function RemoveForm(id)
{
id.removeNode();
count -= 1;
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1">
<TR>
<TD><INPUT οnclick="AddForm();" type="button" value="添加人员信息"></TD>
</TR>
<TR>
<TD id="FormList"></TD>
</TR>
<TR>
<TD align="center">
<asp:Button id="btn" runat="server" Text="提交"></asp:Button></TD>
</TR>
</TABLE>
<INPUT id="txtCount" type="hidden" name="txtCount">
</form>
</body>
</HTML>
这段代码的设计时界面为:
其工作原理是在点击[添加人员信息]按钮(HTML控件)时,使用JavaScript将表单的HTML代码(上文蓝色字体)写入指定位置,并指定“INPUT”控件的ID,控件的ID使用字符串头加数字后缀的方式使对控件的检索更加简单。
“function AddForm()”和“function RemoveForm(id)”分别响应[添加人员信息]和[删除]按钮的点击事件,实现表单的添加和删除。
每增加一个人员信息表单,“index”和“count”的值增加“ 1 ” ,删除一个表单“count”的值减“ 1 ” 。“index”的值放在了ID为“txtCount”的隐藏域中为的是在服务器端可以获取。
好了浏览器端的代码写完了,如何在服务器端获得录入的数据呢?请看下面的代码:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace ScriptForm
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button btn;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.btn.Click += new System.EventHandler(this.btn_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
private void btn_Click(object sender, System.EventArgs e)
{
int count = 0;
if(Request.Params["txtCount"] != null)
count = Convert.ToInt32(Request.Params["txtCount"]);
string strName = "";
string strAge = "";
for(int i=0;i<=count;i++)
{
if(Request.Params["txtName"+i] != null)
{
strName = Request.Params["txtName"+i].ToString();
}
if(Request.Params["txtAge"+i] != null)
{
strAge = Request.Params["txtAge"+i].ToString();
}
//
// 对人员信息进行操作,如提交到数据库。
//
}
}
}
}
操作是不是似曾相识?和ASP差不多,使用Request获取Form中的数据域中的数据,然后怎么处理就看你的实际需要了。
ASP.NET 应用程序中,服务器端控件给我们的开发工作带来很多便利,但是其代价就是增加了服务器处理的负担,频繁的提交大大增加了网络资源的使用和服务器资源的使用。本文介绍使用 JavaScript 等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。