我正在使用 asp.net mvc 和 ajax 創建一個簡單的計算器，這是代碼。
public ActionResult Index()
{
return View(new Calculator_Model());
}
[HttpPost]
public ActionResult Index(Calculator_Model cal,string calculate)
{
if (calculate == "add")
{
cal.Total = cal.Number1 cal.Number2;
}
else if (calculate == "sub")
{
cal.Total = cal.Number1 - cal.Number2;
}
else if (calculate == "multi")
{
cal.Total = cal.Number1 * cal.Number2;
}
else if (calculate == "divis")
{
cal.Total = cal.Number1 / cal.Number2;
}
return Json(cal);
}
模型頁面是
public class Calculator_Model
{
public int Number1 { get;set; }
public int Number2 { get;set; }
public int Total { get;set; }
}
并且查看頁面是
@model Calculator.Models.Calculator_Model
@{
ViewBag.Title = "Index";
}
@using (Ajax.BeginForm("index", "Calculator",
new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "Total",
}
))
{
<input type="number" name="Number1" value="@Model.Number1" />
<input type="number" name="Number2" value="@Model.Number2" />
<div>
<input type="number" name="Total" value="@Model.Total" disabled />
<div id="Total">
</div>
</div>
<button type="submit" name="calculate" value="add"> </button>
<button type="submit" name="calculate" value="sub">-</button>
<button type="submit" name="calculate" value="multi">*</button>
<button type="submit" name="calculate" value="divis">/</button>
}
邏輯作業正常，但我希望計算器的結果顯示在禁用的輸入標簽中。
任何人在這里幫助我。
我期待結果會出現在禁用輸入框中。
uj5u.com熱心網友回復：
我期待結果會出現在禁用輸入框中。
好吧，如果您希望在中顯示結果，Total inputbox您disable mood可以簡單地按照以下方式進行：
控制器：
public class CalculatorController : Controller
{
public ActionResult Index()
{
return View(new Calculator_Model());
}
[HttpPost]
public ActionResult Index(Calculator_Model cal, string calculate)
{
if (calculate == "add")
{
cal.Total = cal.Number1 cal.Number2;
}
else if (calculate == "sub")
{
cal.Total = cal.Number1 - cal.Number2;
}
else if (calculate == "multi")
{
cal.Total = cal.Number1 * cal.Number2;
}
else if (calculate == "divis")
{
cal.Total = cal.Number1 / cal.Number2;
}
return View("Index",cal);
}
}
注意：您可以使用asJson(cal);回傳index操作，而不是回傳latest model statereturn View("Index",cal);
看法：
@model DotNet6MVCWebApp.Controllers.Calculator_Model
@{
ViewBag.Title = "Index";
}
<form asp-controller="Calculator" method="post" asp-action="Index">
<div class="row">
<div class="form-group">
<label asp-for="Number1" class="control-label"></label>
<input asp-for="Number1" class="form-control" placeholder="Enter first number" />
<span asp-validation-for="Number1" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Number2" class="control-label"></label>
<input asp-for="Number2" class="form-control" placeholder="Enter second number" />
<span asp-validation-for="Number2" class="text-danger" ></span>
</div>
<div class="form-group">
<label asp-for="Total" class="control-label"></label>
<input asp-for="Total" class="form-control" value="@Model.Total" disabled />
<span asp-validation-for="Number2" class="text-danger"></span>
</div>
<div class="form-group" style="margin-top:5px">
<button type="submit" name="calculate" class="btn btn-primary" value="add"><strong> </strong></button>
<button type="submit" name="calculate" class="btn btn-info" value="sub"><strong>-</strong></button>
<button type="submit" name="calculate" class="btn btn-success" value="multi"><strong>*</strong></button>
<button type="submit" name="calculate" class="btn btn-warning" value="divis"><strong>/</strong></button>
</div>
</div>
</form>
純 Ajax Javascript 示例：
<div>
<input id="Number1" class="form-control" placeholder="Enter first number" />
<input id="Number2" class="form-control" placeholder="Enter second number" />
<input id="Total" class="form-control" value="" disabled />
<button type="submit" name="calculate" class="btn btn-primary" value="add"><strong> </strong></button>
<button type="submit" name="calculate" class="btn btn-info" value="sub"><strong>-</strong></button>
<button type="submit" name="calculate" class="btn btn-success" value="multi"><strong>*</strong></button>
<button type="submit" name="calculate" class="btn btn-warning" value="divis"><strong>/</strong></button>
</div>
@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var operation = $(this).val();
var data = {
Number1: $("#Number1").val(),
Number2: $("#Number2").val(),
}
console.log(data);
$.ajax({
type: "POST",
url: 'http://localhost:5094/Calculator/Post?calculate=' operation,
datatype: "json",
data: data,
success: function (res) {
console.log(res);
$("#Number1").val(res.number1);
$("#Number2").val(res.number2);
$("#Total").val(res.total);
},
error: function () {
alert("It failed");
}
});
return false;
});
});
</script>
}
注意：好吧，根據您的評論，這里是一個干凈的ajax例子。如果您使用此模式而不是將控制器值回傳為returnJson(cal);`
輸出：
這是您嘗試實施的更簡潔的方式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/534576.html
標籤：C＃网站asp.net-核心asp.net-核心-mvc
下一篇：通過下拉選擇過濾表