javascript - GridView 中的 ASP.NET Javascript 值在回发之间丢失

Question

我有一个 GridView，其中有一列可以输入数字。当我输入这些数字时，Javascript 对这些数字进行求和，并在 GridView 外部的标签中显示总数。工作正常。

页面上的某个地方有一个按钮，单击时会导致回发，为了不丢失 Total 标签的值，Javascript 还将总计保存在 HiddenField 中，并在 page_load 时从 HiddenField 复制它回到总标签。这也有效。

但是...如果我从回发回来后在任何单元格中键入一个数字，则总计将仅反射(reflect)该数字并忽略所有其他单元格中的值。这些在回发之间会丢失。

我猜 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

I have a GridView (inside an UpdatePanel) with a column where I enter numbers.

我不会介绍 UpdatePanel直到你的代码在没有它的情况下也能工作。部分页面回发会影响 JS/JQ，您必须知道如何处理它。在处理 UpdatePanel 时，我使用与此类似的 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并且很清楚这个处理程序属于哪个类。

A Javascript sums these numbers, as I type them in, and shows the total in a Label outside the GridView. Works fine. Somewhere on the the page there's a button that causes a postback when clicked,

大多数 ASP.NET 服务器控件按钮都会导致回发。您保留了 UpdatePanel默认，因此保留 ChildrenAsTriggers=true意味着按钮将回发。

and in order not to loose the value of the Total label, the Javascript also saves the total in a HiddenField, and on page_load I copy it from the HiddenField back to the Total label. That works too.

这很好 - HiddenFields 对此很有用，但是......

But...if after I am back from the postback and I type a number in any of the cells, the Total would reflect only that number and ignore the values in all other cells. Those are lost between postbacks.

这些数字实际上是丢失了还是添加到了之前的总数中？如果保留文本框值，则无需保存总计 - 只需重新计算。如果它们丢失了，那么保留总数就没有意义了。

在不知道您的最终目标的情况下，我对如何最好地进行没有任何建议。通常，如果所有源数据最终都发布回服务器，则不会发布客户端 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 中包含的字段。诀窍是不要用绑定(bind)数据覆盖输入字段。

您不需要隐藏字段来保存总计，因为在回发后可以轻松地重新计算它。

还值得注意的是“匿名类”的使用。类(class)GrandTotal和InputField尽管可以定义样式，但任何 CSS 中都没有定义样式。但这里使用它们是为了简化查找​​ jquery 需要进行计算的字段。这比试图弄清楚 ASP.NET 对控件 ID 进行何种类型的修改要容易得多。您应该很少(如果有的话)需要使用 *= ，例如:$("input[id*='some_id']")寻找一个字段。

由于所有输入和计算都包含在服务器控件内，因此无需使用隐藏字段，因为服务器控件将在往返期间保留其值，并且一旦加载页面，就可以在客户端轻松重做求和.

仅供引用:jquery 的 live()函数已弃用。