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