Razor pages - updating label when the input changes - asp.net

Question

I want to display a label that shows an item's price, getting that price from the input box(and potentially calculating a new price based on another inputs such as checkbox). I want as soon as the user changes that value in the input, the controller to calculate everything with the new values.
How can I do that?
Thanks in advance!

Answer 1

You can use the keyup event to achieve this requirement. Below are examples of mvc and razor-pages.
Mvc
Home controller:
public IActionResult Test()
{
return View();
}
[HttpPost]
public IActionResult Test(int data)
{
//you can do your logic here
data++;
return new JsonResult(new { result = data });
}
Test View:
<input id="input" type="number" />
<div id="other"></div>
#section Scripts
{
<script>
$("#input").keyup(function () {
var data = $("#input").val();
$.ajax({
type: "POST",
url: "/home/test",
data: { "data": data },
dataType: "json",
success: function (response) {
$('#other').html(response.result);
}
});
});
</script>
}
Razor pages
In your startup,add
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
PageModel:
public class TestModel : PageModel
{
public void OnGet()
{
}
public IActionResult OnPostInput(int data)
{
data++;
return new JsonResult (new { result=data});
}
}
Page
<input id="input" type="number" />
<div id="other"></div>
#section Scripts
{
<script>
$("#input").keyup(function () {
var data = $("#input").val();
$.ajax({
type: "POST",
url: "?handler=input",
data: { "data": data },
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
dataType: "json",
success: function (response) {
$('#other').html(response.result);
}
});
});
</script>
}
Test result: