在用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(); }
这样，就完成了