In ASP. WebForm, JavaScript modifies the value of the label on the page, and how to get it in the background code

When you develop a project with ASP. NET WebForm, you encounter one of the following conditions

There is a TextBox control on the page, and there are 2 label controls. When the value in the TextBox control changes, the values on the two label controls make the corresponding changes, which is done through the JavaScript embedded in the page.

However, after the value on the label control is changed, the changed value is not available in the back-end. CS code, through Label.text.

The order.aspx page code is as follows:

<%@ Page language="C #"autoeventwireup="true"codefile="Order.aspx.cs"inherits="Order"%><! DOCTYPE Html>"Server"> <title>Order</title>"OrderForm"runat="Server"> <divclass="Form-group"> <label>product size</label> <asp:textbox id="productsize"runat="Server"text=""cssclass="Form-control"Type=" Number"Onchange="calculatenumberofpacks ()"></asp:TextBox> </div> <divclass="Row"> <divclass="col-md-6"> <p>number of thepacks:&nbsp;&nbsp; <asp:label id="Lbl96pack"runat="Server"></asp:Label> </p> </div> <divclass="col-md-6"> <p>number of -packs:&nbsp;&nbsp; <asp:label id="Lbl24pack"runat="Server"></asp:Label> </p> </div> </div> <divclass=" Well"> <asp:button id="Submit"cssclass="btn Btn-primary"runat="Server"text="Place Order"onclick="Submit_click"/> </div> </form> </body> <script>//Also do the on document load//capture the value of the herd size inputWindow.onload =function () {calculatenumberofpacks (); } function Calculatenumberofpacks () {varProductsize = document.getElementById ('productsize'). Value; varLargepacks =0; varsmallpacks; //multiply it by 1.10Productsize = Productsize *1.1; //Round It upwardsProductsize =Math.ceil (productsize);            Console.log (productsize); //Work out how many packs is required.Largepacks = Math.floor ((productsize/ the)); Console.log ("Large Packs:"+largepacks); Smallpacks= Math.ceil ((Productsize-(Largepacks * the)) / -); Console.log ("Small Packs:"+smallpacks); //Now inject the value back into the DOMdocument.getElementById ('Lbl96pack'). InnerHTML =largepacks; document.getElementById ('Lbl24pack'). InnerHTML =smallpacks; }            </script>
Page as above, when the value in the TextBox is changed from 200 to another value, the following two label values will also change
However, in the Order.aspx.cs background code, the following is obtained:
This.lbl96Pack.Text, This.lbl24Pack.Text to get the value of lable, finds that the updated value is not obtained.
Reason:
You update the value on the server-side control label with JavaScript on the ASPX page, and you need a postback to make your server-side code reflect those changes.
Workaround:
Create two hidden client controls <input> controls, put the updated label on the two values, and use JavaScript to update the two hidden client controls. In the Order.aspx.cs background code, get the value of both hidden client controls directly
The modified order.aspx code is as follows:
<%@ Page language="C #"autoeventwireup="true"codefile="Order.aspx.cs"inherits="Order"%><! DOCTYPE Html>"Server"> <title>Order</title>"OrderForm"runat="Server"> <divclass="Form-group"> <label>product size</label> <asp:textbox id="productsize"runat="Server"text=""cssclass="Form-control"Type=" Number"Onchange="calculatenumberofpacks ()"></asp:TextBox> </div> <divclass="Row"> <divclass="col-md-6"> <p>number of thepacks:&nbsp;&nbsp; <asp:label id="Lbl96pack"runat="Server"></asp:Label> <input type="Hidden"Name="Hidden96pack"Id="Hidden96pack"Value=""> </p> </div> <divclass="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> <divclass=" Well"> <asp:button id="Submit"cssclass="btn Btn-primary"runat="Server"text="Place Order"onclick="Submit_click"/> </div> </form> </body> <script>//Also do the on document load//capture the value of the herd size inputWindow.onload =function () {calculatenumberofpacks (); } function Calculatenumberofpacks () {varProductsize = document.getElementById ('productsize'). Value; varLargepacks =0; varsmallpacks; //multiply it by 1.10Productsize = Productsize *1.1; //Round It upwardsProductsize =Math.ceil (productsize);            Console.log (productsize); //Work out how many packs is required.Largepacks = Math.floor ((productsize/ the)); Console.log ("Large Packs:"+largepacks); Smallpacks= Math.ceil ((Productsize-(Largepacks * the)) / -); Console.log ("Small Packs:"+smallpacks); //Now inject the value back into the DOMdocument.getElementById ('Lbl96pack'). InnerHTML =largepacks; document.getElementById ('Lbl24pack'). InnerHTML =smallpacks; document.getElementById ('Hidden96pack'). Value =largepacks; document.getElementById ('Hidden24pack'). Value =smallpacks; }            </script>
In the Order.aspx.cs code, such as getting the value down
protected void Submit_click (object  sender, EventArgs e) {    var Pack96 = request.form[  "hidden96pack"]. ToString (). Trim ();      var Pack24 = request.form["hidden24pack"]. ToString (). Trim ();}
So, it's done.
In ASP. WebForm, JavaScript modifies the value of the label on the page, and how to get it in the background code