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.

public string GetResult(string str)
{
List<char> symbleList = new List<char>();
char[] charSymble = { '+', '-', '*', '/' };
string[] st = str.Split(charSymble);
for (int i = 0; i < str.Length; i++)
{
if (str[i] == '+' || str[i] == '-' || str[i] == '*' || str[i] == '/')
{
symbleList.Add(str[i]);
}
}
double result = Convert.ToDouble(st[0]);
for (int i = 1; i < st.Length; i++)
{
double num = Convert.ToDouble(st[i]);
int j = i - 1;
switch (symbleList[j])
{
case '+':
result = result + num;
break;
case '-':
result = result - num;
break;
case '*':
result = result * num;
break;
case '/':
result = result / num;
break;
default:
result=0.0;
break;
}
}
return result.ToString();
}

Step 6: Add code for Index ActionResult method,

public ActionResult Index()
{
if (Request["txt"] != null)
{
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] == '/')
{
ViewBag.flag = 0;
ViewBag.result = Request["txt"];
}
else
{
ViewBag.result = GetResult(Request["txt"]);
ViewBag.flag = 1;
}
}
return View();
}

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,

<script src="~/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#txt").keypress(function(e)
{
if (String.fromCharCode(e.keyCode).match(/[^0-9+-/*]/g)) return false;
});
$("#txt").height("40px").width("312px");
$("#b0").click(function() {
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("0");
} else
{
$("#txt").val(x + "0")
}
});
$("#b1").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("1");
} else
{
$("#txt").val(x + "1")
}
});
$("#b2").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("2");
} else
{
$("#txt").val(x + "2")
}
});
$("#b3").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("3");
} else
{
$("#txt").val(x + "3")
}
});
$("#b4").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("4");
} else
{
$("#txt").val(x + "4")
}
});
$("#b5").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("5");
} else
{
$("#txt").val(x + "5")
}
});
$("#b6").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("6");
} else
{
$("#txt").val(x + "6")
}
});
$("#b7").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("7");
} else
{
$("#txt").val(x + "7")
}
});
$("#b8").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("8");
} else
{
$("#txt").val(x + "8")
}
});
$("#b9").click(function()
{
var x = document.getElementById("txt").value;
if (x == "0")
{
$("#txt").val("9");
} else
{
$("#txt").val(x + "9")
}
});
$("#div").click(function()
{
var x = document.getElementById("txt").value;
var y = x.slice(-1)
if (y == "/" || y == "+" || y == "*" || y == "-") {} else {
$("#txt").val(x + "/")
}
});
$("#multy").click(function()
{
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var y = x.slice(-1)
if (y == "/" || y == "+" || y == "*" || y == "-") {} else {
$("#txt").val(x + "*")
}
});
$("#sub").click(function()
{
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var y = x.slice(-1)
if (y == "/" || y == "+" || y == "*" || y == "-") {} else {
$("#txt").val(x + "-")
}
});
$("#add").click(function()
{
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var x = document.getElementById("txt").value;
var y = x.slice(-1)
if (y == "/" || y == "+" || y == "*" || y == "-") {} else {
$("#txt").val(x + "+")
}
});
$("#dot").click(function()
{
var x = document.getElementById("txt").value;
var y = x.slice(-1)
if (y == ".") {} else
{
$("#txt").val(x + ".")
}
});
$("#ce").click(function()
{
var x = document.getElementById("txt").value;
$("#txt").val(x.substring(0, x.length - 1))
});
});
</script>
<style>
body
{
background-image: url("Image/images.jpg");
}
#d1
{
border: 1px solid black;
height: 340px;
width: 340px;
}
</style>
<br /><br /><br /><br /><br /><br /><br />
<center>
<div id="d1">
@using (@Html.BeginForm("Index", "Home"))
{
<table style="height:25%;border:thick">
<tr>
<td colspan="4">
<center>
<h2>My Calculator</h2></center>
</td>
</tr>
<tr>
<td colspan="4">@Html.TextBox("txt",(string)ViewBag.result)</td>
</tr>
<tr>
<td><input type="button" id="b7" value="7" style="height:40px;width:75px" /></td>
<td><input type="button" id="b8" value="8" style="height:40px;width:75px" /></td>
<td><input type="button" id="b9" value="9" style="height:40px;width:75px" /></td>
<td><input type="button" id="div" value="/" style="height:40px;width:75px" /></td>
</tr>
<tr>
<td><input type="button" id="b4" value="4" style="height:40px;width:75px" /></td>
<td><input type="button" id="b5" value="5" style="height:40px;width:75px" /></td>
<td><input type="button" id="b6" value="6" style="height:40px;width:75px" /></td>
<td><input type="button" id="multy" value="*" style="height:40px;width:75px" /></td>
</tr>
<tr>
<td><input type="button" id="b1" value="1" style="height:40px;width:75px" /></td>
<td><input type="button" id="b2" value="2" style="height:40px;width:75px" /></td>
<td><input type="button" id="b3" value="3" style="height:40px;width:75px" /></td>
<td><input type="button" id="sub" value="-" style="height:40px;width:75px" /></td>
</tr>
<tr>
<td><input type="button" id="b0" value="0" style="height:40px;width:75px" /></td>
<td><input type="button" id="dot" value="." style="height:40px;width:75px" /></td>
<td><input type="button" id="add" value="+" style="height:40px;width:75px" /></td>
<td><input type="submit" id="eq" value="=" style="height:40px;width:75px" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="ce" value="CE" style="height:40px;width:155px" />
</td>
<td colspan="2">
<input type="reset" id="re" value="Clear" style="height:40px;width:155px" />
</td>
</tr>
<tr>
<td colspan="4">
<center>
<h2>Result : @ViewBag.result</h2></center>
</td>
</tr>
</table>
}
</div>
</center>
@if (@ViewBag.flag == 0) { Response.Write("
<script>
alert('Right value is missing.')
</script>");
}

Step 11: Run application.