回發之間GridView中的ASP.NET Javascript值丟失

Question

我有一個GridView，其中有一個在其中輸入數字的列。 當我鍵入它們時，JavaScript會對這些數字求和，並在GridView外部的Label中顯示總數。 工作正常。

頁面上的某處有一個按鈕，單擊該按鈕會導致回發，並且為了不丟失Total標簽的值，Javascript還將總數保存在HiddenField中，在page_load上，我將其從HiddenField復制回了總標簽。 那也行。

但是...如果我從回發回去后在任何一個單元格中鍵入一個數字，則總計將僅反映該數字而忽略所有其他單元格中的值。 這些在回發之間丟失。

我想Javascript不僅應保留Total標簽，而且應保留該列中所有單元格的所有值，但是我對JS的了解接近於零（目前……）。

我的HTML：

     <table>
        <tr>
            <td>
                <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="Click me" />
                <asp:Label ID="lbl_Message" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                        <Columns>
                            <asp:BoundField DataField="Something" HeaderText="Something" />
                            <asp:TemplateField HeaderText="Payed">
                                <ItemTemplate>
                                    <asp:TextBox ID="txb_Payed" runat="server"></asp:TextBox>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderStyle-CssClass="myHidden" ItemStyle-CssClass="myHidden">
                                <ItemTemplate>
                                    <asp:Label ID="lbl_Temp_Payed" runat="server" Text="0"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                    Grand Total:
                            <asp:Label ID="lbl_Grand_Total" runat="server" Text="0"></asp:Label>
                    <asp:HiddenField ID="hdf_Keep_Total" runat="server" />
                </div>
            </td>
        </tr>
    </table>

我的Javascript：

<script type="text/javascript">
    $("[id *= txb_Payed]").live("change", function () {
        if (isNaN(parseInt($(this).val()))) {
            $(this).val('0');
        } else {
            $(this).val(parseInt($(this).val()).toString());
        }
    });
    $("[id *= txb_Payed]").live("keyup", function () {
        if (!jQuery.trim($(this).val()) == '') {
            if (!isNaN(parseFloat($(this).val()))) {
                var row = $(this).closest("tr");
                $("[id *= lbl_Temp_Payed]", row).html(parseFloat($(this).val()));
            }
        } else {
            $(this).val('');
        }
        var my_Total = 0;
        $("[id *= lbl_Temp_Payed]").each(function () {
            my_Total = my_Total + parseFloat($(this).html());
        });
        $("[id *= lbl_Grand_Total]").html(my_Total.toString());
        var my_hdf_Keep_Total = '<%= hdf_Keep_Total.ClientID %>';
            document.getElementById(my_hdf_Keep_Total).value = my_Total;
        });
</script>

我的C＃代碼背后：

    protected void Page_Load(object sender, EventArgs e)
    {
        lbl_Grand_Total.Text = hdf_Keep_Total.Value;
        if (!Page.IsPostBack)
        {
            Bind_Sample_Data_To_Grid();
        }
    }
    private void Bind_Sample_Data_To_Grid()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Something") });
        dt.Rows.Add("aaaaa");
        dt.Rows.Add("bbbbb");
        dt.Rows.Add("ccccc");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
    protected void btn_Click(object sender, EventArgs e)
    {
        lbl_Message.Text = "U clicked";
    }

（JavaScript可能效率極低，而且混亂不堪，因為我只是在網上復制發現的內容而沒有真正理解它。對該代碼的任何評論也對我非常有益）。
編輯：
此頁面最終將作為收據，用戶（出示收據的人）將在gridview行的適當單元格輸入一個或多個數字，應用程序需要對這些數字求和，以便用戶可以看到總數當他輸入數字時。 在該行中，將有更多行以及更多信息。 為了簡化此問題，我將其簡化到最低程度。
（代碼中的“數量”一詞具有誤導性，我將其更改為“付費”。此外，正如@Fnostro所建議的，我從頁面中取出了UpdatePanel ）。
這是我最初得到的：

然后，我在第一行輸入45，並在鍵入時看到總數已更新為45。輸入30並立即將總數更新為75：

然后，我單擊按鈕，並得到：

現在，我將光標放在最后一行上，輸入5，總數也顯示5。 JavaScript會忽略其他兩個值：

希望我現在過得更加清楚，希望能對您有所幫助。

Answer 1

我有一個GridView（在UpdatePanel內部），其中有一列我在其中輸入數字。

在沒有代碼的情況下，我不會引入UpdatePanel 。 頁面回發會影響JS / JQ，因此您必須知道如何處理。 當處理UpdatePanels時，我使用類似於以下代碼的JS / JQuery代碼：

// Handle Full Postback
$( function() {
    FullAndPartialPostback_EventHandler( true, null, null );
} );

// Handle Partial Postback
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( function( sender, args ) {
    FullAndPartialPostback_EventHandler( false, sender, args );
} );


function FullAndPartialPostback_EventHandler( isFullPostBack, sender, args ) {
    // Do stuff common to both Full/Partial postbacks here 

    if( isFullPostBack ){
        // Do Full postback specific stuff here
    }
    else {
        // Do Partial postback specific stuff here
    }

    // Do more stuff common to both here 
}

在上面的代碼中，我用頁面（或用戶控件）類名稱替換了前綴文本FullAndPartialPostback ，以便它讀取類似於Default_EventHandler並且很清楚此處理程序屬於哪個類。

當我鍵入它們時，Javascript將這些數字相加，並在GridView外部的Label中顯示總數。 工作正常。 頁面上的某處有一個按鈕，當單擊該按鈕時會導致回發，

大多數每個ASP.NET服務器控件按鈕都會導致回發。 您保留了UpdatePanel默認設置，因此保留ChildrenAsTriggers=true意味着按鈕將回發。

為了不丟失Total標簽的值，JavaScript還將總計保存在HiddenField中，並在page_load上將其從HiddenField復制回Total標簽。 那也行。

很好-HiddenFields很好，但是...

但是...如果我從回發回去后在任何一個單元格中鍵入一個數字，則總計將僅反映該數字而忽略所有其他單元格中的值。 這些在回發之間丟失。

數字實際上是丟失還是增加到先前的總數中？ 如果保留了文本框值，則無需保存總數-只需重新計算即可。 如果它們丟失了，那么保留總計就沒有意義。

在不知道您的最終目標的情況下，我對如何最好地進行沒有任何建議。 通常，如果所有源數據最終都被發布回服務器，則不會發布客戶端JS / JQ計算出的數據，只需在服務器端重新計算總數即可。

附錄2016-02-29：摘要后面有解釋

 var $GrandTotal = null; var $InputFields = null; $(function() { $GrandTotal = $(".GrandTotal"); $InputFields = $(".InputField"); $InputFields.on("keyup", SumRows); SumRows(); }); function SumRows() { var SubTotal = 0.0; $InputFields.each( function(){ if( $.isNumeric($(this).val() ) ) SubTotal += parseFloat($(this).val()); }); $GrandTotal.text(SubTotal); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr><td>Something</td><td>Payed</td></tr> </thead> <tbody> <tr><td>aaaaa</td><td><input id="tbx_Payed_1" class="InputField" type="number"></td></tr> <tr><td>bbbbb</td><td><input id="tbx_Payed_2" class="InputField" type="number"></td></tr> <tr><td>ccccc</td><td><input id="tbx_Payed_3" class="InputField" type="number"></td></tr> <tr><td>ddddd</td><td><input id="tbx_Payed_4" class="InputField" type="number"></td></tr> </tbody> <tfoot> <tr><td>Sum</td><td><span id='lbl_Grand_Total' class="GrandTotal" >0</span></td></tr> </tfoot> </table> 

服務器控件回發到每個帖子上。 這同樣適用於Gridview中包含的字段。 訣竅是不要用綁定數據覆蓋輸入字段。

您不需要隱藏字段即可保存總計，因為在回發之后可以很容易地重新計算總計。

還值得注意“匿名類”的使用。 盡管可以，但是GrandTotal和InputField類在任何CSS中均未定義樣式。 但是這里將它們用於簡化查找jquery需要進行計算的字段的過程。 試圖弄清楚ASP.NET對控件ID的處理方式要容易得多。 如果有的話，您應該很少需要使用*= ，例如： $("input[id*='some_id']")查找字段。

由於所有輸入和計算都包含在服務器控件中，因此無需使用“隱藏”字段，因為服務器控件將在往返過程中保留其值，並且一旦加載頁面，就可以在客戶端輕松重做求和。

僅供參考：jQuery的live()函數已棄用。