我有一个 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 忽略其他两个值:
我希望我现在更清楚了,并希望得到任何帮助。
最佳答案
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()
函数已弃用。
关于javascript - GridView 中的 ASP.NET Javascript 值在回发之间丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36250623/