如何在回发后保留文本框值

How to retain text-box values after postback

本文关键字:保留 文本      更新时间:2023-09-26

我使用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
}