Question

我正在开发自己的aspx程序，现在我有一个计算器，我希望能够填写一些值，当你按Tab键到下一个值并填入它时会自动计算并写入文本框（或标签）。这必须无需刷新页面。这可能与c＃结合使用或者我需要寻找php + ajax才能完成这项工作吗？

我有以下编码：

<asp:TextBox ID="tbx_rms" onchanged="textboxcalc" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchanged="textboxcalc" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_eff" onchanged="textboxcalc" runat="server"></asp:TextBox>    
<asp:TextBox ID="tbx_anw3" Enabled="false"  runat="server"></asp:TextBox>

这是c＃代码：

public void textboxcalc(object sender, EventArgs e)
    {
        if (tbx_rms.Text != "" && tbx_volt.Text != "")
        {
            double rms = Convert.ToDouble(tbx_rms.Text);
            double volt = Convert.ToDouble(tbx_volt.Text);
            double ant = Convert.ToDouble(rms / volt);
            if (tbx_eff.Text != "")
            {
                double effi = Convert.ToDouble(tbx_eff.Text);
                double tot = Convert.ToDouble((effi / ant) * 100);
                tbx_anw3.Text = Convert.ToString(tot);
            }
            tbx_anw1.Text = Convert.ToString(ant);
            tbx_anw2.Text = Convert.ToString(ant);

        }

我希望很清楚我的意图是什么，如果不是，我会乐意回答任何问题。

Answer 1

听完评论后我就开始使用javascript进行计算。

<script type="text/javascript">
    function calctxtboxes() {
        var rms = document.getElementById('<%=tbx_rms.ClientID%>').value;
        var volt = document.getElementById('<%=tbx_volt.ClientID%>').value;
        var effi = document.getElementById('<%=tbx_eff.ClientID%>').value;
        if (rms != "" && volt !="") {
            var ant = rms / volt;
            document.getElementById('tbx_anw1').value = ant;
            document.getElementById('tbx_anw2').value = ant;
            if (effi != "") {
                var total = (ant / effi)*100;
                document.getElementById('tbx_anw3').value = total;
            }
        }
    }
</script>

和这样的aspx：

<asp:TextBox ID="tbx_rms" onchange="calctxtboxes()" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchange="calctxtboxes()" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_eff" onchange="calctxtboxes()" runat="server"></asp:TextBox>    
<asp:TextBox ID="tbx_anw3" Enabled="false"  runat="server"></asp:TextBox>

Answer 2

您可以通过将UpdatePanel与控制触发器一起使用并设置AutoPostback =＆＃34; true＆＃34;来实现此目的。对于导致该事件的文本框。

<asp:TextBox ID="tbx_rms" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tbx_rms" />
        <asp:AsyncPostBackTrigger ControlID="tbx_volt" />
        <asp:AsyncPostBackTrigger ControlID="tbx_eff" />
    </Triggers>
    <ContentTemplate>
      <asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
      <asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="tbx_eff" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>    
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tbx_rms" />
        <asp:AsyncPostBackTrigger ControlID="tbx_volt" />
        <asp:AsyncPostBackTrigger ControlID="tbx_eff" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="tbx_anw3" Enabled="false" runat="server"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 3

您可以使用UpdatePanel控件。刷新将在幕后使用ajax完成，因此页面不会闪烁。

然而，对于像这样简单的事情，c＃可能有点矫枉过正。你可以用简单的javascript解决这个特殊问题。

Answer 4

通过使用更新面板在asp.net中使用ajax，您可以实现此功能。

Answer 5

首先，PHP不是必需的，除非你想在价值回到服务器时做一些事情，否则不需要C＃，JavaScript是最好的选择，在你提到的3中。如果你正在做数学，请注意JavaScript并不总是与C＃在舍入和可能的其他类型的数学方面的行为相同，但我在两种语言之间经历了四舍五入的怪癖。

如果您可以通过某些客户端脚本（可能是JavaScript的形式）更新文本框，那么当用户点击提交按钮时，您需要做的就是将所有值发送回服务器。它已经做了，假设您希望将值发送回服务器。

只需在客户端脚本中实现C＃中已有的计算，然后更新文本框，然后通过单击提交按钮回发值，捕获值并使用它执行所需操作。请注意，您正在进行计算的文本框已经存在于代码中，因此当您单击现有的提交按钮时，您的值将被发送回服务器，同样，假设您希望将值发回服务器。

如果您不确定如何执行此操作，请执行您知道如何操作的内容，并通过使用您创建的新代码更新问题来评论您所做的事情，指明您所处的位置，我们可以指导您进一步解决这个问题。

你会想要使用一个库来做JavaScript，但这里有一个我刚刚为你编写的例子，你可能不会想用它来做你的东西，因为我相信它是非常糟糕的在它的实现中，它应该帮助你看到一些在所需的代码量和简单性方面应该是什么样的，还应该向你展示C＃方法对于你想要做的事情来说有点太多了。 / p>

<html>
    <head>
        <title>Calculations</title>
        <script type="text/javascript">
        function UpdateCalculation(f)
        {
            if (f.tbx_rms.value !== "" && f.tbx_volt.value !== "")
            {
                var rms = f.tbx_rms.value;
                var volt = f.tbx_volt.value;
                var ant = rms / volt;

                if (f.tbx_eff.value !== "")
                {
                    var effi = f.tbx_eff.value;
                    var tot = (effi / ant) * 100;
                    f.tbx_anw3.value = tot;
                }
                f.tbx_anw1.value = ant;
                f.tbx_anw2.value = ant;
            }
        }
        </script>
    </head>
    <body>
        <form name="calcForm">
            <input type="input" id="tbx_rms" name="tbx_rms" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_volt" name="tbx_volt" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_anw1" name="tbx_anw1" />
            <input type="input" id="tbx_anw2" name="tbx_anw2" />
            <input type="input" id="tbx_eff" name="tbx_eff" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_anw3" name="tbx_anw3" />
        </form>
    </body>
</html>

Answer 6

我在以前的项目中使用过这个插件

http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

正如您在示例中所看到的那样，它非常简单，您可能也想查找jQuery selectors。对于像你这样的简单计算，如上所述，使用服务器端来计算它可能是过度的。

更改时更新文本框而不刷新

6 个答案: