Razor 页面 - 在输入更改时更新标签

Question

我想显示一个显示商品价格的标签，从输入框中获取该价格（并可能根据复选框等其他输入计算新价格）。我希望一旦用户更改输入中的值，控制器就会使用新值计算所有内容。我怎样才能做到这一点？提前致谢！

Answer 1

您可以使用keyup事件来实现这个要求。以下是 mvc 和 razor-pages.

的示例

Mvc

家庭控制器：

  public IActionResult Test()
    {
        return View();
    }
    [HttpPost]
    public IActionResult Test(int data)
    {
        //you can do your logic here
        data++;
        return new JsonResult(new { result = data });
    }

测试视图：

<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>
}

剃须刀页面

在你的startup中，添加

 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});
    }
}

页数

<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>
}

测试结果：

Razor 页面 - 在输入更改时更新标签

Razor pages - updating label when the input changes

asp.net

model-view-controller

asp.net-mvc

razor

asp.net-core