如何在 Razor 页面中动态更改按钮属性？答案

【问题标题】：How to dynamically change Button Attr in Razor Page?如何在 Razor 页面中动态更改按钮属性？
【发布时间】：2022-01-22 13:15:57
【问题描述】：

我正在尝试获取一个按钮以在 MVC Razor 视图中的两种状态之间切换。

Startup.cs（配置防伪服务）

public void ConfigureServices(IServiceCollection services)
{
   services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
   services.AddControllersWithViews();
}

查看（使用 JS）

@Html.AntiForgeryToken()

<div class="row">
    <div class="col-4" style="background-color: none">
        <button id="ms1" class="btn btn-primary">Misc Buttons 1</button>
        <button id="ms2" class="btn btn-success">Misc Buttons 2</button>
    </div>

    <div id="UpdateButonStatusEvery2s" style="background-color: none">
        <button id="btnPause" class="btn btn-danger" value="Pause">Pause</button>
    </div>

    <div class="col-7" style="float: right; background-color: none">
        <button id="ms3" class="btn btn-info">Misc Buttons 3</button>        
        <button id="ms4" class="btn btn-success">Misc Buttons 4</button>
        <button id="ms5" class="btn btn-success">Misc Buttons 5</button>
        <button id="ms6" class="btn btn-danger">Misc Buttons 6</button>
    </div>
</div>

@section Scripts
{
    <script type="text/javascript">
        $("#btnToggle").click(function (e) {
            alert("test");
            var data = $(this).val();
            $.ajax({
                type: "POST",
                url: '../Home/OnPostTest/',
                data: { data: data },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                dataType: "json",
                success: function (response) {
                    if (response.result == "ToggleDanger") {
                        var newRow = '<button id="btnToggle" class="btn btn-success" value="Danger">Danger</button>';
                        $('#UpdateButonStatusEvery2s').html(newRow);
                    }
                    else if (response.result == "TogglePause") {
                        var newRow = '<button id="btnToggle" class="btn btn-danger" value="Pause">Pause</button>';
                        $('#UpdateButonStatusEvery2s').html(newRow);
                    }
                }
            });
        });
    </script>
}

控制器

public IActionResult OnPostTest(string data)
{
    string responseData;

    if (data == "Danger")
    {
        responseData = "TogglePause";
        return new JsonResult(new { result = responseData });
    }
    else if (data == "Pause")
    {
        responseData = "ToggleDanger";
        return new JsonResult(new { result = responseData });
    }

    return new JsonResult(null);
}

这样，它可以从initial "Pause" 按钮切换到"Danger" 按钮。但是，带有新危险按钮 HTML 的更新后的 div 无法识别按钮 ID，因为在单击 "Danger" btn 时根本不会触发 alert("test");。

基于这个post；但是，由于我不确定如何集成 PageModel，我选择了 onPostTest 的常规控制器，这可能是一个 XY 问题，但我们将不胜感激。

【问题讨论】：

标签： javascript c# html asp.net-core model-view-controller

【解决方案1】：

您可以尝试像这样更改您的js：

$("#btnToggle").click(function () {
            alert("test");
            var data = $(this).val();
            $.ajax({
                type: "POST",
                url: '../Home/OnPostTest/',
                data: { data: data },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                dataType: "json",
                success: function (response) {
                    if (response.result == "ToggleDanger") {
                        $('#btnToggle').removeClass('btn-danger');
                        $('#btnToggle').addClass('btn-success');
                        $('#btnToggle').html("Danger");
                        $('#btnToggle').attr("value","Danger");
                    }
                    else if (response.result == "TogglePause") {
                        $('#btnToggle').removeClass('btn-success');
                        $('#btnToggle').addClass('btn-danger');
                        $('#btnToggle').html("Pause");
                        $('#btnToggle').attr("value", "Pause");
                    }
                }
            });
        });

结果：

【讨论】：