在gridview中回发后Javascript代码不会运行

Question

当单击位于 GridView 页脚内的按钮时，以下代码会在 GridView 中生成一行。

我使用 JavaScript 在网格视图上进行了一些计算，以获得总量和净总量。

但问题是当我向网格添加新行时，计算值会从网格视图中消失。

在添加行之前。

添加行后。

JavaScript 代码

    $(document).ready(function () {
       function multInputs() {
           var $mult = 0;
           var $multNet = 0;
           var $multGrand = 0;
           $("tr.txtMult").each(function () {
               var $UnitPrice = $('.UnitPrice', this).val();
               var $Quantity = $('.Quantity', this).val();
               var $Discount = $('.Discount', this).val();
               var $total = (($UnitPrice) * ($Quantity));
               var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

               $mult += $total;
               $multNet += $Nettotal;
           });

           $("tr.txtMult").each(function () {
               var $UnitPrice = $('.UnitPrice', this).val();
               var $Quantity = $('.Quantity', this).val();
               var $Discount = $('.Discount', this).val();
               var $total = (($UnitPrice) * ($Quantity));
               var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

               $('.multTotal', this).text(parseFloat($total).toFixed(2));
               $('.multNet', this).text(parseFloat($Nettotal).toFixed(2));

           });
           $(".lblGrandAmount").text(parseFloat($mult).toFixed(2));
           $(".lblNetTotal").text(parseFloat($multNet).toFixed(2));
       }                          

    $(".txtMult input").on('keyup mouseup', multInputs);
    function multInputs() {
        var $mult = 0;
        var $multNet = 0;
        var $multGrand = 0;
        $("tr.txtMult").each(function () {
            var $UnitPrice = $('.UnitPrice', this).val();
            var $Quantity = $('.Quantity', this).val();
            var $Discount = $('.Discount', this).val();
            var $total = (($UnitPrice) * ($Quantity));
            var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

            $mult += $total;
            $multNet += $Nettotal;   

        });

        $("tr.txtMult").each(function () {
            var $UnitPrice = $('.UnitPrice', this).val();
            var $Quantity = $('.Quantity', this).val();
            var $Discount = $('.Discount', this).val();
            var $total = (($UnitPrice) * ($Quantity));
            var $Nettotal = (($UnitPrice) * ($Quantity) - ($Discount) * ($Quantity));

            $('.multTotal', this).text(parseFloat($total).toFixed(2));
            $('.multNet', this).text(parseFloat($Nettotal).toFixed(2));

        });
        $(".lblGrandAmount").text(parseFloat($mult).toFixed(2));
        $(".lblNetTotal").text(parseFloat($multNet).toFixed(2));

    }
});

C#代码

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            SetInitialRow();
        }
    }

 protected void griditem_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "txtMult";
        }    
    }


    protected void ButtonAdd_Click(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }

    private void AddNewRowToGrid()
    {
        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        {
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {
                    //extract the TextBox values
                    DropDownList dllitem = (DropDownList)griditem.Rows[rowIndex].Cells[1].FindControl("dllitem");
                    TextBox txtUnitprice = (TextBox)griditem.Rows[rowIndex].Cells[2].FindControl("txtUnitprice");
                    TextBox txtDiscount = (TextBox)griditem.Rows[rowIndex].Cells[3].FindControl("txtDiscount");
                    TextBox txtQuantity = (TextBox)griditem.Rows[rowIndex].Cells[4].FindControl("txtQuantity");
                    Label lblTotal = (Label)griditem.Rows[rowIndex].Cells[5].FindControl("lblTotal");
                    Label lblnet = (Label)griditem.Rows[rowIndex].Cells[6].FindControl("lblnet");

                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["Sr.No"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["Column1"] = dllitem.SelectedValue;
                    dtCurrentTable.Rows[i - 1]["Column2"] = txtUnitprice.Text;
                    dtCurrentTable.Rows[i - 1]["Column3"] = txtDiscount.Text;
                    dtCurrentTable.Rows[i - 1]["Column4"] = txtQuantity.Text;
                    dtCurrentTable.Rows[i - 1]["Column5"] = lblTotal.Text;
                    dtCurrentTable.Rows[i - 1]["Column6"] = lblnet.Text;


                    rowIndex++;
                }
                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                griditem.DataSource = dtCurrentTable;
                griditem.DataBind();
            }
        }
        else
        {
            Response.Write("ViewState is null");
        }

        //Set Previous Data on Postbacks
        SetPreviousData();
    }

    private void SetPreviousData()
    {
        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentTable"];
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    DropDownList dllitem = (DropDownList)griditem.Rows[rowIndex].Cells[1].FindControl("dllitem");
                    TextBox txtUnitprice = (TextBox)griditem.Rows[rowIndex].Cells[2].FindControl("txtUnitprice");
                    TextBox txtDiscount = (TextBox)griditem.Rows[rowIndex].Cells[3].FindControl("txtDiscount");
                    TextBox txtQuantity = (TextBox)griditem.Rows[rowIndex].Cells[4].FindControl("txtQuantity");
                    Label lblTotal = (Label)griditem.Rows[rowIndex].Cells[5].FindControl("lblTotal");
                    Label lblnet = (Label)griditem.Rows[rowIndex].Cells[6].FindControl("lblnet");

                    dllitem.SelectedValue = dt.Rows[i]["Column1"].ToString();
                    txtUnitprice.Text = dt.Rows[i]["Column2"].ToString();
                    txtDiscount.Text = dt.Rows[i]["Column3"].ToString();
                    txtQuantity.Text = dt.Rows[i]["Column4"].ToString();
                    lblTotal.Text = dt.Rows[i]["Column5"].ToString();
                    lblnet.Text = dt.Rows[i]["Column6"].ToString();

                    rowIndex++;
                }
            }
        }
    }    

    private void SetInitialRow()
    {
        DataTable dt = new DataTable();
        DataRow dr = null;
        dt.Columns.Add(new DataColumn("Sr.No", typeof(string)));
        dt.Columns.Add(new DataColumn("Column1", typeof(string)));
        dt.Columns.Add(new DataColumn("Column2", typeof(string)));
        dt.Columns.Add(new DataColumn("Column3", typeof(string)));
        dt.Columns.Add(new DataColumn("Column4", typeof(string)));
        dt.Columns.Add(new DataColumn("Column5", typeof(string)));
        dt.Columns.Add(new DataColumn("Column6", typeof(string)));

        dr = dt.NewRow();
        dr["Sr.No"] = 1;
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dr["Column4"] = string.Empty;
        dr["Column5"] = string.Empty;
        dr["Column6"] = string.Empty;

        dt.Rows.Add(dr);

        //Store the DataTable in ViewState
        ViewState["CurrentTable"] = dt;

        griditem.DataSource = dt;
        griditem.DataBind();
    }

Answer 1

您必须在 PostBack 之后手动执行将侦听器绑定到 UpdatePanel 中的元素的 JavaScript 代码。所以创建一个 javascript 函数，你可以在需要时再次调用，而不仅仅是在文档中准备好。

<script type="text/javascript">
    $(document).ready(function () {
        doDefaultStuff();
    });

    function doDefaultStuff() {
        //all the javascript that you would normally put in document ready
    }        
</script>

然后在后面的代码中调用 PostBack 方法中的那个 javascript 函数。

protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "doDefaultStuff", "doDefaultStuff();", true);
}

Answer 2

您需要在部分回发后再次触发计算。这可以通过首先将所有计算脚本包装到一个函数中来完成。然后在文档加载和部分回发时调用此函数。

$(document).ready(function() {
    // trigger you calculations
    doMyStuff();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // trigger you calculations
    doMyStuff();
});