使用HTML5和JS或ASP.NET进行加法和减法运算

本文关键字：运算 NET HTML5 JS ASP 使用 | 更新日期: 2023-09-27 18:19:58

我正试图在本地主机上设置一个非常非常的基本页面来添加和减去值。

我在ASP.NET Razor中设置了一个网页来完成此操作。问题是，我在web应用程序开发方面相当缺乏经验。微软庞大的（而且往往是矛盾的）文档并没有真正起到帮助作用，我可能对我要做的事情缺乏基本的理解。考虑到这一点，不要把我钉在十字架上。

我想要三个字段：第一个值、第二个值和结果输出。我有两个按钮可以选择加法或减法，还有另一个按钮可以进行操作（如果愿意的话，还有一个提交按钮）。显然，这些项目是HTML格式的。现在，我需要做手术。我将使用哪种语言来执行此操作：ASP.NET/Razor C#（"服务器"端）还是JavaScript（"浏览器"端）？我认为两者都有方法，但我对如何在两者中实现这一点有些模糊。

使用HTML5和JS或ASP.NET进行加法和减法运算

两者都有可能，但向您介绍如何在其中一种中实现这一点，虽然很简单，但对于StackOverflow问题来说，有太多的先决条件。JavaScript可能是入门门槛最低的，但如果你已经足够了解用户的页面，那么用C#创建一个包含所需数据的视图模型并在控制器操作中进行加法或减法应该不会太难。

JavaScript中的大纲工作流是-

  1. 通过ID、名称或类查找页面中的输入（ID对初学者来说最容易，因为它有一个简单的长期API）

  2. 获取输入的值-您可能希望将这些值分配给变量，但如果您有对DOM元素的引用，则可以直接使用这些元素中的值。

  3. 检查这些值实际上是数字，而不是字符串或其他无法执行数学运算的值。

  4. 确定要执行的操作。一个简单的选项是在页面上有一个保持初始状态的变量，然后按下相同的按钮来切换它，或者按下（点击）加法和减法按钮来更改它，如前所述。

  5. 使用条件语句（对于像您这样的双选项情况，"if"是最简单的）对值执行所需的算术运算。将结果分配给变量。

  6. 创建一个包含答案的新元素并将其添加到页面中，或者修改现有页面元素的文本。

以上操作需要在事件处理程序函数中完成，该函数响应结果按钮上的单击事件。

进一步学习资源-

  • https://www.codeschool.com/
  • http://www.codecademy.com/
  • https://developer.mozilla.org/

对于ASP.NET MVC/Razor-

  1. 将表格提交给控制器动作

  2. 控制器操作将需要接受视图模型作为参数，或者接受表示要添加的数字和操作的单独参数。

  3. 使用条件语句在C#中执行所需的操作——添加或减去值。将结果分配给变量。

  4. 将变量传递到视图以显示数据。

  5. 将视图结果或部分结果返回给用户（只有在通过Ajax提交请求并在模式窗口中显示结果时才使用partial——这目前太先进了）。

进一步学习资源-

  • http://www.asp.net/mvc
  • http://www.microsoftvirtualacademy.com/

我想你可能知道这一点，但这个问题非常广泛。我将尝试为您的一个问题（"服务器端或浏览器"）提供一个简单的答案：

我可能会选择服务器端，这样你就不必依赖于你的用户启用了JS。然而，如果你知道你的用户有JS和/或你不在乎，那么JS会更快，因为它不必再次访问服务器。

至于如何实现，我认为这超出了stackoverflow的范围。

是的，您的问题非常广泛，实现任务的方法选择实际上取决于许多因素。无论如何，我写下了这个相当原始的版本，我认为你想在JavaScript和jQuery中执行什么，所以这一切都发生在客户端：

<script>
function addOperands() {
    var result = $('#operand1').val() + $('#operand2').val();
    $('#result').val(result);
}
function subtractOperands() {
    var result = $('#operand1').val() - $('#operand2').val();
    $('#result').val(result);
}
</script>
<input id="operand1" type="number" value="5"/>
<input id="operand2" type="number" value="6"/>
<input id="result" type="number" disabled/>
<button id="add" onclick="addOperands()">Add</button>
<button id="subtract" onClick="subtractOperands()">Subtract</button>

你可以在这个jsFiddle中尝试一下。

相关文章：