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, когда пользователь вводит любое из первых двух полей (InitVlaue или RegValue) заполнено InitEnga обновлено Я попытался добавить поле напрямую или вызвать функцию, которая делает расчет без каких-либо успехов. Я искал и нашел 1000 ответов, используя такие вещи, как ajax, Knockout ... и т. Д. У меня нет опыта с javascript вообще. Есть ли простой способ решить эту проблему?

2- во всем текстовом поле, хотя я указал формат [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")], я все еще вижу значение 0, любая идея, что не так?

Большое спасибо

Answer 1

Для того, чтобы ответить на стороне клиента событий, которые вы должны использовать JavaScript/JQuery. В вашем случае, обращаясь к событию .change() в текстовые поля. Начните, давая ваше 2 редактируемого Textboxes имени класса

@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