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

Question

我正在尝试在 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();
    }
}

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

Answer 1

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

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

下面的代码段使用普通的 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 />