Question

我是Razor的新手，作为一个教程项目我正在构建一个计算器应用程序。我有一个工作应用程序，点击＆＃34; +＆＃34;提交按钮视图刷新，计算完成并显示在屏幕上。下一个目标也已完成，计算将结果加载到局部视图中。

现在的问题是我的应用程序只能在1个函数下运行，即：＆＃34; +＆＃34; （硬编码）。但我希望它与＆＃34; - ＆＃34;，＆＃34; *＆＃34;和＆＃34; /＆＃34;以及。在我的模型中，我定义了一个属性operationType，它现在总是为null。

如何设置值（＆＃34; +＆＃34;，＆＃34; - ＆＃34;，＆＃34; *＆＃34;，＆＃34; /＆＃34;）通过按钮点击动作（btn-plus，btn-minus，btn-multiply和btn-divide）到我模型中的operationType属性？这样我就可以检查控制器中要求的操作，计算正确的结果然后显示它。

我希望模型属性保持不变。

我可以接受任何建议和/或建议，因为我在这里学习。提前致谢！

母版页CSHTML（CalculationMaster.cshtml）

<body>
    <div id="containter">
        <h2>Calculator</h2>

        @using (Html.BeginForm("CalculationMaster", "Home", FormMethod.Post))
        {
        <fieldset>
            @Html.LabelFor(model => model.Number1) : @Html.EditorFor(model => model.Number1, new { id = "inputNumber1" })

            @Html.LabelFor(model => model.Number2) : @Html.EditorFor(model => model.Number2, new { id = "inputNumber2" })
        </fieldset>
        <div id="dvButtons">
            <ul class="button-block">
                <li><input type="submit" value="+" id="btn-plus" /></li>
                <li><input type="submit" value="-" id="btn-minus" /></li>
                <li><input type="submit" value="*" id="btn-multiply" /></li>
                <li><input type="submit" value="/" id="btn-divide" /></li>
            </ul>
        </div>
        }
    </div>
    <div id="dvCalculationResult">
        @{ Html.RenderPartial("CalculationPartial", Model); }
    </div>    
</body>

部分视图（CalculationPartial.cshtml）

<h2>Result</h2>
<p id="result">@Model.Result</p>

相关控制器代码

public ActionResult CalculationMaster()
{
    return View(new CalculatorModel());
}
// Post: /Home/CalculationMaster
[HttpPost]
public ActionResult CalculationMaster(CalculatorModel calc)
{
    if (ModelState.IsValid)
    {
        var num1 = calc.Number1;
        var num2 = calc.Number2;
        /*
        switch (calc.OperationType)
        {
            case "+":
                calc.Result = num1 + num2;
                break;
            case "-":
                calc.Result = num1 - num2;
                break;
            case "*":
                calc.Result = num1 * num2;
                break;
            case "/":
                calc.Result = num1 / num2;
                break;
            default:
                calc.Result = 0;
                break;
        }*/
        calc.Result = num1 + num2;
        this.headCalculation = calc;
        return View(calc);
    }
    return null;
}
public ActionResult CalculationResult()
{
    var model = this.GetCalculatorModel();
    return PartialView("CalculationResult", model);
}
private CalculatorModel GetCalculatorModel()
{
    {
        if(this.headCalculation == null)
        {
            this.headCalculation = new CalculatorModel();
        }

        return this.headCalculation;
    }
}

模型（CalculatorModel.cs）

public class CalculatorModel
{
    public double Number1
    {
        get;
        set;
    }
    public double Number2
    {
        get;
        set;
    }
    public string OperationType
    {
        get;
        set;
    }
    public double Result
    {
        get;
        set;
    }
}

我尝试使用Javascript修改DOM，使代码陷入无限循环，因此我将其从CalculationMaster.cshtml页面中删除。触发了无限循环

<script type="text/javascript">
    $(function () {
        $("input#btn-plus").click(function () {
            @Model.OperationType = "+";
            @Html.Action("CalculationMaster", "Home")
        });
        $("input#btn-minus").click(function () {
            @Model.OperationType = "-";
            @Html.Action("CalculationMaster", "Home")
        });
        $("input#btn-multiply").click(function () {
            @Model.OperationType = "*";
            @Html.Action("CalculationMaster", "Home")
        });
        $("input#btn-divide").click(function () {
            @Model.OperationType = "/";
            @Html.Action("CalculationMaster", "Home")
        });
    })
</script>

编辑：Stephen Muecke的建议更改

相关控制器代码（添加字符串操作参数）

[HttpPost]
public ActionResult CalculationMaster(CalculatorModel calc, string operation)
    {
       if (ModelState.IsValid)
       {
           var num1 = calc.Number1;
           var num2 = calc.Number2;

            switch(operation)
            {
                case "+":
                    calc.Result = num1 + num2;
                    break;
                case "-":
                    calc.Result = num1 - num2;
                    break;
                case "*":
                    calc.Result = num1 * num2;
                    break;
                case "/":
                    calc.Result = num1 / num2;
                      break;
                default:
                    calc.Result = 0;
                    break;
             }

             this.headCalculation = calc;
             return View(calc);
        }
        return null;
    }

母版页CSHTML（CalculationMaster.cshtml）

<div id="dvButtons">
    <ul class="button-block">
        <li><input type="submit" value="+" id="btn-plus" name="operation"/></li>
        <li><input type="submit" value="-" id="btn-minus" name="operation"/></li>
        <li><input type="submit" value="*" id="btn-multiply" name="operation"/></li>
        <li><input type="submit" value="/" id="btn-divide" name="operation"/></li>
    </ul>
</div>

单击按钮后设置模型属性

0 个答案: