C# 更改时更新文本框而不刷新_C#_Html_Asp.net

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

c# html asp.net

C# 更改时更新文本框而不刷新,c#,html,asp.net,C#,Html,Asp.net,我正在开发我自己的aspx程序，现在我有一个计算器，我希望它能够填充一些值，当你按tab键填充下一个值时，它将自动计算并写入文本框（或标签）。这必须在不刷新页面的情况下进行。这是否可能与c#结合使用，或者我是否需要寻找php+ajax来完成这项工作我有以下代码： <asp:TextBox ID="tbx_rms" onchanged="textboxcalc" runat="server"></asp:TextBox> <asp:TextBox ID="tbx_

我正在开发我自己的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>

我希望我的意图足够清楚，如果没有，我会很乐意回答任何问题。

您可以使用

UpdatePanel

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

然而，对于像这样简单的事情，c#可能有点过头了。你可以用简单的javascript解决这个问题。

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

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

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

只需在客户端脚本中实现您已经在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>


计算
函数更新计算（f）
{
如果（f.tbx_rms.value！==“”&f.tbx_volt.value！==“”）
{
var rms=f.tbx_rms.value；
var volt=f.tbx_volt.value；
var ant=均方根/伏特；
如果（f.tbx_eff.value！==“”）
{
var effi=f.tbx_eff.value；
总价值=（有效/有效）*100；
f、 tbx_anw3.value=tot；
}
f、 tbx_anw1.value=ant；
f、 tbx_anw2.value=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>


函数calctxtboxes（）{
var rms=document.getElementById（“”）.value；
var volt=document.getElementById（“”）.value；
var effi=document.getElementById（“”）.value；
如果（rms！=“”&&V！=“”）{
var ant=均方根/伏特；
document.getElementById（'tbx_anw1'）。value=ant；
document.getElementById（'tbx_anw2'）。value=ant；
如果（effi！=“”）{
var总额=（ant/effi）*100；
document.getElementById（'tbx_anw3'）。值=总计；
}
}
}

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”来实现这一点。

为什么不使用纯java脚本函数？如果只是数学计算，那么您可以在客户端进行。一个词bestanswer JavaScription离开文本框时是否没有可以触发的事件？updatepanel糟透了。他们来回传输整个viewstate。使用ajax函数调用Web服务是一个更好的选择。在宽带世界中，很难注意到。UpdatePanels还允许您将所有代码保存在c#中，即托管、编译的代码，这提高了可维护性。此外，如果您有现有的回发代码，就像OP一样，将控件包装在UpdatePanel中以获得异步功能是很简单的。有时候，可维护性和开发速度胜过性能上的微小损失。明天我可能会用updatePanel向学校寻求帮助。现在我在javascript中设置了一些东西，但是我如何才能将其发布回文本框？@JasonP你不明白重点。服务器必须传输所有无用的viewstate以及客户端…存在完整的jquery库和迷你jquery库是有原因的——只需保存传输这些150K

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

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