c# - Asp.Net Core MVC 计算器
问题描述
我在 Asp.Net Core Mvc 上制作计算器并遇到问题。我有CalcModel
和CalcController
。还有IndexCalculator
观点。
public class CalcModel
{
public decimal FirstNumber { get; set; }
public decimal SecondNumber { get; set; }
public decimal Result { get; set; }
public CalculationMethod calculationMethod { get; set; }
public enum CalculationMethod
{
[Display(Name = "+")]
Addition,
[Display(Name = "-")]
Subtraction,
[Display(Name = "*")]
Multiplication,
[Display(Name = "/")]
Division
}
}
我的控制器
[HttpPost]
public async Task<IActionResult> IndexCalculator(CalcModel model)
{
ModelState.Clear();
switch (model.calculationMethod)
{
case CalculationMethod.Addition:
model.Result = model.FirstNumber + model.SecondNumber;
break;
case CalculationMethod.Subtraction:
model.Result = model.FirstNumber - model.SecondNumber;
break;
case CalculationMethod.Multiplication:
model.Result = model.FirstNumber * model.SecondNumber;
break;
case CalculationMethod.Division:
model.Result = model.FirstNumber / model.SecondNumber;
break;
}
return View(model);
}
还有一个我的wiev:
@using (Html.BeginForm("IndexCalculator", "Calc", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.LabelFor(m => m.FirstNumber) @Html.TextBoxFor(x => x.FirstNumber)<br />
@Html.LabelFor(m => m.SecondNumber) @Html.TextBoxFor(x => x.SecondNumber)<br />
@Html.LabelFor(m => m.Result) @Html.TextBoxFor(x => x.Result)<br />
@Html.DropDownListFor(m => m.calculationMethod, (Html.GetEnumSelectList<CalcModel.CalculationMethod>()))
<input type="submit" />
请告诉我如何制作带有数字的键盘,这样您就不必手动输入了。现在我有三个labelFor
并DropDownListFor
选择方法。
解决方案
我想做一个类似windows的计算器
您可以使用 Bootstrap 显示数字键盘和计算图标,然后使用JavaScript eval() 函数来计算结果。
示例代码如下(参考此链接):
<div class='container'>
<div class='row'>
<form class='form-group-lg form-inline' onsubmit='return false'>
<input type='text' id='calcinput' class='focusedInput form-control'>
<button type='submit' class='btn btn-warning btn-lg'>Clear</button>
</form>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-1 col-xs-offset-4'>
<button class='btn btn-lg btn-primary' type='button'>7</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>8</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>9</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>+</button>
</div>
</div> <!--row-->
<div class='row'>
<div class='col-xs-1 col-xs-offset-4'>
<button class='btn btn-lg btn-primary' type='button'>4</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>5</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>6</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button' id='small'>-</button>
</div>
</div> <!--row-->
<div class='row'>
<div class='col-xs-1 col-xs-offset-4'>
<button class='btn btn-lg btn-primary' type='button'>1</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>2</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button'>3</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button' id='small'>*</button>
</div>
</div> <!--row-->
<div class='row'>
<!--row-->
<div class='col-xs-1 col-xs-offset-4'>
<button class='btn btn-lg btn-primary' type='button'>0</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button' id='small'>.</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='submit' id='submit'>=</button>
</div>
<div class='col-xs-1'>
<button class='btn btn-lg btn-primary' type='button' id='small'>/</button>
</div>
</div>
</div>
在上述视图页面的最后,添加以下脚本:
@section Scripts{
<script>
$(document).ready(function () {
$('.col-xs-1').click(function () {
if ($(this).text().trim() !== '=') {
var text = $(this).text().toString()
$('input:text').val(function (i, val) {
return val + text.trim();
});
}
})
$('.btn-warning').click(function () {
$('input:text').val('');
})
$('#submit').click(function () {
var expr = $('input').val();
var res = eval(expr);
$('input:text').val(res);
})
});
</script>
}
样式文件如下:
<style>
.focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}
body {
background-color: gainsboro;
}
.form-inline {
text-align: center;
}
.col-xs-1 {
margin-right: 8px;
margin-top: 44px;
}
#small {
margin-left: 2px;
}
h1 {
font-size: 56px;
margin-bottom: 20px;
}
.btn {
font-family: Georgia;
font-size: 22px
}
input {
text-align: right;
}
</style>
然后,结果如下:
之后,如果要将计算结果保存到数据库中,可以使用 JQuery 查找文本框的值,然后使用 Ajax 方法调用 action 方法。您可以参考以下链接:
推荐阅读
- matlab - 为什么用空单元构建 MATLAB 结构对象会创建一个空结构?
- primeng - 带有 filterMatchMode 的 PrimeNG 下拉菜单
- java - 增量稀疏矩阵
- robotframework - 在机器人框架中设置页面加载超时
- ios - 检测 iphone 是刘海屏还是普通矩形屏以避免导航栏大小问题?
- java - 贪心算法 - 没主意
- ruby-on-rails - 在 Rails 模型范围内强制执行特定顺序
- javascript - 在 Angular 中动态传递接口作为参数
- python - 直接从 SFTP 服务器将音频文件加载到 Python 的语音识别模块(使用 Paramiko SFTPClient)
- css - 不会在 IE 上执行的 CSS