ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取
在用ASP.NET WebForm开发一个项目时,遇到如下的一个情况
页面上有一个Textbox控件，还有2个Label 控件. 当Textbox控件中的值更改时，两个Label控件上的值做相应的更改， 这一点是通过页面中嵌入的JavaScript来实现的.
但是，Label控件上的值更改后，在后端.cs代码中，通过Label.Text 并不能取到更改后的值。
order.aspx页面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="order.aspx.cs" Inherits="order" %> <!DOCTYPE html>
<html>
<head runat="server">
<title>Order</title>
</head>
<body>
<form id="orderForm" runat="server">
<div class="form-group">
<label>Product Size</label>
<asp:TextBox ID="productSize" runat="server" Text="" CssClass="form-control" type="number" onchange="calculateNumberOfPacks()" ></asp:TextBox>
</div>
<div class="row">
<div class="col-md-6">
<p>Number of packs:
<asp:Label ID="lbl96Pack" runat="server"></asp:Label>
</p>
</div>
<div class="col-md-6">
<p>Number of packs:
<asp:Label ID="lbl24Pack" runat="server"></asp:Label>
</p>
</div>
</div>
<div class="well">
<asp:Button ID="submit" CssClass="btn btn-primary" runat="server" Text="Place Order" OnClick="submit_Click" />
</div>
</form> </body>
<script>
//also do this on document load
//capture the value of the herd size input
window.onload = function () {
calculateNumberOfPacks();
} function calculateNumberOfPacks(){
var productSize = document.getElementById('productSize').value;
var largePacks = ;
var smallPacks; //multiply it by 1.10
productSize = productSize * 1.1; //Round it upwards
productSize = Math.ceil(productSize);
console.log(productSize); //work out how many packs are required.
largePacks = Math.floor((productSize / ));
console.log("Large Packs: " + largePacks);
smallPacks = Math.ceil((productSize - (largePacks * )) / );
console.log("Small Packs: " + smallPacks); //Now inject the value back into the dom
document.getElementById('lbl96Pack').innerHTML = largePacks;
document.getElementById('lbl24Pack').innerHTML = smallPacks;
}
</script>
</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 代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="order.aspx.cs" Inherits="order" %> <!DOCTYPE html>
<html>
<head runat="server">
<title>Order</title>
</head>
<body>
<form id="orderForm" runat="server">
<div class="form-group">
<label>Product Size</label>
<asp:TextBox ID="productSize" runat="server" Text="" CssClass="form-control" type="number" onchange="calculateNumberOfPacks()" ></asp:TextBox>
</div>
<div class="row">
<div class="col-md-6">
<p>Number of packs:
<asp:Label ID="lbl96Pack" runat="server"></asp:Label>
<input type="hidden" name="hidden96Pack" id="hidden96Pack" value="">
</p>
</div>
<div class="col-md-6">
<p>Number of packs:
<asp:Label ID="lbl24Pack" runat="server"></asp:Label>
<input type="hidden" name="hidden24Pack" id="hidden24Pack" value="">
</p>
</div>
</div>
<div class="well">
<asp:Button ID="submit" CssClass="btn btn-primary" runat="server" Text="Place Order" OnClick="submit_Click" />
</div>
</form> </body>
<script>
//also do this on document load
//capture the value of the herd size input
window.onload = function () {
calculateNumberOfPacks();
} function calculateNumberOfPacks(){
var productSize = document.getElementById('productSize').value;
var largePacks = ;
var smallPacks; //multiply it by 1.10
productSize = productSize * 1.1; //Round it upwards
productSize = Math.ceil(productSize);
console.log(productSize); //work out how many packs are required.
largePacks = Math.floor((productSize / ));
console.log("Large Packs: " + largePacks);
smallPacks = Math.ceil((productSize - (largePacks * )) / );
console.log("Small Packs: " + smallPacks); //Now inject the value back into the dom
document.getElementById('lbl96Pack').innerHTML = largePacks;
document.getElementById('lbl24Pack').innerHTML = smallPacks; document.getElementById('hidden96Pack').value = largePacks;
document.getElementById('hidden24Pack').value = smallPacks;
}
</script>
</html>
在order.aspx.cs代码中，如下来获取值
protected void submit_Click(object sender, EventArgs e)
{ var Pack96 = Request.Form["hidden96Pack"].ToString().Trim();
var Pack24 = Request.Form["hidden24Pack"].ToString().Trim(); }
这样，就完成了
ASP.NET WebForm中JavaScript修改了页面上Label的值，如何在后台代码中获取的更多相关文章
- 客户端的javascript改变了asp.net webform页面控件的值，后台代码中如何获取修改后的值。
客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值. 无论是什么的html控件,只要加上了runat="server" ...
- Windows Store App 全球化：在后台代码中引用字符串资源
上文提到了引用字符串资源具有两种方式,分别是在XAML元素中和在后台代码中引用资源文件中的字符串资源.在第一小节已经介绍了如何在XAML元素中引用字符串资源,本小节将讲解在后台代码中引用字符串资源的相 ...
- 在后台代码中引入XAML的方法
本文将介绍三种方法用于在后台代码中动态加载XAML,其中有两种方法是加载已存在的XAML文件,一种方法是将包含XAML代码的字符串转换为WPF的对象. 一.在资源字典中载入项目内嵌资源中的XAML文件 ...
- 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 ...
- 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定
最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...
- asp.net 中点击button弹出模式对话框，选择值后返回到页面中(window.showModalDialog实现)
<td>现从事专业</td><td> <asp:TextBox ID="tbMajor" runat="server ...
- MVC中如何在controller的action中输出JS到页面上
MVC中如何在controller的action中输出JS到页面上 可以通过Http上下文对象(httpContext)就可以了,在Action中的HttpContext就是这个Action所指向的页 ...
- TML 打印预览问题，怎么设置有些内容不出现在打印预览页面上。怎么控制，有下代码 看得不是很懂 求解释
HTML <style> 标签的 media 属性 HTML <style> 标签 实例 针对两种不同媒介类型的两种不同的样式(计算机屏幕和打印): <html> ...
- 如何给DropDownList在后台代码中添加一个空的选项
代码如何: ddl_dept.Items.Insert(, new ListItem("---请选择---","")); new ListItem的第一个参数表 ...
随机推荐
- Delphi 的进制转换
1.10进制转16进制 intTohex(10,4); //第一个参数为要转换的数据,第二个参数为要转换后的16进制位数:得到:000A; 2. 16进制转10进制 strToInt('$'+'64 ...
- poj 3006 Dirichlet's Theorem on Arithmetic Progressions【素数问题】
题目地址:http://poj.org/problem?id=3006 刷了好多水题,来找回状态...... Dirichlet's Theorem on Arithmetic Progression ...
- java深入探究01
经过前面基础部门的学习,希望大家都把基础打闹再继续深入探究java应用层面的知识,以后的日子我会继续更新java进阶知识,深入探究实际工作中的java应用,说的不好的地方还请见谅,如果能提出你宝贵的建 ...
- 算法（Algorithms）第4版 练习 1.5.5
对于quick-find,对每个输入数据对,其最少的循环次数为N(sites) 故对于109 sites和106 input pairs,其总的指令次数为:sum = 10^9 * 10^6 * 10 ...
- linux 软件包的命名规则
linux软件包的命名规则 eg:主包 bind-9.7.1-1.el7.i586.rpm 子包 bind-libs-9.7.1-1.el7.i586.rpm bind-utils-9. ...
- 分享知识-快乐自己：反射机制Demo解析
Java-Reflect专题 基本反射简介: 1):JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象能够调用它的任意方法和属性;这种动态获取信息以及动 ...
- LSM Tree 学习笔记——MemTable通常用 SkipList 来实现
最近发现很多数据库都使用了 LSM Tree 的存储模型,包括 LevelDB,HBase,Google BigTable,Cassandra,InfluxDB 等.之前还没有留意这么设计的原因,最近 ...
- js 定义hash类
// JavaScript Documentfunction HashTable(){ this._hash={}; this._count=0; /** *添 ...
- php将一个二维数组按照某个字段值合并成一维数组，如果有重复则将重复的合并成二维数组
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近工作中碰到一个问题,用PHP将一个二维数组按照二维数组中的各个项中的某个特定字段值合并成一维数组,如果有重复则将重复的合并成二维数组,生成的二 ...
- 2018.5.31 nRF905 test
1 试电机:自动控制测试流程(Labview程序,加载扫描仪,自动测试夹具,测试数据保存) 2 USB RF收发器: 含S/N码发送读取功能(S/N:) The specific use please ...