StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to send expression from View to Model then parse and calculate it?
text
Body
copied!<p>I have something like simple MS Windows Calculator in ASP.NET MVC 4. Now I don't know how to send expression like <code>4+5</code> to the Model for example to <code>public string Expression { get; set }</code>. Then I want parse this expression and calculate it but how to do it?</p> <p>I have Controller:</p> <pre><code>public class CalculatorController : Controller { // // GET: /Calculator/ public ActionResult Index() { return View(); } //GET: /Calculator/Calculate [HttpGet] public ActionResult Calculate(Calculator model) { return View(model); } //POST [HttpPost] public ActionResult Calculate() { Calculator model = new Calculator(); return View(model); } } </code></pre> <p>I have Model:</p> <pre><code>public class Calculator { public string Expression { get; set; } public double Result { get; set; } } </code></pre> <p>And I have View with Razor and JavaScript:</p> <pre><code>@using (Html.BeginForm("Calculate", "Calculator", FormMethod.Post)){ @Html.LabelFor(model => model.Expression) @Html.TextBoxFor(model => model.Expression) <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="submit" id="btnEqual" value="=" /></td> @Html.ValueFor(model => model.Expression) <td><input type="button" id="btnLBracket" value="(" /></td> <td><input type="button" id="btnRBracket" value=")" /></td> </tr> </table> </code></pre> <p>}</p> <p>JavaScript in the same View:</p> <pre><code><script> window.onload = function () { document.getElementById('btnSeven').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnSeven').value; }); document.getElementById('btnEight').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnEight').value; }); document.getElementById('btnNine').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnNine').value; }); document.getElementById('btnDelete').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnDelete').value; }); document.getElementById('btnClear').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnClear').value; }); document.getElementById('btnFour').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnFour').value; }); document.getElementById('btnFive').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnFive').value; }); document.getElementById('btnSix').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnSix').value; }); document.getElementById('btnMultiply').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnMultiply').value; }); document.getElementById('btnDivide').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnDivide').value; }); document.getElementById('btnOne').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnOne').value; }); document.getElementById('btnTwo').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnTwo').value; }); document.getElementById('btnThree').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnThree').value; }); document.getElementById('btnPlus').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnPlus').value; }); document.getElementById('btnMinus').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnMinus').value; }); document.getElementById('btnZero').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnZero').value; }); document.getElementById('btnDot').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnDot').value; }); @*document.getElementById('btnEqual').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnEqual').value; });*@ document.getElementById('btnLBracket').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnLBracket').value; }); document.getElementById('btnRBracket').addEventListener('click', function () { document.getElementById('Expression').value = document.getElementById('Expression').value + document.getElementById('btnRBracket').value; }); } </code></pre> <p></p> <p>How to send expression to <code>Expression</code> then parse and calculate and send to <code>Result</code> and then send to the <code>textBox</code>. Everything must be done in the same textBox after click on <code>=</code> button.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload