对 Razor ASP.NET Core 页面客户端单选按钮的更改做出反应

【问题标题】：Reacting to changes in radio button on the client side of a Razor ASP.NET Core Page对 Razor ASP.NET Core 页面客户端单选按钮的更改做出反应
【发布时间】：2020-04-09 11:31:15
【问题描述】：

我正在尝试在 ASP.NET Core Razor 页面上制作一个单选按钮来控制另一个 UI 元素的外观，而无需往返服务器。

这是我正在尝试做的一个示例，但需要往返服务器。

运行程序如下：

以下是相关代码：

// Test.cshtml
<h3 style="color:@Model.Color">Hello in @Model.Color</h3>

<form method="post">
    <input type="radio" asp-for="Color" value="red" />Red<br />
    <input type="radio" asp-for="Color" value="green" />Green<br />
    <input type="radio" asp-for="Color" value="blue" />Blue<br />
    <input type="submit"/>
</form>

// Test.cshtml.cs
public class TestModel : PageModel {
    [BindProperty]
    public string Color { get; set; }
    public async Task<IActionResult> OnGetAsync() {
        return Page();
    }
}

为了使文本改变颜色，最终用户必须点击[提交]；我想避免它。请提出一个客户端解决方案。

【问题讨论】：

标签： c# .net asp.net-core razor-pages

【解决方案1】：

由于这将在客户端完成，因此您可以使用 javascript。

document.querySelector 和 document.querySelectorAll 用于从 DOM 中选择元素并使用 CSS 样式选择器进行操作。选择radio 按钮并向每个按钮添加一个onclick 事件。在onclick 事件中更新h3 样式和文本。

下面的 sn-p 使用纯 javascript。 jQuery 是我推荐用于此类任务的另一个好工具。

var radios = document.querySelectorAll('input[type=radio]');
for (radio in radios) {
    radios[radio].onclick = function() {
       var h3 = document.querySelector('h3');
       h3.style.color = this.value;
       h3.innerText = 'Hello in ' + this.value;
    }
}

<h3 style="color:@Model.Color">Hello in @Model.Color</h3>

<input type="radio" asp-for="Color" value="red" />Red<br />
<input type="radio" asp-for="Color" value="green" />Green<br />
<input type="radio" asp-for="Color" value="blue" />Blue<br />

【讨论】：