在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况

页面上有一个Textbox控件，还有2个Label 控件. 当Textbox控件中的值更改时，两个Label控件上的值做相应的更改， 这一点是通过页面中嵌入的JavaScript来实现的.

但是，Label控件上的值更改后，在后端.cs代码中，通过Label.Text 并不能取到更改后的值。

order.aspx页面代码如下：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="order.aspx.cs" Inherits="order"   %>
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head runat="server">
  6.     <title>Order</title>
  7. </head>
  8.   <body>
  9.     <form id="orderForm" runat="server">
  10.       <div class="form-group">
  11.             <label>Product Size</label>
  12.              <asp:TextBox ID="productSize" runat="server" Text="" CssClass="form-control" type="number" onchange="calculateNumberOfPacks()" ></asp:TextBox>
  13.           </div>
  14.           <div class="row">
  15.             <div class="col-md-6">
  16.               <p>Number of  packs:&nbsp;&nbsp;
  17.                  <asp:Label ID="lbl96Pack" runat="server"></asp:Label>
  18.                 </p>
  19.             </div>
  20.             <div class="col-md-6">
  21.               <p>Number of  packs:&nbsp;&nbsp;
  22.                  <asp:Label ID="lbl24Pack" runat="server"></asp:Label>
  23.                 </p>
  24.             </div>
  25.           </div>
  26.         <div class="well">
  27.             <asp:Button ID="submit" CssClass="btn btn-primary" runat="server" Text="Place Order" OnClick="submit_Click"  />
  28.         </div>
  29.           </form>
  30.  
  31.   </body>
  32.     <script>
  33.         //also do this on document load
  34.         //capture the value of the herd size input
  35.         window.onload = function () {
  36.             calculateNumberOfPacks();
  37.         }
  38.  
  39.         function calculateNumberOfPacks(){
  40.             var productSize = document.getElementById('productSize').value;
  41.             var largePacks = ;
  42.             var smallPacks;
  43.  
  44.             //multiply it by 1.10
  45.             productSize = productSize * 1.1;
  46.  
  47.             //Round it upwards
  48.             productSize = Math.ceil(productSize);
  49.             console.log(productSize);
  50.  
  51.             //work out how many packs are required.
  52.             largePacks = Math.floor((productSize / ));
  53.             console.log("Large Packs: " + largePacks);
  54.             smallPacks = Math.ceil((productSize - (largePacks * )) / );
  55.             console.log("Small Packs: " + smallPacks);
  56.  
  57.             //Now inject the value back into the dom
  58.             document.getElementById('lbl96Pack').innerHTML = largePacks;
  59.             document.getElementById('lbl24Pack').innerHTML = smallPacks;
  60.            }
  61.     </script>
  62. </html>

页面如上面，当Textbox中的值由200改为其他值，下面的两个Label的值也会跟着更改

但是，在order.aspx.cs 后台代码中，如下获取:

this.lbl96Pack.Text , this.lbl24Pack.Text 来获取Lable的值，发现获取不到更新后的值.

原因：

你在ASPX页面上用javascript来更新了服务器端控件Label上的值，你需要回发才能使你的服务器端代码来反映这些更改.

解决方法：

创建两个隐藏的客户端控件<input>控件，把更新后的Label的两个值，同时使用JavaScript来更新到这两个隐藏的客户端控件上。在order.aspx.cs后台代码中，直接获取这两个隐藏的客户端控件的value

修改后的order.aspx 代码如下：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="order.aspx.cs" Inherits="order"   %>
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head runat="server">
  6.     <title>Order</title>
  7. </head>
  8.   <body>
  9.     <form id="orderForm" runat="server">
  10.       <div class="form-group">
  11.             <label>Product Size</label>
  12.              <asp:TextBox ID="productSize" runat="server" Text="" CssClass="form-control" type="number" onchange="calculateNumberOfPacks()" ></asp:TextBox>
  13.           </div>
  14.           <div class="row">
  15.             <div class="col-md-6">
  16.               <p>Number of  packs:&nbsp;&nbsp;
  17.                  <asp:Label ID="lbl96Pack" runat="server"></asp:Label>
  18.                  <input type="hidden" name="hidden96Pack" id="hidden96Pack" value="">
  19.                 </p>
  20.             </div>
  21.             <div class="col-md-6">
  22.               <p>Number of  packs:&nbsp;&nbsp;
  23.                  <asp:Label ID="lbl24Pack" runat="server"></asp:Label>
  24.                  <input type="hidden" name="hidden24Pack" id="hidden24Pack" value="">
  25.                 </p>
  26.             </div>
  27.           </div>
  28.         <div class="well">
  29.             <asp:Button ID="submit" CssClass="btn btn-primary" runat="server" Text="Place Order" OnClick="submit_Click"  />
  30.         </div>
  31.           </form>
  32.  
  33.   </body>
  34.     <script>
  35.         //also do this on document load
  36.         //capture the value of the herd size input
  37.         window.onload = function () {
  38.             calculateNumberOfPacks();
  39.         }
  40.  
  41.         function calculateNumberOfPacks(){
  42.             var productSize = document.getElementById('productSize').value;
  43.             var largePacks = ;
  44.             var smallPacks;
  45.  
  46.             //multiply it by 1.10
  47.             productSize = productSize * 1.1;
  48.  
  49.             //Round it upwards
  50.             productSize = Math.ceil(productSize);
  51.             console.log(productSize);
  52.  
  53.             //work out how many packs are required.
  54.             largePacks = Math.floor((productSize / ));
  55.             console.log("Large Packs: " + largePacks);
  56.             smallPacks = Math.ceil((productSize - (largePacks * )) / );
  57.             console.log("Small Packs: " + smallPacks);
  58.  
  59.             //Now inject the value back into the dom
  60.             document.getElementById('lbl96Pack').innerHTML = largePacks;
  61.             document.getElementById('lbl24Pack').innerHTML = smallPacks;
  62.  
  63.             document.getElementById('hidden96Pack').value = largePacks;
  64.             document.getElementById('hidden24Pack').value = smallPacks;
  65.            }
  66.     </script>
  67. </html>

在order.aspx.cs代码中，如下来获取值

  1.  protected void submit_Click(object sender, EventArgs e)
  2.  {
  3.  
  4.     var Pack96 = Request.Form["hidden96Pack"].ToString().Trim();
  5.      var Pack24 = Request.Form["hidden24Pack"].ToString().Trim();
  6.  
  7. }

这样，就完成了

ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取的更多相关文章

  1. 客户端的javascript改变了asp.net webform页面控件的值，后台代码中如何获取修改后的值。

    客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值.     无论是什么的html控件,只要加上了runat="server" ...

  2. Windows Store App 全球化：在后台代码中引用字符串资源

    上文提到了引用字符串资源具有两种方式,分别是在XAML元素中和在后台代码中引用资源文件中的字符串资源.在第一小节已经介绍了如何在XAML元素中引用字符串资源,本小节将讲解在后台代码中引用字符串资源的相 ...

  3. 在后台代码中引入XAML的方法

    本文将介绍三种方法用于在后台代码中动态加载XAML,其中有两种方法是加载已存在的XAML文件,一种方法是将包含XAML代码的字符串转换为WPF的对象. 一.在资源字典中载入项目内嵌资源中的XAML文件 ...

  4. How do I duplicate a resource reference in code behind in WPF?如何在WPF后台代码中中复制引用的资源？

    原文 https://stackoverflow.com/questions/28240528/how-do-i-duplicate-a-resource-reference-in-code-behi ...

  5. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  6. asp.net 中点击button弹出模式对话框，选择值后返回到页面中(window.showModalDialog实现)

    <td>现从事专业</td><td>       <asp:TextBox ID="tbMajor" runat="server ...

  7. MVC中如何在controller的action中输出JS到页面上

    MVC中如何在controller的action中输出JS到页面上 可以通过Http上下文对象(httpContext)就可以了,在Action中的HttpContext就是这个Action所指向的页 ...

  8. TML 打印预览问题，怎么设置有些内容不出现在打印预览页面上。怎么控制，有下代码 看得不是很懂 求解释

    HTML <style> 标签的 media 属性 HTML <style> 标签 实例 针对两种不同媒介类型的两种不同的样式(计算机屏幕和打印): <html> ...

  9. 如何给DropDownList在后台代码中添加一个空的选项

    代码如何: ddl_dept.Items.Insert(, new ListItem("---请选择---","")); new ListItem的第一个参数表 ...

随机推荐

  1. delphi的获取某坐标的颜色值

    1.通过API函数GetPixel(),获取某个点的颜色值; var PT : TPoint; C : TColor; DC : HDC; hwd : THandle; I : integer; be ...

  2. delphi各个版本编译开关值

    delphi各个版本编译开关值 {$IFDEF VER80}  - Delphi 1{$IFDEF VER90}  - Delphi 2{$IFDEF VER100} - Delphi 3{$IFDE ...

  3. 仿联想商城laravel实战---3、前端页面搭建（什么情况下需要路由接参数）

    仿联想商城laravel实战---3.前端页面搭建(什么情况下需要路由接参数) 一.总结 一句话总结: 比如访问课程的时候,不同的课程(比如云知梦),比如访问不同的商品,比如访问不同的分类 //商品详 ...

  4. java：安装Runtime Environment，设置Tomcat Server 的方法

    Eclipse 中开发Webapp, 一般需要配置Tomcat Server, 以便在Eclipse 中进行Debug.具体的步骤如下: 1. Windows ==>Preference ==& ...

  5. 分享知识-快乐自己：Liunx 搭建 Dubbo

    1.首先配置JDK  操作步骤 2.部署 Tomcat ① 上传 Tomcat 7  解压jdk文件:tar -zxvf jdk文件名称 ② tomcat目录下的bin/启动tomcat ③ tail ...

  6. Hibernate学习---第六节：数组&list&map&set的映射配置

    1.实体类,代码如下: package learn.hibernate.bean; import java.util.Date; import java.util.HashMap; import ja ...

  7. ATL com的dll文件与tlb文件

    一..tlb文件: 只有COM组件才有tlb文件,普通dll文件没有. 包含内容: 1.它包含了COM类和接口的GUID值,接口的函数声明信息,并不是接口的实现文件.相当于类和接口的头文件. tlb文 ...

  8. hdu-5640 King's Cake (水题)

    题目链接 King's Cake Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Others ...

  9. Windows 任务管理器中的几个内存概念

    我们使用的大部分 PC 是基于 Intel 微处理器的 x86 和 x64 架构计算机. 因此, 我们面对的 windows 避免不了和 Intel 架构有些设计上的契合. 比如接下来要说到的内存管理 ...

  10. bzoj 2648 SJY摆棋子 —— K-D树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2648 学习资料:https://blog.csdn.net/zhl30041839/arti ...