在不刷新的情况下更新文本框

本文关键字：更新 文本 情况下 刷新 | 更新日期: 2023-09-27 18:16:04

我正在自己的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);
        }

我希望我的意图足够清楚，如果不是，我将很高兴回答任何问题。

在不刷新的情况下更新文本框

听完评论后，我直接使用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>

您可以通过使用带有控件触发器的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>

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

然而，对于这样简单的事情，c#可能是多余的。你可以用简单的javascript来解决这个问题。

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

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

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

从示例中可以看到，它非常直接，您可能也想查找jQuery选择器。对于像您这样的简单计算，如上所述，使用服务器端计算它可能有些多余。

首先，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>
相关文章：