javascript - 如何使用自动回发进行计算，以免屏幕闪烁

Question

我有一个表单，只要用户从 Web 表单的下拉列表中选择一个数字，它就会执行自动回发。自动回发运行下面的代码来计算表单的数量。

截屏：

问题是我每次重新计算/自动回发时屏幕上都会出现令人讨厌的闪烁。

是否有另一种编码方式来停止闪烁？

C＃

protected void Page_Load(object sender, EventArgs e)
{

    int intNum1 = 0;
    int intNum2 = 0;
    int intNum3 = 0;
    int totalt = 0;

    intNum1 = int.Parse(ddlNoadults.SelectedValue);
    intNum2 = int.Parse(ddlNoseniors.SelectedValue);
    intNum3 = int.Parse(ddlNochildren.SelectedValue);

    totalt = (intNum1 * 10) + (intNum2 * 8) + (intNum3 * 6);

    tbTotal.Text = totalt.ToString();

}

问候

茶

Answer 1

使用 UpdatePanel 和 AJAXing 计算应该删除或至少大幅减少闪烁。

http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

Answer 2

你可以用 jquery/javascript 来做。本教程如何启动 jquery将对您有所帮助。

$('#<%= ddlNoadults.ClientID &>', '#<%= ddlNoadults.ClientID &>', 
'#<%=ddlNoadults.ClientID &>').change(function(){
        calculate();
});

function calculate(){
    num1 = parseInt($('#<%= ddlNoadults.ClientID &>').val());
    num2 = parseInt($('#<%= ddlNoseniors.ClientID &>').val());
    num3 = parseInt($('#<%= ddlNochildren.ClientID &>').val());
    totalt = (num1 * 10) + (num2 * 8) + (num3 * 6);
    $('#<%= tbTotal.ClientID &>').val(totalt) 
}

$(document).ready(function(){
     calculate();
});

Answer 3

假设您可以依赖您的用户在其浏览器中启用了 javascript，这是一个简单的客户端解决方案。

只需附加一个函数，将所选值与要触发计算的每个 ddl 的更改事件相加...

$("#id-of-ddl").change(callyoursumfunctionhere);