Asp.Net Core MVC 计算器

Question

我在 Asp.Net Core Mvc 上做一个计算器，遇到了一个问题。我有CalcModel 和CalcController。还有IndexCalculator 视图。

public class CalcModel
    {
    
        public decimal FirstNumber { get; set; }
        public decimal SecondNumber { get; set; }
        public decimal Result { get; set; }
        public CalculationMethod calculationMethod { get; set; }
    
        public enum CalculationMethod
        {
            [Display(Name = "+")]
            Addition,
            [Display(Name = "-")]
            Subtraction,
            [Display(Name = "*")]
            Multiplication,
            [Display(Name = "/")]
            Division
        }
    }

我的控制器

[HttpPost]
        public async Task<IActionResult> IndexCalculator(CalcModel 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);
        }

还有我的妻子：

 @using (Html.BeginForm("IndexCalculator", "Calc", 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, (Html.GetEnumSelectList<CalcModel.CalculationMethod>()))
            <input type="submit" />

请告诉我如何制作带有数字的键盘，这样您就不必手动输入了。 现在我有三个labelFor 和DropDownListFor 来选择方法。

Answer 1

我想做一个类似Windows的计算器

您可以使用 Bootstrap 显示数字键盘和计算图标，然后使用JavaScript eval() Function 来计算结果。

示例代码如下（参考this link）：

<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'>
            <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'>7</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>8</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>9</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>+</button>
        </div>
    </div> <!--row-->
    <div class='row'>
        <div class='col-xs-1 col-xs-offset-4'>
            <button class='btn btn-lg btn-primary' type='button'>4</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>5</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>6</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button' id='small'>-</button>
        </div>
    </div> <!--row-->
    <div class='row'>
        <div class='col-xs-1 col-xs-offset-4'>
            <button class='btn btn-lg btn-primary' type='button'>1</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>2</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button'>3</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button' id='small'>*</button>
        </div>
    </div> <!--row-->
    <div class='row'>
        <!--row-->
        <div class='col-xs-1 col-xs-offset-4'>
            <button class='btn btn-lg btn-primary' type='button'>0</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button' id='small'>.</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='submit' id='submit'>=</button>
        </div>
        <div class='col-xs-1'>
            <button class='btn btn-lg btn-primary' type='button' id='small'>/</button>
        </div>
    </div>
</div>

在上述视图页面的最后，添加以下脚本：

@section Scripts{
    <script>
        $(document).ready(function () {
            $('.col-xs-1').click(function () {
                if ($(this).text().trim() !== '=') {
                    var text = $(this).text().toString()
                    $('input:text').val(function (i, val) {
                        return val + text.trim();
                    });
                }
            })
            $('.btn-warning').click(function () {
                $('input:text').val('');
            })
            $('#submit').click(function () {
                var expr = $('input').val();
                var res = eval(expr);
                $('input:text').val(res);
            })
        });
    </script>
}

样式文件如下：

<style>
    .focusedInput {
        border-color: rgba(82,168,236,.8);
        outline: 0;
        outline: thin dotted \9;
        -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
        box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
    }

    body {
        background-color: gainsboro;
    }

    .form-inline {
        text-align: center;
    }

    .col-xs-1 {
        margin-right: 8px;
        margin-top: 44px;
    }

    #small {
        margin-left: 2px;
    }

    h1 {
        font-size: 56px;
        margin-bottom: 20px; 
    }

    .btn {
        font-family: Georgia;
        font-size: 22px
    }

    input {
        text-align: right; 
    }
</style>

然后，结果如下：

之后，如果要将计算结果保存到数据库中，可以使用JQuery 查找文本框的值，然后使用Ajax 方法调用action 方法。您可以参考以下链接：

JQuery AJAX and JSON Example in ASP.Net Core MVC

How to use jQuery AJAX method to call an Action method in ASP.NET Core