c# - 更改时更新文本框而不刷新

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="true" 来实现此目的。

<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

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

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

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

Answer 4

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

Answer 5

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

但是，对于像这样简单的事情，c# 可能是矫枉过正。您可以使用简单的 javascript 解决这个特殊问题。

Answer 6

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

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

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

如果您不确定如何执行此操作，请实施您知道如何执行的操作，并在此处通过使用您创建的新代码更新您的问题来评论您所做的事情，指定您遇到的问题，我们可以进一步指导您问题。

您将希望使用库来执行 JavaScript，但这是我刚刚为您编写的示例供您使用，您可能不想将它用于您的东西，因为我确信它的实现非常糟糕，但它应该可以帮助您了解它在所需代码量和简单性方面应该是什么样的，还应该向您展示 C# 方法对于您想要做的事情来说有点太多了。

<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>