在gridview中回发后Javascript代码不会运行
Posted
技术标签:
【中文标题】在gridview中回发后Javascript代码不会运行【英文标题】：Javascript Code won't run after postback in gridview 【发布时间】：2017-06-19 05:29:08 【问题描述】：当单击位于 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();
【问题讨论】：
当您单击 ButtonAdd 时，页面会重新加载，因此您会丢失所有不在 ViewState 中的内容，为什么不使用附加到 txtMult_keyUp 的服务器端方法替换您的 multInputs 函数呢？ 您使用的是UpdatePanel吗？
是的，我正在使用 UpdatePanel
【参考方案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);
【讨论】：
【参考方案2】：您需要在部分回发后再次触发计算。这可以通过首先将所有计算脚本包装到一个函数中来完成。然后在文档加载和部分回发时调用此函数。
$(document).ready(function()
// trigger you calculations
doMyStuff();
);
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function()
// trigger you calculations
doMyStuff();
);
【讨论】：
以上是关于在gridview中回发后Javascript代码不会运行的主要内容，如果未能解决你的问题，请参考以下文章
在 .NET 中回发后从后面的代码中获取 HTML5 输入类型搜索的值