使用 Ajax 和 Asp.Net MVC 的计算器

Question

我正在使用 asp.net mvc 和 ajax 创建一个简单的计算器，这是代码。

 public ActionResult Index()
        {
            return View(new Calculator_Model());
        }

        [HttpPost]
        public ActionResult Index(Calculator_Model cal,string calculate)
        {
            if (calculate == "add")
            {
                cal.Total = cal.Number1 + cal.Number2;
            }
            else if (calculate == "sub")
            {
                cal.Total = cal.Number1 - cal.Number2;
            }
            else if (calculate == "multi")
            {
                cal.Total = cal.Number1 * cal.Number2;
            }
            else if (calculate == "divis")
            {
                cal.Total = cal.Number1 / cal.Number2;
            }

            return Json(cal);

        }

model页面是

    public class Calculator_Model
    {
        public int Number1 { get;set; }
        public int Number2 { get;set; }
        public int Total { get;set; }

    }

并且查看页面是

@model Calculator.Models.Calculator_Model

@{
    ViewBag.Title = "Index";
}

@using (Ajax.BeginForm("index", "Calculator",
    new AjaxOptions()
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "Total",
    }
    ))
{
        <input type="number"  name="Number1" value="@Model.Number1" />

        <input type="number"  name="Number2" value="@Model.Number2" />

        <div>
        <input type="number" name="Total" value="@Model.Total" disabled />
        <div id="Total">
        </div>
        </div>

        <button type="submit" name="calculate" value="add">+</button>
        <button type="submit" name="calculate" value="sub">-</button>
        <button type="submit" name="calculate" value="multi">*</button>
        <button type="submit" name="calculate" value="divis">/</button>
}

逻辑工作正常，但我希望计算器的结果显示在禁用的输入标签中。

任何人在这里帮助我。

我期待结果会出现在禁用输入框中。

Answer 1

我期待结果会出现在禁用输入框中。

好吧，如果您希望在disable mood状态下在Total输入inputbox显示结果，您可以通过以下方式简单地执行此操作：

Controller：

public class CalculatorController : Controller
    {
        public ActionResult Index()
        {
            return View(new Calculator_Model());
        }

        [HttpPost]
        public ActionResult Index(Calculator_Model cal, string calculate)
        {
            if (calculate == "add")
            {
                cal.Total = cal.Number1 + cal.Number2;
            }
            else if (calculate == "sub")
            {
                cal.Total = cal.Number1 - cal.Number2;
            }
            else if (calculate == "multi")
            {
                cal.Total = cal.Number1 * cal.Number2;
            }
            else if (calculate == "divis")
            {
                cal.Total = cal.Number1 / cal.Number2;
            }

            return View("Index",cal);

        }

    }

注意：而不是返回Json(cal); 您可以使用latest model state返回index操作作为return View("Index",cal);

看法：

@model DotNet6MVCWebApp.Controllers.Calculator_Model

@{
    ViewBag.Title = "Index";
}
<form asp-controller="Calculator" method="post" asp-action="Index">
    <div class="row">
        <div class="form-group">
            <label asp-for="Number1" class="control-label"></label>
            <input asp-for="Number1" class="form-control" placeholder="Enter first number" />
            <span asp-validation-for="Number1" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Number2" class="control-label"></label>
            <input asp-for="Number2" class="form-control" placeholder="Enter second number" />
            <span asp-validation-for="Number2" class="text-danger" ></span>
        </div>

        <div class="form-group">
            <label asp-for="Total" class="control-label"></label>
            <input asp-for="Total" class="form-control" value="@Model.Total" disabled />
            <span asp-validation-for="Number2" class="text-danger"></span>
        </div>
        <div class="form-group" style="margin-top:5px">
            <button type="submit" name="calculate" class="btn btn-primary" value="add"><strong>+</strong></button>
            <button type="submit" name="calculate" class="btn btn-info" value="sub"><strong>-</strong></button>
            <button type="submit" name="calculate" class="btn btn-success" value="multi"><strong>*</strong></button>
            <button type="submit" name="calculate" class="btn btn-warning" value="divis"><strong>/</strong></button>
        </div>
    </div>
</form>

纯 Ajax Javascript 例子：

<div>
    <input id="Number1" class="form-control" placeholder="Enter first number" />
    <input id="Number2" class="form-control" placeholder="Enter second number" />
    <input id="Total" class="form-control" value="" disabled />
    <button type="submit" name="calculate" class="btn btn-primary" value="add"><strong>+</strong></button>
    <button type="submit" name="calculate" class="btn btn-info" value="sub"><strong>-</strong></button>
    <button type="submit" name="calculate" class="btn btn-success" value="multi"><strong>*</strong></button>
    <button type="submit" name="calculate" class="btn btn-warning" value="divis"><strong>/</strong></button>
</div>

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {

            $("button").click(function () {
                var operation = $(this).val();
                var data = {
                    Number1: $("#Number1").val(),
                    Number2: $("#Number2").val(),
                }
                console.log(data);
                $.ajax({
                    type: "POST",
                    url: 'http://localhost:5094/Calculator/Post?calculate=' + operation,
                    datatype: "json",
                    data: data,
                    success: function (res) {
                        console.log(res);
                        $("#Number1").val(res.number1);
                        $("#Number2").val(res.number2);
                        $("#Total").val(res.total);
                    },
                    error: function () {
                        alert("It failed");
                    }
                });
                return false;
            });
        });
    </script>
}

注意：好吧，根据您的评论，这里是干净的ajax示例。 如果您使用此模式，则返回 controller 值作为return Json(cal);`

Output：

这是您尝试实施的更简洁的方式。