MVC C# 在不转到控制器的情况下重新计算用户输入

Question

我希望能够让用户输入美元金额（或任何数字），然后“即时”显示基于该数字的计算结果，而无需返回到控制器（随着输入的变化更新总数） .

这是一个简单的例子：

模特：

using System;

namespace SandboxJScalc.Models
{
    public class CommonInfo
    {
        public decimal Amount1 { get; set; }
        public decimal Amount2 { get; set; }
        public decimal TotalAmount { get; set; }
    }
}

观点：

@model SandboxJScalc.Models.CommonInfo
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <link href="~/css/site.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width" />
    <title>Sandbox JS Calc</title>
</head>

<body>
    <h1 style="text-align: center">Sandbox JS Calc</h1>
    <br />
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table align="center">
            <tr>
                <td>Amount 1 :</td>
                <td>
                    @Html.TextBoxFor(m => m.Amount1,
                         new { @class = "{number: true}  small-input", onblur = "recalc()" })
                </td>
            </tr>
            <tr>
                <td>Amount 2 :</td>
                <td>
                    @Html.TextBoxFor(m => m.Amount2,
                         new { @class = "{number: true}  small-input", onblur = "recalc()" })
                </td>
            </tr>
            <tr>
                <td>Total Amount :</td>
                <td>@Html.TextBoxFor(m => m.TotalAmount, new { @readonly = "readonly" })</td>
            </tr>
        </table>
    }
</body>
</html>

<script language="javascript">
       function recalc()
       {
           m.TotalAmount = m.Amount1 + m.Amount2;
       }
</script>

如何让它调用“recalc”并在用户每次更改 Amount1 或 Amount2 时显示更新后的总数？

Answer 1

您可以使用其他 jquery 事件，例如 mouseout 事件并获取计算值。然后将 post 您的表单放回控制器。另一种方法是在 mvc 中使用 Ajax helper 来调用方法

@Ajax.ActionLink("Sample Call", "Home", "Home", new AjaxOptions  
{  
   UpdateTargetId = "divmain",  
   OnBegin = "fnOnBegin",  
   InsertionMode = InsertionMode.Replace,  
   HttpMethod = "GET",  
   LoadingElementId = "imgloader",  
   OnSuccess= "fnSuccess",  
   Confirm="Do you want to get all data ?????"  
}
, new { @class = "btn btn-default" })

MVC C# 在不转到控制器的情况下重新计算用户输入

MVC C# Recalculate user inputs without going to the controller

javascript

model-view-controller