Dynamically updating html based on viewmodel - forms

Question

I'm currently trying to update some HTML based on two properties in my viewmodel which are hooked to two form groups. This is ASP.NET Core.
The two form groups:
<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>
The properties in the viewmodel:
public int ParticipantAmount { get; set; }
public int GroupAmount { get; set; }
The javascript method in the script section:
function Group() {
var groups = Number('#Model.GroupAmount');
var participants = Number('#Model.ParticipantAmount');
var size = participants / groups;
document.getElementById('GroupSize').innerHTML = size;
}
When I try to log stuff to the console, it seems like the properties are not being updated in the viewmodel when the form inputs change.
I think I'm missing some basic knowledge about an important aspect of what I'm trying to do, but I can't seem to google the correct keywords. Hope you can lead me in the right direction.

Answer 1

Just to illustrate how AJAX calls work I made a minimalistic web application using jQuery which should be used for learning only, the code is not production-ready.
Razor view. I've added default values and IDs to your the input fields to identify them easier in JavaScript code.
<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>
JavaScript code using jQuery to get/update values and make AJAX request.
<script>
function Group() {
$.ajax({
method: "POST",
url: "/Home/UpdateAmounts",
data: { ParticipantAmount: $('#ParticipantAmount').val(), GroupAmount: $('#GroupAmount').val() }
}).done(function (response) {
$('#GroupSize').html(response);
});
}
</script>
Controller and view model. Added a method for AJAX calls.
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; }
}
To make things nicer and more modern you could look into following example of a simple web application using database to store data, and using Knockout for UI.