MVC计算字段和字段格式

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> 

Iwant当用户键入任何前2个字段（InitVlaue或RegValue） 提交的InitEnga得到更新 我试图直接添加该字段或调用执行计算没有成功的函数。 我搜索并找到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