采用浏览器端操作减小服务器负担——数据批量录入一次提交

原创 2006年06月22日 19:06:00
 

作者:顾庆岗 prettywolf@vip.sina.com

    在ASP.NET应用程序中,服务器端控件给我们的开发工作带来很多便利,但是其代价就是增加了服务器处理的负担,频繁的提交大大增加了网络资源的使用和服务器资源的使用。本文介绍使用JavaScript等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。在下面我们通过一个实例来了解这一方法的使用。

    假设有着用这样一个需求:登记若干人员的信息(为简单起见,实例中只使用姓名和年龄)。如果使用服务端处理的方法那么在输入时针对每一个人员信息都要进行一次提交,即使改进操作每次生成指定数量的人员信息表单操作仍然不十分方便。那么使用浏览器端处理的方式会有什么效果呢?请看下图:


点击
[添加人员信息]按钮,生成一组“姓名”、“年龄”输入表单,再点击可在生成若干组。每一组可以单独删除。点击[提交]按钮时将上面添加的所有人员信息通过一次提交全部提交到服务器,整个录入过程流畅无界面提交时的闪烁,对用户体验也有较好的提升。

       这一功能的实现其实很简单,请看下面的代码:

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptForm.WebForm1" %>

<!DOCTYPE HTML PUBLIC "-//W3C//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+"/" onclick=/"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 onclick="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等手段增加浏览器端处理能力来提高应用程序性能,对于状态要求不高的数据处理这是个不错的选择。
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

解决部分浏览器ajax提交数据,数据已改变,却后台数据接收数据还是上一次值的问题

最近在工作中遇到了QQ浏览器ajax提交数据,表单数据改变,却后台数据接收数据还是上一次值的问题,但是在其它浏览器中是正常的。 代码如下: $.ajax({ url : "/secretkey/...

Bmob移动后端云服务平台--Android从零开始--(三)Bmob数据操作((批量)增删改)

上篇文章简单的利用Bmob实现了用户注册与登录效果(http://blog.csdn.net/a123demi/article/details/42059621)。 在项目中,对数据的操作脱离不了增删...

一次kafka空间激增排查:kafka的数据压缩、批量发送等

由于对kafka完全不了解,排查一个简单问题废了很大劲。

OutLook 2007 本地接收邮件,解决服务器空间负担过大

呵呵,这里介绍一下本地接收邮件,不过由于本人电脑水平太差,可能有些东西理解有问题,要是有高手看到,希望指正啊。一般来说我们收到的邮件都是存放在服务器上的,但是一般服务器给的空间并不是很大,于是,工作中...

手机扫描身份证识别OCR减轻手动录入负担

手机扫描身份证识别OCR识别 一、手机扫描身份证识别OCR识别应用背景 为了提高在移动终端上输入身份证信息的速度和准确性,我们开发出手机扫描身份证识别OCR识别,以满足各行业应用需求,给用...

使用PSSH批量操作Linux服务器

转载自http://www.cnblogs.com/lurenjiashuo/p/pssh.html 简介 服务器多了,有一个问题就是如何批量快速操作多台服务器,在网上搜到了PSSH工...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)