在用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:&nbsp;&nbsp;
<asp:Label ID="lbl96Pack" runat="server"></asp:Label>
</p>
</div>
<div class="col-md-6">
<p>Number of packs:&nbsp;&nbsp;
<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:&nbsp;&nbsp;
<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:&nbsp;&nbsp;
<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的值,如何在后台代码中获取的更多相关文章

  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. 顺序表的静态存储(C语言实现)

    顺序表是在计算机内存中以数组的形式保存的线性表,是指用一组地址连续的存储单元依次存储数据元素的线性结构.  1.顺序表的结构体声明 #define MAX_SIZE 5 //定义数组的大小 typed ...

  2. POJ3660 暑假集训-最短路H题floyd

      http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82829#rank#include<iostream> #include& ...

  3. LUA学习之一 初次接触

    对于一个开源工程,开始学习它的第一步自然是编译工程. 使用vc编译lua,在网上已有许多介绍,但“纸上得来终觉浅”,自己走一遍还是有必要的. 步骤如下: 1.下载源代码,从lua.org下载最新源代码 ...

  4. Openldap- 大机群身份验证服务

    无论在哪个行业,数据安全永远都是摆在首要地位.尤其是在大数据行业上,谁掌握了数据,谁就有可能成为下个亿万富豪的环境中,数据安全更为重要.大数据的安全可以从哪些地方入手,首先可以在身份验证上面入手.在大 ...

  5. cocos2d-x3.0rc打包apk遇到的一些问题记录

    下载cocos2d-x3.0rc后根据官方教程进行环境配置等等一系列过程没有遇到什么问题 打包apk时出现一些问题: 按照官方教程cmd下运行cocos run -p android -m relea ...

  6. Fireworks(whole page)

    <!DOCTYPE HTML> <html> <head> <title>Canvas 实现放烟花特效</title> <meta c ...

  7. Sqlte 知识点记录

    1.表存在 select count(*) from sqlite_master where type='table' and name='MyTable'; sql),path ))"; ...

  8. HTTP-接触

    [HTTP]http是基于TCP/IP协议的应用层协议,他不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认端口是80端口. 不同版本http协议里的相关概念[Conten ...

  9. Javascript-- jQuery DOM篇(二)

    DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元 ...

  10. MySQL--开发技巧(一)

    Inner Join: Left Outer Join: Right Outer Join: Full Join: Cross Join: SELECT t1.attrs ,t2.attrs FROM ...