ASP.NET MVC 中的简单图形计算器，如 MS Windows 计算器答案

【问题标题】：Simple graphical calculator in ASP.NET MVC like MS Windows CalculatorASP.NET MVC 中的简单图形计算器，如 MS Windows 计算器
【发布时间】：2013-10-26 01:01:24
【问题描述】：

当我单击btnOne -> btn0 -> btnPlus -> btn2 -> btn1 时，我在 ASP.NET MVC 中获取表达式时遇到问题。我想要这个表达式：10+21，然后点击btnEqual，我想得到这个表达式的总和，并在textBox31 中只得到一个值，就像在简单的 Windows 计算器中一样。该怎么做？

我有一个名为Calculate的视图：

<body>
<div id="CalculatorSpace">
    <form name="Calc">
        <input type="text" name="textBox" id="textBox" value=""/>
        <table>
            <tr>
                <td><input type="button" name="btnSeven" id="btnSeven" value="7" /></td>
                <td><input type="button" id="btnEight" value="8" /></td>
                <td><input type="button" id="btnNine" value="9" /></td>
                <td><input type="button" id="btnDelete" value="DEL" /></td>
                <td><input type="button" id="btnClear" value="CLR" /></td>
            </tr>
            <tr>
                <td><input type="button" id="btnFour" value="4" /></td>
                <td><input type="button" id="btnFive" value="5" /></td>
                <td><input type="button" id="btnSix" value="6" /></td>
                <td><input type="button" id="btnMultiply" value="*" /></td>
                <td><input type="button" id="btnDivide" value="/" /></td>
            </tr>
            <tr>
                <td><input type="button" id="btnOne" value="1" /></td>
                <td><input type="button" id="btnTwo" value="2" /></td>
                <td><input type="button" id="btnThree" value="3" /></td>
                <td><input type="button" id="btnPlus" value="+" /></td>
                <td><input type="button" id="btnMinus" value="-" /></td>
            </tr>
            <tr>
                <td><input type="button" id="btnZero" value="0" /></td>
                <td><input type="button" id="btnDot" value="." /></td>
                <td><input type="button" id="btnEqual" value="=" /></td>
            </tr>
        </table>
        <script>
            window.onload = function () {
                document.getElementById('btnSeven').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnSeven').value;
                });
                document.getElementById('btnEight').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnEight').value;
                });
                document.getElementById('btnNine').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnNine').value;
                });
                document.getElementById('btnDelete').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnDelete').value;
                });
                document.getElementById('btnClear').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnClear').value;
                });
                document.getElementById('btnFour').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnFour').value;
                });
                document.getElementById('btnFive').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnFive').value;
                });
                document.getElementById('btnSix').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnSix').value;
                });
                document.getElementById('btnMultiply').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnMultiply').value;
                });
                document.getElementById('btnDivide').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnDivide').value;
                });
                document.getElementById('btnOne').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnOne').value;
                });
                document.getElementById('btnTwo').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnTwo').value;
                });
                document.getElementById('btnThree').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnThree').value;
                });
                document.getElementById('btnPlus').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnPlus').value;
                });
                document.getElementById('btnMinus').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnMinus').value;
                });
                document.getElementById('btnZero').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnZero').value;
                });
                document.getElementById('btnDot').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnDot').value;
                });
                document.getElementById('btnEqual').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnEqual').value;
                });
            }
        </script>
    </form>
</div>

我的 CalculatorController 看起来像这样：

    public class CalculatorController : Controller
{
    //
    // GET: /Calculator/

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

    //GET: /Calculator/Calculate
    public ActionResult Calculate(string value)
    {

        return View();
    }

}

现在如何在表达式中输入x + x，点击btnEqual进行数据计算（相比按+、-、*、/）？

【问题讨论】：

你有没有尝试过？像 - csharpeval.codeplex.com - 可能对你有用。

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

【解决方案1】：

将NCalc 导入到您的项目中，然后将textBox 传递给控制器并返回Expression 的结果。

public ActionResult Calculate(String textBox)
{
    Expression e = new Expression(textBox);
    MyViewModel model = new MyViewModel {
        Answer = e.Evaluate()
    };
    return View(model);
}

或类似的东西......

【讨论】：

MyViewModel 中必须包含什么？我在模型目录中没有任何模型。第二个问题是如何将 NCalc 导入我的项目，我必须导入 NCalc 的所有文件还是只导入 Expression 类？