Create Simple Online Calculator Using MVC and JQuery

It is simple MVC application to create online simple calculator using MVC and JQuery. This article provides a sample to create calculator using MVC 4 and JQuery.

Step 1: Create a new ASP.NET MVC 4 Application.

Step 2: Select Empty Project from Project Template.
 
Step 3: Select Razor view from view engine drop down list.->Click Ok.
 
Step 4: Add a home controller.
 
Step 5: Add this method which used to calculate. 
  1. public string GetResult(string str)  
  2.  {  
  3.  List<char> symbleList = new List<char>();  
  4.  char[] charSymble = { '+''-''*''/' };  
  5.  string[] st = str.Split(charSymble);  
  6.  for (int i = 0; i < str.Length; i++)  
  7.  {  
  8.     if (str[i] == '+' || str[i] == '-' || str[i] == '*' || str[i] == '/')  
  9.     {  
  10.        symbleList.Add(str[i]);  
  11.     }  
  12.  }  
  13.  double result = Convert.ToDouble(st[0]);  
  14.  for (int i = 1; i < st.Length; i++)  
  15.  {  
  16.     double num = Convert.ToDouble(st[i]);  
  17.     int j = i - 1;  
  18.     switch (symbleList[j])  
  19.     {  
  20.        case '+':  
  21.           result = result + num;  
  22.           break;  
  23.        case '-':  
  24.           result = result - num;  
  25.           break;  
  26.        case '*':  
  27.           result = result * num;  
  28.           break;  
  29.        case '/':  
  30.           result = result / num;  
  31.           break;  
  32.        default:  
  33.           result=0.0;  
  34.           break;  
  35.     }  
  36.  }  
  37.  return result.ToString();  
  38.  }  
Step 6: Add code for Index ActionResult method,
  1. public ActionResult Index()  
  2.      {  
  3.         if (Request["txt"] != null)  
  4.         {  
  5.            if (Request["txt"][Request["txt"].Length - 1] == '+' || Request["txt"][Request["txt"].Length - 1] == '-' ||                Request["txt"][Request["txt"].Length - 1] == '*' || Request["txt"][Request["txt"].Length - 1] == '/')  
  6.            {  
  7.               ViewBag.flag = 0;  
  8.               ViewBag.result = Request["txt"];  
  9.            }  
  10.            else  
  11.            {  
  12.               ViewBag.result = GetResult(Request["txt"]);  
  13.               ViewBag.flag = 1;  
  14.            }  
  15.         }  
  16.         return View();  
  17.      }  
Step 7: Right click on Index method to add a view.

Step 8: Select Razor view from view engine.

Step 9: Uncheck create strongly-typed view check box.->Click Add.

Step 10:  Add this code to design calculator on view,
  1. <script src="~/jquery-1.12.4.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(function()  
  4.     {  
  5.         $("#txt").keypress(function(e)  
  6.          {  
  7.             if (String.fromCharCode(e.keyCode).match(/[^0-9+-/*]/g)) return false;  
  8.         });  
  9.         $("#txt").height("40px").width("312px");  
  10.         $("#b0").click(function() {  
  11.             var x = document.getElementById("txt").value;  
  12.             if (x == "0")  
  13.             {  
  14.                 $("#txt").val("0");  
  15.             } else  
  16.             {  
  17.                 $("#txt").val(x + "0")  
  18.             }  
  19.         });  
  20.         $("#b1").click(function()  
  21.         {  
  22.             var x = document.getElementById("txt").value;  
  23.             if (x == "0")  
  24.             {  
  25.                 $("#txt").val("1");  
  26.             } else  
  27.             {  
  28.                 $("#txt").val(x + "1")  
  29.             }  
  30.         });  
  31.         $("#b2").click(function()  
  32.         {  
  33.             var x = document.getElementById("txt").value;  
  34.             if (x == "0")  
  35.             {  
  36.                 $("#txt").val("2");  
  37.             } else  
  38.             {  
  39.                 $("#txt").val(x + "2")  
  40.             }  
  41.         });  
  42.         $("#b3").click(function()  
  43.           {  
  44.             var x = document.getElementById("txt").value;  
  45.             if (x == "0")  
  46.             {  
  47.                 $("#txt").val("3");  
  48.             } else  
  49.             {  
  50.                 $("#txt").val(x + "3")  
  51.             }  
  52.         });  
  53.         $("#b4").click(function()  
  54.          {  
  55.             var x = document.getElementById("txt").value;  
  56.             if (x == "0")  
  57.             {  
  58.                 $("#txt").val("4");  
  59.             } else  
  60.             {  
  61.                 $("#txt").val(x + "4")  
  62.             }  
  63.         });  
  64.         $("#b5").click(function()  
  65.          {  
  66.             var x = document.getElementById("txt").value;  
  67.             if (x == "0")  
  68.             {  
  69.                 $("#txt").val("5");  
  70.             } else  
  71.             {  
  72.                 $("#txt").val(x + "5")  
  73.             }  
  74.         });  
  75.         $("#b6").click(function()  
  76.          {  
  77.             var x = document.getElementById("txt").value;  
  78.             if (x == "0")  
  79.             {  
  80.                 $("#txt").val("6");  
  81.             } else  
  82.             {  
  83.                 $("#txt").val(x + "6")  
  84.             }  
  85.         });  
  86.         $("#b7").click(function()  
  87.           {  
  88.             var x = document.getElementById("txt").value;  
  89.             if (x == "0")  
  90.               
  91.            {  
  92.                 $("#txt").val("7");  
  93.             } else  
  94.             {  
  95.                 $("#txt").val(x + "7")  
  96.             }  
  97.         });  
  98.         $("#b8").click(function()  
  99.           {  
  100.             var x = document.getElementById("txt").value;  
  101.             if (x == "0")  
  102.             {  
  103.                 $("#txt").val("8");  
  104.             } else  
  105.             {  
  106.                 $("#txt").val(x + "8")  
  107.             }  
  108.         });  
  109.         $("#b9").click(function()  
  110.          {  
  111.             var x = document.getElementById("txt").value;  
  112.             if (x == "0")  
  113.             {  
  114.                 $("#txt").val("9");  
  115.             } else  
  116.             {  
  117.                 $("#txt").val(x + "9")  
  118.             }  
  119.         });  
  120.         $("#div").click(function()  
  121.           {  
  122.             var x = document.getElementById("txt").value;  
  123.             var y = x.slice(-1)  
  124.             if (y == "/" || y == "+" || y == "*" || y == "-") {} else {  
  125.                 $("#txt").val(x + "/")  
  126.             }  
  127.         });  
  128.         $("#multy").click(function()  
  129.           {  
  130.             var x = document.getElementById("txt").value;  
  131.             var x = document.getElementById("txt").value;  
  132.             var y = x.slice(-1)  
  133.             if (y == "/" || y == "+" || y == "*" || y == "-") {} else {  
  134.                 $("#txt").val(x + "*")  
  135.             }  
  136.         });  
  137.         $("#sub").click(function()  
  138.           {  
  139.             var x = document.getElementById("txt").value;  
  140.             var x = document.getElementById("txt").value;  
  141.             var x = document.getElementById("txt").value;  
  142.             var y = x.slice(-1)  
  143.             if (y == "/" || y == "+" || y == "*" || y == "-") {} else {  
  144.                 $("#txt").val(x + "-")  
  145.             }  
  146.         });  
  147.         $("#add").click(function()  
  148.          {  
  149.             var x = document.getElementById("txt").value;  
  150.             var x = document.getElementById("txt").value;  
  151.             var x = document.getElementById("txt").value;  
  152.             var x = document.getElementById("txt").value;  
  153.             var y = x.slice(-1)  
  154.             if (y == "/" || y == "+" || y == "*" || y == "-") {} else {  
  155.                 $("#txt").val(x + "+")  
  156.             }  
  157.         });  
  158.         $("#dot").click(function()  
  159.           {  
  160.             var x = document.getElementById("txt").value;  
  161.             var y = x.slice(-1)  
  162.             if (y == ".") {} else  
  163.             {  
  164.                 $("#txt").val(x + ".")  
  165.             }  
  166.         });  
  167.         $("#ce").click(function()  
  168.         {  
  169.             var x = document.getElementById("txt").value;  
  170.             $("#txt").val(x.substring(0, x.length - 1))  
  171.         });  
  172.     });  
  173. </script>  
  174. <style>  
  175.     body   
  176.     {  
  177.         background-image: url("Image/images.jpg");  
  178.     }  
  179.      
  180.     #d1  
  181.     {  
  182.         border: 1px solid black;  
  183.         height: 340px;  
  184.         width: 340px;  
  185.     }  
  186. </style>  
  187. <br /><br /><br /><br /><br /><br /><br />  
  188. <center>  
  189.     <div id="d1">  
  190.         @using (@Html.BeginForm("Index""Home"))  
  191.         {  
  192.         <table style="height:25%;border:thick">  
  193.             <tr>  
  194.                 <td colspan="4">  
  195.                     <center>  
  196.                         <h2>My Calculator</h2></center>  
  197.                 </td>  
  198.             </tr>  
  199.             <tr>  
  200.                 <td colspan="4">@Html.TextBox("txt",(string)ViewBag.result)</td>  
  201.             </tr>  
  202.             <tr>  
  203.                 <td><input type="button" id="b7" value="7" style="height:40px;width:75px" /></td>  
  204.                 <td><input type="button" id="b8" value="8" style="height:40px;width:75px" /></td>  
  205.                 <td><input type="button" id="b9" value="9" style="height:40px;width:75px" /></td>  
  206.                 <td><input type="button" id="div" value="/" style="height:40px;width:75px" /></td>  
  207.             </tr>  
  208.             <tr>  
  209.                 <td><input type="button" id="b4" value="4" style="height:40px;width:75px" /></td>  
  210.                 <td><input type="button" id="b5" value="5" style="height:40px;width:75px" /></td>  
  211.                 <td><input type="button" id="b6" value="6" style="height:40px;width:75px" /></td>  
  212.                 <td><input type="button" id="multy" value="*" style="height:40px;width:75px" /></td>  
  213.             </tr>  
  214.             <tr>  
  215.                 <td><input type="button" id="b1" value="1" style="height:40px;width:75px" /></td>  
  216.                 <td><input type="button" id="b2" value="2" style="height:40px;width:75px" /></td>  
  217.                 <td><input type="button" id="b3" value="3" style="height:40px;width:75px" /></td>  
  218.                 <td><input type="button" id="sub" value="-" style="height:40px;width:75px" /></td>  
  219.             </tr>  
  220.             <tr>  
  221.                 <td><input type="button" id="b0" value="0" style="height:40px;width:75px" /></td>  
  222.                 <td><input type="button" id="dot" value="." style="height:40px;width:75px" /></td>  
  223.                 <td><input type="button" id="add" value="+" style="height:40px;width:75px" /></td>  
  224.                 <td><input type="submit" id="eq" value="=" style="height:40px;width:75px" /></td>  
  225.             </tr>  
  226.             <tr>  
  227.                 <td colspan="2">  
  228.                     <input type="button" id="ce" value="CE" style="height:40px;width:155px" />  
  229.                 </td>  
  230.                 <td colspan="2">  
  231.                     <input type="reset" id="re" value="Clear" style="height:40px;width:155px" />  
  232.                 </td>  
  233.             </tr>  
  234.             <tr>  
  235.                 <td colspan="4">  
  236.                     <center>  
  237.                         <h2>Result : @ViewBag.result</h2></center>  
  238.                 </td>  
  239.             </tr>  
  240.         </table>  
  241.         }  
  242.     </div>  
  243. </center>  
  244. @if (@ViewBag.flag == 0) { Response.Write("  
  245. <script>  
  246.     alert('Right value is missing.')  
  247. </script>");   
  248. }   
Step 11: Run application.