Razor Pages：如何动态更改按钮属性(颜色、文本)以反映后端更改 [英] Razor pages: How to dynamically change button properties (color,text) to reflect backend changes

问题描述

在非Razor环境中使用简单的HTML、CSS和AJAX，很容易完成，但在Razor页面中？

假设我有一个基于后端状态(成功，危险)的简单按钮，如下所示：

<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后端使用id="UpdateButonStatusEvery2s"HTML片段进行响应？

推荐答案

您可以在剃须刀页面中尝试此代码。

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

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 Pages：如何动态更改按钮属性(颜色、文本)以反映后端更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！