在用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. 国内ADSL用户的带宽一般都是1M、2M、3M的，理论上的下载速度分别是128K/S、256K/S、384K/S。

    国内ADSL用户的带宽一般都是1M.2M.3M的,理论上的下载速度分别是128K/S.256K/S.384K/S. 1024/8===128      2048/8==256

  2. Linux课程---7、shell技巧（获取帮助命令）

    Linux课程---7.shell技巧(获取帮助命令) 一.总结 一句话总结: ls --help:简单手册 man ls:内容手册 1.tab补全? 命令+tab:加快敲命令敲文件目录的速度,多敲几 ...

  3. 关于ios::sync_with_stdio(false);和 cin.tie(0)加速c++输入输出流

    原文地址:http://www.hankcs.com/program/cpp/cin-tie-with-sync_with_stdio-acceleration-input-and-output.ht ...

  4. 什么是 Sass 其与SCSS区别是什么？

    Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法, ...

  5. GeoServer基础教程（二）：GeoServer的Web管理界面快速入门

    转载:http://blog.163.com/daimiao_study/blog/static/248923117201542522742373/ GeoServer的控制和管理是基于网页形式,所有 ...

  6. IO - 同步，异步，阻塞，非阻塞 (转帖：http://blog.csdn.net/historyasamirror/article/details/5778378)

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  7. codeforces 652A A. Gabriel and Caterpillar(水题)

    题目链接: A. Gabriel and Caterpillar time limit per test 1 second memory limit per test 256 megabytes in ...

  8. 机器学习 Support Vector Machines 1

    引言 这一讲及接下来的几讲,我们要介绍supervised learning 算法中最好的算法之一:Support Vector Machines (SVM,支持向量机).为了介绍支持向量机,我们先讨 ...

  9. CI中控制器名不能和本个 控制器中的方法名相同

    控制器名称:application/controllers/tang.php 控制器中方法名称:application/controllers/role.php  中有方法 public  funct ...

  10. POJ2406Power Strings （最小循环节）（KMP||后缀数组）

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...