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

Posted 2023-04-12

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

【英文标题】：Razor pages: How to dynamically change button properties (color,text) to reflect backend changes

【发布时间】：2021-05-10 13:37:03

【问题描述】：

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

假设我有一个基于 (success,danger) 后端状态的简单按钮，例如：

<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"？

【参考方案1】：

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

首先在你的启动中添加这段代码：

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

测试结果：

【讨论】：

大部分情况下都是这样。至少我完全能够根据您的出色回复得出完整的答案。我通过使用 setinterval 循环来增强它，并为按钮提供一个 id，以便可以单独处理多个按钮。再次感谢一个漂亮的解决方案。卡斯滕

【参考方案2】：

在c#中使用Task.ContinueWith()也可以实现类似的效果

例如：

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