Razor 页面：如何动态更改按钮属性（颜色、文本）以反映后端更改

Question

在具有简单 HTML、CSS 和 AJAX 的非 Razor 环境中，很容易完成，但在 Razor Pages 中？

假设我有一个基于后端状态（成功，危险）的简单按钮，例如：

<div id="UpdateButonStatusEvery2s">
  <button type="button" class="btn btn-success">Success</button>
</div>

我想在按钮中反映后端状态更改为“危险”

<div id="UpdateButonStatusEvery2s">
  <button type="button" class="btn btn-danger">Danger</button>
</div>

我该如何实现？

我想我必须运行 AJAX 中的常用 setinterval()，但是如何让 Razor 后端响应 HTML 片段 id="UpdateButonStatusEvery2s"?

Answer 1

可以使用 Task.ContinueWith()

从 c# 实现类似的效果

例如：

Task.Delay(2000).ContinueWith(x => Console.WriteLine("I'm back"));

Answer 2

您可以在您的 razor-page 中尝试此代码。

首先在您的启动中添加此代码：

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

然后在你的剃须刀里：

@page
@model ButtonDemoModel 
@Html.AntiForgeryToken()

<div id="UpdateButonStatusEvery2s">
    <button type="button" class="btn btn-success" value="success">Success</button>
</div>
@section Scripts
{
    <script>
        $("button").click(function (e) {
            var data = $(this).val();
            $.ajax({
                type: "POST",
                url: "?handler=test",
                data: { data: data },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                dataType: "json",
                success: function (response) {
                    if (response.result == "danger")
                    {
                        var newRow = '<button type="button" class="btn btn-danger" value="danger">' + response.result +'</button>';
                        $('#UpdateButonStatusEvery2s').html(newRow);
                    }
                }
            });
        });
    </script>
}

后端代码：

 public class ButtonDemoModel : PageModel
{
    public void OnGet()
    {
    }
    public IActionResult OnPostTest(string data)
    {
        //here you can change the data,do your logic.
        data = "danger";
        return new JsonResult(new { result = data });
    }
}

测试结果：

Razor 页面：如何动态更改按钮属性（颜色、文本）以反映后端更改

Razor pages: How to dynamically change button properties (color,text) to reflect backend changes

javascript

c#

asp.net-ajax

asp.net-core

razor-pages