viewmodelに基づいて動的にHTMLを更新します

Question

私は現在、2つのフォームグループにフックされたviewmodelの2つのプロパティに基づいていくつかのHTMLを更新しようとしています。これはASP.NETコアです。

2つのフォームグループ：のviewmodelで

<div class="form-group"> 
    <label asp-for="ParticipantAmount">Antal deltagere</label> 
    <input asp-for="ParticipantAmount" onchange="Group()" class="form-control" type="number" max="1000" min="1" /> 
</div> 
<div class="form-group"> 
    <label asp-for="GroupAmount">Antal grupper</label> 
    <input asp-for="GroupAmount" class="form-control" onchange="Group()" type="number" max="20" min="1" /> 
    <p id="GroupSize">0</p> 
</div> 

プロパティ：

public int ParticipantAmount { get; set; } 
public int GroupAmount { get; set; } 

スクリプトセクションではjavascriptの方法：

function Group() { 
    var groups = Number('@Model.GroupAmount'); 
    var participants = Number('@Model.ParticipantAmount'); 
    var size = participants/groups; 
    document.getElementById('GroupSize').innerHTML = size; 
} 

私はものをログに記録しようとすると、コンソールには、フォーム入力が変更されたときにプロパティがビューモデル内で更新されていないようです。

私は何をしようとしているのかについての基本的な知識が不足していると思っていますが、正しいキーワードをGoogleに渡すことはできません。あなたが正しい方向に私を導くことを望みます。

Answer 1

AJAXの呼び出し方法を説明するだけです。jQueryを使用して最小限のWebアプリケーションを作成しましたが、これは学習にのみ使用する必要があります。コードは実稼動準備ができていません。

剃刀の眺め。入力フィールドにデフォルト値とIDを追加して、JavaScriptコードを簡単に識別できるようにしました。

<div class="form-group"> 
    <label asp-for="ParticipantAmount">Antal deltagere</label> 
    <input asp-for="ParticipantAmount" onchange="Group()" class="form-control" type="number" max="1000" min="1" value="@Model.ParticipantAmount" id="ParticipantAmount" /> 
</div> 
<div class="form-group"> 
    <label asp-for="GroupAmount">Antal grupper</label> 
    <input asp-for="GroupAmount" class="form-control" onchange="Group()" type="number" max="20" min="1" value="@Model.GroupAmount" id="GroupAmount" /> 
    <p id="GroupSize">0</p>`enter code here` 
</div> 

jQueryを使用して値を取得/更新し、AJAXリクエストを行うJavaScriptコードです。

<script> 
function Group() { 
    $.ajax({ 
     method: "POST", 
     url: "/Home/UpdateAmounts", 
     data: { ParticipantAmount: $('#ParticipantAmount').val(), GroupAmount: $('#GroupAmount').val() } 
    }).done(function (response) { 
     $('#GroupSize').html(response); 
    }); 
} 
</script> 

コントローラとビューモデル。 AJAXコールのメソッドを追加しました。

public class HomeController : Controller 
{ 
    public IActionResult Index() 
    { 
     return View(new ParticipantViewModel()); 
    } 

    // You can call this method via AJAX to update your view model 
    [HttpPost] 
    public IActionResult UpdateAmounts(int participantAmount, int groupAmount) 
    { 
     // Validation for negative numbers, and groupAmount cannot be zero 
     if (participantAmount < 0 || groupAmount <= 0) 
     { 
      return Ok(0); 
     } 

     return Ok(participantAmount/groupAmount); 
    } 
} 

public class ParticipantViewModel 
{ 
    public int ParticipantAmount { get; set; } 

    public int GroupAmount { get; set; } 
} 

あなたはUIのためのデータを格納するデータベースを使用して、ノックアウトを使用して簡単なWebアプリケーションのfollowing exampleに見ることができる物事がよりよい、より現代的にします。