Retain (Maintain) calculated jQuery totals after PostBack in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

Earlier I have problem To Multiply two ASP.Net GridView columns and display result in Third using JavaScript. But by referring this link problem is solved:

Multiply two ASP.Net GridView columns and display result in Third using JavaScript and jQuery

Now I have another issue.I have a button outside of the Gridview. I want to fetch Grand Total value from Label in variable Gtotal.

But when I click on Button then all label which have values caculated byjavascript function got replaced by 0 (Zero).How can I Maintain these values(Calculated by Javascript) on button click(Postback Event)?

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Item" HeaderText="Item" />
            <asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <br />
    Grand Total:
    <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
    
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=txtQuantity]").val("0");
        });
        $("body").on("change keyup", "[id*=txtQuantity]", function () {
            //Check whether Quantity value is valid Float number.
            var quantity = parseFloat($.trim($(this).val()));
            if (isNaN(quantity)) {
                quantity = 0;
            }

            //Update the Quantity TextBox.
            $(this).val(quantity);

            //Calculate and update Row Total.
            var row = $(this).closest("tr");
            $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));

            //Calculate and update Grand Total.
            var grandTotal = 0;
            $("[id*=lblTotal]").each(function () {
                grandTotal = grandTotal + parseFloat($(this).html());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    </script>

 

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack != true)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
            dt.Rows.Add("Shirt", 200);
            dt.Rows.Add("Football", 30);
            dt.Rows.Add("Bat", 22.5);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        var Gtotal = lblGrandTotal.Text;
        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(), "alert('Total Is: " + Gtotal + "');", true);
    }

 

Posted one month ago

You need to add hidden field and set the value. Then after postback reassign the hidden field value in label control.