標籤：order amp ges void oid mat page blog back
在用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: <asp:Label ID="lbl96Pack" runat="server"></asp:Label> </p> </div> <div class="col-md-6"> <p>Number of 24 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 = 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: <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: <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();}
這樣，就完成了
ASP.NET WebForm中JavaScript修改了頁面上Label的值，如何在後台代碼中擷取
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
