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的第一个参数表 ...
随机推荐
- Spark持久化策略
spark持久化策略_缓存优化persist.cache都是持久化到内存缓存策略 StorageLevel_useDisk:是否使用磁盘_useMemory:是否使用内存_useOffHeap:不用堆 ...
- 大话设计模式--工厂方法模式 Factory Method -- C++实现
1. 工厂方法模式 定义一个用于创建对象的接口, 让子类决定实例化哪一个类,工厂方法使一个类的实例化延迟到其子类. 和简单工厂模式相比: A: 简单工厂模式最大的优点在于工厂类中包含有必要的逻辑判断, ...
- 大话设计模式--代理模式 proxy
1. 代理模式: 为其他对象提供一种代理以控制这个对象的访问. 代理模式使用场合: a. 远程代理, 为一个对象在不同的地址空间提供局部代理,隐藏一个对象存在于不同地址空间的事实.如.net中WebS ...
- Nginx HTTP反向代理基础配置
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- C# 多服务器上传 示例
图片服务器 带宽越来越不够用,还有当一台服务器的机房出问题的时候,不影响 整个web,以及 考虑网通电信访问服务器的 速度,所以考虑使用多台 图片 服务器 这个时候要求 图片服务器 内容是同步 的 ...
- iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）
父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...
- POJ 3126 Prime Path（BFS算法）
思路:宽度优先搜索(BFS算法) #include<iostream> #include<stdio.h> #include<cmath> #include< ...
- stl_slist.h
stl_slist.h // Filename: stl_slist.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: http:/ ...
- 如何查看myeclipse是否激活
myEclipse---->Subscription information--->Subscription expiration date 看这个日期到什么时候!另外建议别用太高版本的M ...
- Cassini(卡西尼)投影