C# 使用 ASP.Net MVC 创建计算器答案

【问题标题】：C# Creating a calculator using ASP.Net MVCC# 使用 ASP.Net MVC 创建计算器
【发布时间】：2017-06-24 08:25:56
【问题描述】：

我正在学习 mvc 并尝试创建一个简单的计算器。我已经完成了大部分工作，但我似乎无法使用 javaScript 进行计算部分。在浏览器中显示的结果几乎是完整的，是这样的：5 + 2 = 0。

这是计算结果将显示在浏览器中的视图，也是我认为计算部分应该在的位置（如果我错了，请纠正我）：

@model CalculatorWebPage.Models.Calc

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CalculateResult</title>
       <script>
        if (@Model.Operator == '+')
        {
            @Model.Result = @Model.FirstNumber + @Model.SecondNumber;
        }
        else if (@Model.Operator == '-')
        {
            @Model.Result = @Model.FirstNumber - @Model.SecondNumber;
        }
        else if (@Model.Operator == '*')
        {
            @Model.Result = @Model.FirstNumber * @Model.SecondNumber;
        }
        else if (@Model.Operator == '/')
        {
            @Model.Result = @Model.FirstNumber / @Model.SecondNumber;
        }
        return @Model.Result;

    </script>
</head>
<body>
    <div>
        @Model.FirstNumber @Model.Operator @Model.SecondNumber = @Model.Result
    </div>
</body>
</html>

这是放javeScript代码计算的地方和方式吗？

【问题讨论】：

你能分享你的控制器代码吗？你说的不工作是什么意思？它会给你任何错误吗？它是否给出了意外的输出，显示了什么输出？预期输出是什么？
为什么在你看来计算？这不是 MVC 的本意。
@JanesAbouChleih 我是 MVC 新手，正在学习如何使用它。很抱歉，如果我尝试在我看来计算。我想我没有到达我应该计算的部分并来这里寻求一点帮助/..
你需要实际编写JS函数然后调用它。见w3schools.com/js/tryit.asp?filename=tryjs_events_onclick
@ChetanRanpariya 它没有计算任何东西。就像我在问题中写的那样，点击“计算”按钮后浏览器中的显示为：5 * 2 = 0。这意味着它显示的是当前数据，而不是当前的计算结果。

标签： c# asp.net asp.net-mvc-4

【解决方案1】：

正如 cmets 中所述，我不会计算 View 中的任何内容，因为它的唯一目的是显示或查看您存储在 Model 中的数据。一个简单的 MVC 计算器应该如下所示。
你有你的CalculationModel，它存储了信息：

public class CalculationModel
{
    public decimal FirstNumber { get; set; }
    public decimal SecondNumber { get; set; }
    public decimal Result { get; set; }
    public CalculationMethod calculationMethod { get; set; } 
}

我在这里使用了Enum 来表示所有可能的计算方法：

public enum CalculationMethod
{
    Addition = '+',
    Subtraction = '-',
    Multiplication = '*', 
    Division = '/'
}

你的视图应该只使用你的模型提供的信息并在Labels、Textboxes等中显示。

@model WebApplication1.Models.CalculationModel

@using (Html.BeginForm("Index", "Calculation", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.LabelFor(m => m.FirstNumber) @Html.TextBoxFor(x => x.FirstNumber)<br />
    @Html.LabelFor(m => m.SecondNumber) @Html.TextBoxFor(x => x.SecondNumber)<br />
    @Html.LabelFor(m => m.Result) @Html.TextBoxFor(x => x.Result)<br />
    @Html.DropDownListFor(m => m.calculationMethod, new SelectList(Enum.GetValues(typeof(CalculationMethod))))
    <input type="submit" />
}

最后你有你的Controller 来处理所有的动作。

根据您的配置，您有一种方法可以处理您的请求 (HttpPost or HttpGet)，还有一种方法可以简单地显示您的空 View：

public IActionResult Index()
{
    return View();
}

[HttpPost]
public async Task<IActionResult> Index(CalculationModel model)
{
    ModelState.Clear();
    switch (model.calculationMethod)
    {
        case CalculationMethod.Addition:
            model.Result = model.FirstNumber + model.SecondNumber;
            break;
        case CalculationMethod.Subtraction:
            model.Result = model.FirstNumber - model.SecondNumber;
            break;
        case CalculationMethod.Multiplication:
            model.Result = model.FirstNumber * model.SecondNumber;
            break;
        case CalculationMethod.Division:
            model.Result = model.FirstNumber / model.SecondNumber;
            break;
    }
    return View(model);
}

等等，MVC 模式实现了 ;)

Controller 中的ModelState.Clear();“刷新”您的数据存储在其中的所有Textboxes，否则Result 不会显示。

小修改：

如果您不使用DropDownList 来显示Value（例如Addition）但想显示DisplayName，您可以使用MVC5 执行以下操作（在ASP.NET Core 2.0 预览版中测试1）：

将@Html.DropDownListFor(m => m.calculationMethod, ...) 替换为

<select asp-for="calculationMethod" asp-items="Html.GetEnumSelectList(typeof (CalculationMethod))"></select>

或

@Html.DropDownListFor(m => m.calculationMethod, (Html.GetEnumSelectList(typeof(CalculationMethod))))

现在使用以下属性定义枚举：

public enum CalculationMethod
{
    [Display(Name = "+")]
    Addition,
    [Display(Name = "-")]
    Subtraction,
    [Display(Name = "*")]
    Multiplication,
    [Display(Name = "/")]
    Division
}

【讨论】：

【解决方案2】：

您的模型值未更新。试试这个

 if (@Model.Operator == '+')
   {
      document.getElementById('Result').value = @Model.FirstNumber + @Model.SecondNumber;
   }

【讨论】：