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

最新推荐文章于 2024-04-25 17:01:31 发布
最新推荐文章于 2024-04-25 17:01:31 发布
阅读量1.4k 收藏
点赞数
文章标签： 服务器 浏览器 javascript webform asp.net function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jokuldamao/article/details/822398
版权
 

作者：顾庆岗 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 等手段增加浏览器端处理能力来提高应用程序性能，对于状态要求不高的数据处理这是个不错的选择。
jokuldamao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
行业资料-交通装置-一种减小服务器系统电源输入端浪涌电压的方法.zip
08-25
行业资料-交通装置-一种减小服务器系统电源输入端浪涌电压的方法.zip
利用WebBrowser自动填写网页上的表单
fengshielick的专栏
02-24 5727
procedure TForm1.db_writeClick(Sender: TObject); var o:oleVariant; err,js:string; i:integer; const mz:array[1..51] of string=('汉族','蒙古族','回族','藏族','维吾尔族','苗族','彝族','壮族','布依族', '朝鲜族','满族','侗族','瑶族','白族...
solr使用网页浏览器批量导入数据库中数据（本案例是mysql）
Buggggggg
05-01 321
如果想要知道如何安装solr,集成IKAnalyzer中文分词器，批量导入数据库数据，java使用参照以下本博主博文： 安装solr https://blog.csdn.net/u013294097/article/details/89735654 集成IKAnalyzer中文分词器 https://blog.csdn.net/u013294097/article/details/8973...
Web前端性能优化之浏览器访问优化
weixin_33985507的博客
07-01 125
想了好半天，对于一个第一次写博客的人来说，还真心不知道怎么开头，算了，就直奔主题吧。 一个已经上线运行的网站，小到一般的企业站，大到类似淘宝、京东这样的大型电子商务网站，在从开发一直到运行都需要考虑一个问题，那就是性能。 性能是一个网站的重要指标，除非是没得选择（比如只有www.12306.com这个网站能买火车票），否则任何一个用户都无法忍受一个响应缓慢的网站。 一个打开缓慢的网站会导致严...
减小外差干涉一次谐波非线性误差的方法
02-10
为了补偿激光外差干涉纳米测量中的非线性误差,提出了一种减小非线性误差的一次谐波方法。基于全反射理论分析了镀膜实体角锥棱镜反射光偏振特性,并由此推导出角锥棱镜反射光偏振特性及测量角锥棱镜以其运动方向为轴线...
电源技术中的采用eSIP功率封装减小电源体积
11-07
Power Integrations公司已成功开发出一种名为eSIP的全新功率封装。该封装要比传统的TO-220封装小很多，是后者的替代方案。此外，eSIP封装还特别适合高噪声电源环境。比如，当Power Integrations最新的集成TOPSwitch-...
行业资料-交通装置-一种减小磨损防爆飞机轮胎.zip
08-25
行业资料-交通装置-一种减小磨损防爆飞机轮胎.zip
Nginx服务器实现数据静态压缩的方法
01-11
在搭建squid网页加速的时候，对于大的css 或者js要进行压缩,然后再进行缓存,这样能够提高减小下载量提高页面响应速度。如果你用的是squid 3.0以前的版本并且用的是 ngnix server的话可能会碰到如下问题： 不用squid...
Linux文件/目录高级管理一 头歌
2301_79585673的博客
04-22 553
Linux文件/目录高级管理一
账号安全基本措施2
2301_78327423的博客
04-19 482
例如：配置zhangsan用户只能执行挂载命令，/usr/bin/mount /dev/sr0 /mnt/命令。在110行我们看到在这个组中，NOPASSWD：ALL，是要加入到wheel组中的，使用sudo执行任何命令不需要密码。第三列是开放的命令，比如:/usr/bin/mount /dev/sr0 /mnt/只能执行这一条命令。在/etc/sudoers.d/下写一个配置文件：vim /etc/sudoers.d/test。测试别名的使用，只有在/usr/bin/下的命令才可以无密码使用。
【Linux】小知识点温习---命令
FZC206的博客
04-21 524
许多常见命令会用，但是很少注意他们的区别；亦或在学习中使用较少，容易忘记，今天做一个回顾。
如何理解三次握手四次挥手
Mistofinsult
04-25 297
连接的建立和断开过程分别被称为。
Linux--Linux常用命令
m0_50207524的博客
04-21 892
本篇文章讲解的我们在使用linux的常用的一些命令。
计算机服务器中了halo勒索病毒怎么办？Halo勒索病毒解密攻击流程步骤
M99W1230的博客
04-25 355
对于众多的企业来说，网络数字化办公模式已经变得普遍，任何企业都离不开网络，通过网络可以开展各项工作业务，方便企业的生产运营，但网络在为企业带来便利的同时，也为企业的数据安全带来严重威胁。Halo勒索病毒是一种早期勒索病毒，该勒索病毒属于Beijingcrypt勒索家族，该家族下有多种后缀形式的勒索病毒，其中较为猖獗的就是360后缀与halo后缀勒索病毒，该勒索病毒具有较强的攻击与加密能力，一旦企业被该勒索病毒攻击，非专业技术团队很难自行破解。
【精简改造版】大型多人在线游戏BrowserQuest服务器Golang框架解析（2）——服务端架构
Welcome Friends~
04-20 1035
字段类型初始值范围说明widthint172地图宽heightint314地图高collisionslist[int]碰撞点doors门doors.[].xint门x坐标doors.[].yint门y坐标doors.[].pint0/1intintstringu/d/l/r门朝向int目标xint目标yintintintintintint0/1移动区域intintintintintstring怪物类型int数量。
服务器镜像是什么
最新发布
athena1999的博客
04-25 108
其中，一台服务器被指定为主服务器，另一台为从服务器。客户只能对主服务器上的镜像的卷进行读写，即只有主服务器通过网络向用户提供服务，从服务器上相应的卷被锁定以防对数据的存取。镜像是冗余的一种类型，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像，RAID 1和RAID 10使用的就是镜像。数据库镜像是DBMS根据DBA的要求，自动把整个数据库或其中的关键数据复制到另一个磁盘上，每当主数据库更新时，DBMS会自动把更新后的数据复制过去，即DBMS自动保证镜像数据与主数据的一致性。
C# 为啥Json第一次数据上传至服务器很慢
06-10
C# 中处理 Json 数据上传至服务器很慢可能有以下几个原因： 1. 数据量过大：如果 Json 数据量非常大，上传时间就会很长。可以通过减小数据量或者优化网络传输等方式来解决。 2. 网络延迟：网络延迟也会导致数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值