如何将文本框的值发送到字符串变量？答案

【问题标题】：How to send value of textBox to string variable?如何将文本框的值发送到字符串变量？
【发布时间】：2013-10-18 08:12:48
【问题描述】：

如何将文本框的值发送到字符串变量？

我有 html 视图：

<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>
                <td><input type="button" id="btnLBracket" value="(" /></td>
                <td><input type="button" id="btnRBracket" 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;
                });
                document.getElementById('btnLBracket').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnLBracket').value;
                });
                document.getElementById('btnRBracket').addEventListener('click', function () {
                    document.getElementById('textBox').value = document.getElementById('textBox').value + document.getElementById('btnRBracket').value;
                });
            }
        </script>
    </form>
</div>

我有控制器：

public class CalculatorController : Controller
{
    //
    // GET: /Calculator/
    public ActionResult Index()
    {
        return View();
    }
    //GET: /Calculator/Calculate
    public ActionResult Calculate()
    {
        string expression;
        return View();
    }
}

现在我想要将文本框的值发送到字符串表达式，解析表达式如“5+5”并将值结果发送到文本框。一切都必须通过单击按钮 btnEqual 来完成。该怎么做？

【问题讨论】：

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

【解决方案1】：

该代码在服务器上运行，而不是在客户端上。要访问服务器上的文本框，您必须首先将其定义为在服务器上可访问：

<input runat="server" type="text" name="textBox" id="textBox" value=""/>

然后你通过访问Text属性得到文本输入：

string expression = textBox.Text;

虽然这需要回发，但现在这样的事情通常是在 javascript 中完成的。

注意：未经测试的代码，这可能只适用于页面加载。

【讨论】：

我得到错误：名称'textBox'在我的控制器的当前上下文中不存在。
MVC 中没有页面加载。

【解决方案2】：

这将为您提供将数据发送到控制器的基本概念。如果要获取控制器中TextBox的值，可以在提交时将模型发送给控制器。

首先在视图中创建表单：

 @model MVCApp.Models.ModelClassName
    @using (Html.BeginForm("ActionName", "Calculator",
                        FormMethod.Post))
    {
    //codeing textboxes etc

    <input type="submit" value="Upload File" id="btnSubmit" />
    }

现在在控制器中创建一个 Action 方法

[HttpPost]
    public ActionResult ActionName(ModelClassName model)
    {
      //model is now containg all the values of controls present in the view
        return View();
    }

注意：这是您可以将数据发送回控制器的正常程序。

您也可以通过在客户端使用 jquery 执行计算器中的所有操作并同时显示结果来执行相同的操作。这种模式将防止服务器上的命中，您的应用程序将快速执行。

【讨论】：