Question

我有一个带有列的GridView，我在其中输入数字。当我输入这些数字时，Javascript会将这些数字相加，并在GridView外部的Label中显示总数。工作良好。

页面上某处有一个按钮，点击后会导致回发，为了不丢失Total标签的值，Javascript也会将总数保存在HiddenField中，而在page_load上我会复制它从HiddenField返回Total标签。这也有效。

但是......如果我从回发中退回并在任何单元格中键入数字，则Total将仅反映那个数字并忽略所有其他单元格中的值。在回发之间丢失了。

我猜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行中的正确单元格中输入一个或多个数字，并且应用程序需要对这些数字求和，以便用户可以看到总数因为他输入了数字。在该行中将有更多行包含更多信息。为了打开这个Q，我把它简化到了最低限度（代码中的“数量”一词具有误导性，我将其更改为“支付”＃39;另外，正如@Fnostro建议的那样，我从页面中取出了UpdatePanel 。
这就是我最初得到的：

然后我在第1行输入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的内容，并清楚该处理程序属于哪个类。< / p>

当我输入这些数字时，Javascript对这些数字求和，并显示 GridView外部的标签中的总数。工作良好。在某处页面上有一个按钮，点击后会导致回发，

大多数每个ASP.NET服务器控件按钮都会导致回发。您保留了UpdatePanel默认值，因此保留ChildrenAsTriggers=true表示按钮会回发。

并且为了不丢失Total标签的值，Javascript 还将总数保存在HiddenField中，而在page_load上我将其复制 HiddenField返回Total标签。这也有效。

那很好 - 但HiddenFields对此有好处，但是......

但是......如果我从回发后回来并且我在任何一个中输入一个数字在细胞中，道达将只反映那个数字而忽略了所有其他单元格中的值。这些都是在回发之间丢失的。

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

在不知道您的最终目标的情况下，我对如何最好地继续进行任何建议。通常，如果所有源数据最终都被发布回服务器，则不会发布客户端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()函数。

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

1 个答案: