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

Question

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

Fields - image here

字段单位成本按个案成本/个案大小计算。我可以通过以下代码完美运行

大小写文本框

 @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;
    }

再次提及，此代码按预期工作，当我更改 casesiez 和 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 与两个函数冲突

MVC Calculated Fields Html.TextBoxFor Javascript conflict with two functions

javascript

asp.net-mvc

jquery

calculated-field