Question

我正在学习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代码的地方和方法吗？

Answer 1

正如评论中所述，我不会计算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);
}

Etvoìla，MVC模式已实现;）

ModelState.Clear();中的

Controller会刷新“您的数据存储的所有Textboxes，否则Result将无法显示。

小编辑：

如果您DropDownList没有显示Value（例如Addition）但希望显示DisplayName，则可以使用MVC5执行以下操作（已测试在ASP.NET Core 2.0 preview1）中：

将@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
}

Answer 2

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

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

C＃使用ASP.Net MVC创建计算器

2 个答案: