我是 MVC 的新手，我想构建一个计算器，其中的按钮用于输入与 [https://codepen.io/centraleft/pen/gPrmLo] 相同 但我想使用模型和控制器而不是 javascript 来构建它。有没有我可以使用的源代码。谢谢你
【问题讨论】：
标签： asp.net-core model-view-controller asp.net-core-mvc calculator
索引.cshtml
@model string
...
<div class="container">
<div class="row">
<form class="form-group-lg form-inline" onsubmit="return false">
<input type="text" id="calcinput" class="focusedInput form-control" value="@Model">
<button type="submit" class="btn btn-warning btn-lg">Clear</button>
</form>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
<button class="btn btn-lg btn-primary" type="button" onclick="location.href='@Url.Action("Index", "Home", new { val = Model + "7"})'">7</button>
</div>
...
HomeController.cs
...
public IActionResult Index(string val)
{
return View((object)val);
}
...
只需开始数字部分，您可以完成其余的工作。 FYR：https://github.com/ChrisWong979/DotnetMVCCalculator/tree/master
【讨论】：
MVC 中的简单计算器
让我们创建一个名为 MVCCalculator 的新 ASP.NET Core Web 应用程序。即使我们可以从一个空模板开始，我们现在将选择 MVC 模板。
这样，将为我们生成 MVC 组件的文件夹，以及我们上次手动完成的路由和配置。还将生成一个示例项目，其中包括几个滑块，甚至是著名的 EU cookie 消息。您可以尝试运行它。上次我们没有使用它是为了更好地理解 MVC 的工作原理，因此它不会不必要地分散我们的注意力。
我们不需要这个项目，因此我们将删除解决方案资源管理器中的 Models/、Controllers/ 和 Views/ 文件夹的内容，但保留 _ViewImports.cshtml 文件，否则，标签助手（见下文) 将无法正常工作。如果我们像上次一样从一个空项目开始，我们必须手动添加这个文件。不要只使用计算器作为项目名称，因为它会与我们的类名冲突。
让我们展示一下我们完成的计算器的样子：
型号
让我们再次从模型开始，它将是 Calculator 类。将其添加到 Models/ 文件夹。我们将向模型添加几个公共属性，特别是两个输入数字、所选操作和结果。最后一个属性是 SelectListItem 类型的列表，其中包括视图的可能操作。稍后它将呈现为 HTML 元素。我们将直接在构造函数中填充列表。不要忘记使用 Microsoft.AspNetCore.Mvc.Rendering 添加。
public class Calculator
{
public int Number1 { get; set; }
public int Number2 { get; set; }
public double Result { get; set; }
public string Operation { get; set; }
public List<SelectListItem> PossibleOperations { get; set; }
public Calculator()
{
PossibleOperations = new List<SelectListItem>();
PossibleOperations.Add(new SelectListItem { Text = "Add", Value = "+", Selected = true });
PossibleOperations.Add(new SelectListItem { Text = "Subtract", Value = "-" });
PossibleOperations.Add(new SelectListItem { Text = "Multiply", Value = "*" });
PossibleOperations.Add(new SelectListItem { Text = "Divide", Value = "/" });
}
SelectListItem 类的 Text 属性是用户可以看到的选项的标签。 Value 是发送到服务器的值（不应包含任何非字母数字字符，破折号或下划线除外）。我们还可以设置 Selected 属性来指示在页面加载时是否应该选择该项。
唯一剩下的就是一个带有一些逻辑的方法，根据选定的Operation和Number1和Number2中的值，计算Result：
public void Calculate()
{
switch (Operation)
{
case "+":
Result = Number1 + Number2;
break;
case "-":
Result = Number1 - Number2;
break;
case "*":
Result = Number1 * Number2;
break;
case "/":
Result = Number1 / Number2;
break;
}
}
调用方法后，结果存储到 Result 属性中。我们也可以返回结果，就像我们在上一个项目中使用随机数所做的那样。但是对于我们进一步的绑定意图，这将更加有用。
我们已经准备好模型，让我们添加控制器。
控制器
我们的应用程序中只有一个控制器。您一定记得控制器连接了模型（逻辑）和视图（HTML 模板）。我们将添加一个新的空控制器并将其命名为 HomeController。所以当我们打开应用程序的主页时它会被调用。让我们转到它的代码并编辑 Index() 方法，如下所示：
public IActionResult Index()
{
Calculator calculator = new Calculator();
return View(calculator);
}
查看
我们将为 Index() 操作生成视图。我们将一如既往地通过鼠标右键单击方法中的任意位置并选择“添加视图”来执行此操作。作为模板，选择创建，并将模型类设置为计算器。
当我们打开页面时，会调用 Index() 方法，我们已经知道了。这时候，我们创建一个新的模型实例，还是和上一课一样。但是，这一次，我们将模型作为参数传递给视图。不要忘记再次使用 MVCCalculator.Models 添加。
模板允许我们在视图中预先生成一些代码，这种技术称为脚手架。 Create 模板生成一个视图，其中包含所选模型属性的表单，连接到该模型以创建新模型实例。现在，当我们运行应用程序时，它看起来像这样：
我们可以看到，Visual Studio 总共为数字、结果和运算生成了 4 个输入。但是，我们想使用元素指定操作并将结果打印到 HTML 中
段落而不是表单域。
出于这个原因，让我们移动到 Index.cshtml 并将其更改为以下形式：
@model MVCCalculator.Models.Calculator
@{
ViewData["Title"] = "Calculator";
}
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<h2>Index</h2>
<h4>Calculator</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Index">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Number1" class="control-label"></label>
<br />
<input asp-for="Number1" class="form-control" />
<span asp-validation-for="Number1" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Number2" class="control-label"></label>
<br />
<input asp-for="Number2" class="form-control" />
<span asp-validation-for="Number2" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Operation" class="control-label"></label>
<br />
@Html.DropDownListFor(model => model.Operation, new SelectList(Model.PossibleOperations, "Value", "Text"))
<span asp-validation-for="Operation" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Calculate" class="btn btn-default" />
</div>
<p style="font-size: 2em;">@Model.Result</p>
</form>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
</body>
与原始模板相比，我们只做了最少的更改。在模板的最开始，我们设置了视图绑定的模型的类型。接下来，我们设置页面标题和副标题。请注意，由于我们没有将模板插入到布局中，因此我们将 and 元素添加到其中。接下来，有一个由 Visual Studio 生成的表单，我们只是对其进行了编辑。
我们通过以下方式为模型属性添加单独的编辑字段：
<div class="form-group">
<label asp-for="PropertyName" class="control-label"></label>
<br />
<input asp-for="PropertyName" class="form-control" />
<span asp-validation-for="PropertyName" class="text-danger"></span>
</div>
asp-for 属性称为标签助手，ASP.NET Core 可以通过它为我们的属性生成适当的控件元素。例如。为日期等呈现 DatePicker。 asp-validation-for 属性会在用户错误填写字段的情况下为错误消息插入一个空格。这再次从属性数据类型中检测到，并且一切都完全自动化。一个小缺点是我们将属性作为字符串传递给助手，你肯定已经注意到了。幸运的是，Visual Studio 仍然能够验证此类代码。
您可以看到我们将标签助手与使用 IHtmlHelper(@Html) 插入控件的旧方法相结合。标签助手目前并不支持所有控件，有时我们无法避免这种解决方案。然而，我们更喜欢使用标签助手和 asp-for 而不是 at-signs 将表单元素连接到模型属性。我们希望 HTML 模板看起来尽可能像 HTML 代码:)
要使标签助手在您的项目中工作，您需要在其中包含一个名为 _ViewImports.cshtml 的文件，其中包含以下内容。如果您已按照教程进行操作，则该文件已包含在项目中。如果您不小心删除了此文件或从一个空项目开始，您现在可以创建它：
@using MVCCalculator
@using MVCCalculator.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
在页面底部，我们将模型的 Result 属性打印成 HTML
段落，因此我们可以将其显示给用户。
我们的表单现在看起来像这样：
参考：
https://www.ictdemy.com/csharp/asp-net-core/basics/form-handling-in-aspnet-core-mvc
[1]: https://i.stack.imgur.com/1G71n.png
【讨论】：