asp.net - 剃刀页面 - 输入更改时更新标签

Question

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

标签： asp.netasp.net-mvcasp.net-coremodel-view-controllerrazor

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

剃刀页面

在您的启动中，添加

 services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

页面模型：

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

测试结果：