Question

我的表单/网页上有以下字段，其中包含一些我希望在用户输入时计算的字段。（见图）

字段单位成本按案例成本/案例大小计算。我使用以下代码完美地运行

个案大小的文本框

 @Html.TextBoxFor(model => model.q_supplierproduct.q_casesize, "{0:#.#}", new { @class = "calc" })

案例成本文本框

 @Html.TextBoxFor(model => model.q_supplierproduct.q_casecost, "{0:#.#}", new { @class="calc"})

单位成本文本框

 @Html.TextBoxFor(model=> model.q_unitcost, "{0:#.#}", new { @class = "calc" })

功能

@* Calculate Unitcost value  *@
<script>
    var url = '@Url.Action("CalculateUnitCost", "CalculateValues")';
    $('.calc').change(function () {
        //get the values of the texboxes
        var casecost = $('#q_supplierproduct_q_casecost').val();
        var casesize = $('#q_supplierproduct_q_casesize').val();
        //check if field entries are valid
        if (casecost == '' || casesize == '' || isNaN(casecost) || isNaN(casesize)) { return; }

        $.post(url, { Q_casecost: casecost, Q_casesize: casesize }, function (response) {
            $('#q_unitcost').val(response);
        });              
    });
</script>

控制器

public class CalculateValuesController : Controller
{
    [HttpPost]
    public JsonResult CalculateUnitCost(double Q_casecost, double Q_casesize)
    {
        var result = Computation.GetUnitCost(Q_casecost, Q_casesize);
        return Json(result.ToString("#.#"));
    }

方法

public class Computation
{
    public static double GetUnitCost(double Q_casecost, double Q_casesize)
    {
        double unitcostresult = Q_casecost / Q_casesize;
        return unitcostresult;
    }

再次提一下，此代码按预期工作，当我更改caseiez和casecost中的值时，unitcost字段会相应更新。我想要实现的下一步是根据在价格字段中输入的值减去单位成本字段（先前计算的字段）来计算利润字段。我继续为该字段添加第二个脚本以及控制器和方法中的相应计算

See two scripts image

<script>
    var url = '@Url.Action("CalculateProfit", "CalculateValues")';
    $('.calc').change(function () {
        //get the values of the texboxes
        var sellprice = $('#q_sellprice').val();
        var unitcost = $('#q_unitcost').val();
        //check if field entries are valid
        if (sellprice == '' || unitcost == '' || isNaN(sellprice) || isNaN(unitcost)) { return; }

        $.post(url, { Q_sellprice: sellprice, Q_unitcost: unitcost }, function (response) {
            $('#q_profit').val(response);
        });
    });

从这一点开始，添加此单位成本字段将停止工作（输入数据时不会更新），但如果我在单位成本和价格字段中键入值，则利润字段将相应地计算。（新脚本会阻止第一个按预期工作）。我在这里错过了什么？是否因为两个脚本中的公共单位成本字段导致了问题？我该如何解决？

Answer 1

阅读Stephen和Tetsuya的评论后，我将代码更改为以下内容，这解决了我的问题。现在根据各自更改的字段更新两个字段unitcost和profit。我不在这里调用任何动作方法，而是按照建议在javascript中进行所有计算。

<script>
    function calculate()
    {
        //Fields that are used for calculations
        var casecost = parseFloat($('#q_supplierproduct_q_casecost').val());
        var casesize = parseFloat($('#q_supplierproduct_q_casesize').val()); 
        var price = parseFloat($('#q_sellprice').val());

        //Calculations
        var unitcost = casecost / casesize; // get unitcost from casecost FIELD and casesize FIELD
        var profit = price - unitcost; // get profit from price FIELD and unicost CALCULATED value

        //set results to the updating fields
        $('#q_unitcost').val(unitcost.toFixed(2));
        $('#q_profit').val(profit.toFixed(2));
    }

    $(document).ready(function () {
        //calculate();
        //calculate everytime these following fields change
        $('#q_supplierproduct_q_casecost').change(calculate);
        $('#q_supplierproduct_q_casesize').change(calculate); 
        $('#q_sellprice').change(calculate);
        $(unitcost).change(calculate);
    });
</script>

希望这可以帮助其他人。

MVC计算字段Html.TextBoxFor Javascript与两个函数冲突

1 个答案: