NumericTextBox - ユーザーが数値を入力するときにJS計算を実行します。それはできますか？

Question

単価の入力が可能な数値のテキストボックスがあります。ユーザーが数字を上げると、単価と数量が乗算されて拡張価格が作成されます。

私が必要とするのは、ユーザーが計算を実行するために値を入力した場合、または入力するときです。今すぐunitPriceを入力すると、ページ上の他のタブをタブまたはクリックするまで、extendedPriceは計算されません。

これを行う方法はありますか？

私はかなりC＃の新人ですが、長い時間の開発者です。助けてくれてありがとう。

<div class="form-group"> 
     <div class="col-md-2"> 
     @Html.LabelFor(model => model.UnitPrice, new { style =    "width: 30px;" }); 

     </div> 
     <div> 
      <div class="col-md-8"> 

      @(Html.Kendo().NumericTextBox<int>() 
      .Name("unitprice") 
      .Events(e => e 
      .Change("calculateExtendedPrice") 
      .Spin("calculateExtendedPrice")) 
      .Decimals(2) 
      .Format("c") 
      .Min(0) 
      .Max(10000) 
      .Value(0) 
      .HtmlAttributes(new { style = "width: 20%" }) 
       ) 

      @Html.Label("Extended Price", new { style = "width: 100px;" }) 
      <label id="extendedPrice" ></label> 
     </div> 
     </div> 
    </div> 

スクリプト：

function calculateExtendedPrice() { 


    var unitPriceControl = $("#unitprice").data("kendoNumericTextBox"); 
    var unitPrice = unitPriceControl.value(); 
    var quantityControl = $("#quantity").data("kendoNumericTextBox"); 
    var quantity = quantityControl.value(); 
    //alert(unitPrice); 

    if (quantity == null || unitPrice == null) { 
     return; 
    } 

    var extendedPriceCalc = quantity * unitPrice; 
    $("#extendedPrice").text(extendedPriceCalc); 


} 

Answer 1

私は剣道UIがその機能を持っているとは思わないが、あなたはjQueryのでkeyupイベントハンドラでそれを行うことができます：

$('#unitprice').keyup(function() { 
    calculateExtendedPrice(); 
});