Question

很抱歉，如果我的问题太基础了，我只是mvc的新手，没有javascript中的经验。

1-我试图在我的视图中添加计算字段但没有成功我有以下课程

public class TaxCalculation
{
  [Required]
  [DisplayName("Init")]
  [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]
  public double InitVlaue { get; set; }

  [Required]
  [DisplayName("Reg")]
  [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]
  public double RegValue { get; set; }

  [DisplayName("Enga")]
  [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]
  public double InitEnga
  {
    get { return CommonComputation.CalcuEnga(InitVlaue, RegValue); }
  }
}

CommonComputation.CalcuEnga 功能：

public static double CalcuEnga(double InitVlaue, double RegValue)
    {
        double V_Et = (0.02 * 0.225 - 1) * Math.Log(0.225 / (100 - 0.225));
        double V_En = (0.02 * 0.711 - 1) * Math.Log(0.711 / (100 - 0.711));
        double mk = Math.Round(RegValue / InitVlaue * 100, 3);
        double V_Ep = (0.02 * InitVlaue - 1) * Math.Log(InitVlaue / (100 - InitVlaue));
        double F = Math.Round((InitVlaue - 0.225) / (0.711 - 0.225), 5);
        double S = Math.Round(((V_Ep) + (F - 1) * V_Et - F * V_En), 5);
        double ceq = Math.Round(F + 1.53 * S, 5);
        return Math.Round(mk * ceq, 3);
    }

我的观点是

 <div class="editor-label">
        @Html.LabelFor(model => model.InitVlaue)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.InitVlaue,new {style="width:50px;"})
        @Html.ValidationMessageFor(model => model.InitVlaue)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.RegValue)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.RegValue,new {style="width:50px;"})
        @Html.ValidationMessageFor(model => model.RegValue)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.InitEnga)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(x=> x.InitEnga,new {name="initEngaTextBox",style="width:50px;",@readonly="readonly"})
        @Html.ValidationMessageFor(model => model.InitEnga)
    </div>

当用户输入前两个字段中的任何一个（InitVlaue或RegValue）时提交的InitEnga已更新我试图直接添加字段或调用执行计算的函数但没有成功。我搜索并使用ajax，Knockout等等找到了1000个答案我根本没有使用javascript的经验。有没有一种简单的方法可以解决这个问题？

2-在所有文本框中虽然我指定了格式[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]，我仍然看到值0，任何想法有什么问题？

非常感谢

Answer 1

为了响应客户端事件，您需要使用javascript / jquery。在您的情况下，通过处理文本框的.change()事件。首先为您的2个可编辑文本框提供一个类名

@Html.TextBoxFor(m => m.InitVlaue, "{0:#.#}", new { @class="calc" })
@Html.TextBoxFor(m => m.RegValue, "{0:#.#}", new { @class="calc" })

注意第二个参数是格式字符串（DisplayFormatAttribute仅受EditorFor()和DisplayFor()方法的尊重，因此除非您在其他地方使用这些方法，否则可以删除它们，并且您可以现在使用css来设置宽度样式 - .calc { width: 50px; }

您可以使用javascript在客户端上进行计算，但由于它很复杂，这意味着要在服务器和客户端上维护它，所以我建议您使用ajax来调用执行的服务器方法计算并返回值。

将jquery-{version}.js添加到您的视图（或布局）并添加以下脚本

<script>
    var url = '@Url.Action("Calculate", "yourControllerName")';
    $('.calc').change(function() {
        // get the values of the textboxes
        var init = $('#InitVlaue').val();
        var reg = $('#RegValue').val();
        // Check they are valid
        if (init == '' || reg == '' || isNaN(init) || isNaN(reg)) {
            return;
        }
        $.post(url, { initVlaue: init, regValue: reg }, function(response) {
            $('#InitEnga').val(response);
        }); 
    });
</script>

并添加以下控制器方法

[HttpPost]
public JsonResult Calculate(double initVlaue, double regValue)
{
    var result = CommonComputation.CalcuEnga(initVlaue, regValue);
    return Json(result.ToString("#.#"));
}

要详细了解jQuery，请参阅documentation

MVC计算字段和字段格式

1 个答案: