如何在回发后保留文本框值
How to retain text-box values after postback
我使用jquery计算行总数和总计,但我唯一的问题是回发后会丢失文本框值。当我单击AddNewRow按钮时,每个文本框都重置为0。
<script type="text/javascript">
$(function () {
$("[id*=txtDay1]").val("0");
$("[id*=txtDay2]").val("0");
});
$("[id*=txtDay1]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
var number = parseFloat($("[id*=txtDay1]", row).val());
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay2]", row).val()) + parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
$("[id*=txtDay2]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
var number = parseFloat($("[id*=txtDay2]", row).val());
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay1]", row).val()) + parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>
这是我的网格视图
<asp:GridView ID="gv_Sub" runat="server" OnRowDataBound="gv_WeeklySub_RowDataBound" CssClass="table table-hover table-bordered table-responsive"
GridLines="None" OnRowDeleting="gv_Sub_RowDeleting">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="Row ID" />
<asp:TemplateField HeaderText="Day1">
<ItemTemplate>
<asp:TextBox ID="txtDay1" CssClass="form-control" runat="server" autocomplete="off"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="40px" BackColor="#cccccc"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="Day2">
<ItemTemplate>
<asp:TextBox ID="txtDay2" CssClass="form-control" runat="server" autocomplete="off"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server"
Text="Add New Row" OnClick="ButtonAdd_Click" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="">
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Label ID="lblGrand" CssClass="text-primary" runat="server" Text="Grand Total:"></asp:Label>
</FooterTemplate>
<ItemStyle Width="40px" BackColor="#cccccc"/>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Total">
<ItemTemplate>
<asp:Label ID="lblTotal" CssClass="text-primary" runat="server" Text="0"></asp:Label>
</ItemTemplate>
<%-- <FooterStyle HorizontalAlign="Right" />--%>
<FooterTemplate>
<asp:Label ID="lblGrandTotal" CssClass="text-primary" runat="server" Text="0"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:GridView>
实际上您正在清理它。只需修复此代码:
$(function () {
if($("[id*=txtDay1]").val() == "")
$("[id*=txtDay1]").val("0")
if($("[id*=txtDay2]").val() == "")
$("[id*=txtDay2]").val("0");
//calculating grand total on postback
calculateGrandTotal();
});
您现在需要重新计算grandTotal
,为此创建一个function
并在任何地方使用它:
$("[id*=txtDay1]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
var number = parseFloat($("[id*=txtDay1]", row).val());
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay2]", row).val()) + parseFloat($(this).val()));
}
} else {
$(this).val('');
}
//calculate grand total
calculateGrandTotal();
//remove this
/*var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());*/
});
$("[id*=txtDay2]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
var number = parseFloat($("[id*=txtDay2]", row).val());
$("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay1]", row).val()) + parseFloat($(this).val()));
}
} else {
$(this).val('');
}
//calculate grand total
calculateGrandTotal();
//remove this
/*var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());*/
});
function calculateGrandTotal(){
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
}
您需要使用IsPostBack方法,因为您使用的是JS,所以请在c#代码后面编写此方法。
if(IsPostBack)
{
ClientScript.RegisterClientScriptBlock(GetType(), "IsPostBack", "var isPostBack = true;", true);
}
然后用这种方法包装JS计算,并将值输出到文本框
if(!isPostBack) {
//display your value in the textbox
}
相关文章:
- 离开页面导航后保留文本区域内容
- 单击提交按钮后如何保留文本框值
- 防止Javascript注入(但保留文本格式和图像)
- Jquery:如何在保留文本的同时打开字符串的所有span标记
- 通过javascript保留文本区域换行符
- 如何在正则表达式匹配之间保留文本
- 如何在 JavaScript 中保留文本框后立即检查文本框是否为空
- 如何以两种形式保留文本框属性
- 如何在回发后保留文本框值
- 返回到同一按钮时保留文本框值
- 在用户选中和取消选中复选框后保留文本框值
- 防止移动默认键盘同时保留文本插入光标
- 如何在文本字段中保留文本
- 如何在使用 GET 方法发送 url 时保留文本区域输入中的文本段落
- 垂直翻转文本,保留文本的大小写
- 当浏览器窗口<830px,但保留文本
- 使用带有可点击“更多”的 Jquery 修剪文本,但保留文本格式
- 在“输入”上,使输入元素在单元格中消失,但保留文本内容
- 在rails中保留文本区域白色编辑中的空白字符
- 在对文本应用新样式时保留文本区域的换行符