• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETWebForm中JavaScript修改了页面上Label的值,如何在后台代码中获取 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在用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 96 packs:&nbsp;&nbsp;
                 <asp:Label ID="lbl96Pack" runat="server"></asp:Label>
                </p>
            </div>
            <div class="col-md-6">
              <p>Number of 24 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 = 0;
            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 / 96));
            console.log("Large Packs: " + largePacks);
            smallPacks = Math.ceil((productSize - (largePacks * 96)) / 24);
            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 96 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 24 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 = 0;
            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 / 96));
            console.log("Large Packs: " + largePacks);
            smallPacks = Math.ceil((productSize - (largePacks * 96)) / 24);
            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();



}

 

这样,就完成了

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
VS2019创建第一个ASP.NET网站发布时间:2022-07-10
下一篇:
GoogleMapsControlforASP.Net-Part2(转载)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap