如何正确使用模型绑定在 Razor Pages 中获取单选按钮值

Question

我在 razor 页面上有一组单选按钮，我想在提交表单后在我的服务器端代码中获取并使用这些单选按钮的选定值。 HTML 单选按钮：

<label><input class="boost_radio" onclick="boostNo(1)" asp-for="Boost_No.Number" type="radio" name="boostno" value=1 checked="checked" disabled="disabled" />1</label>
<label><input class="boost_radio" onclick="boostNo(2)" asp-for="Boost_No.Number" type="radio" name="boostno" value=2 disabled="disabled" />2</label>
<label><input class="boost_radio" onclick="boostNo(3)" asp-for="Boost_No.Number" type="radio" name="boostno" value=3 disabled="disabled" />3</label>
<label><input class="boost_radio" onclick="boostNo(4)" asp-for="Boost_No.Number" type="radio" name="boostno" value=4 disabled="disabled" />4</label>
<span asp-validation-for="Boost_No.Number"></span>

我正在使用模型绑定来获取服务器端的值：

public class BoostNo
{
    [Required(ErrorMessage = "Select Number of Boost Units!")]
    public int Number { get; set; }
}

这个class实例化如下：

[BindProperty]
public BoostNo Boost_No { get; set; }

不幸的是，每次我运行代码，我都会得到一个 Boost_No.Number = 0。我尝试将数据类型更改为字符串，但我只得到 string = null.

我正在尝试在分配给包含单选按钮的表单的处理程序方法中使用模型绑定变量。

如果有人能帮助我，我将不胜感激。谢谢。

编辑：

这是使用模型绑定的处理程序方法：

public IActionResult OnPostSubmit()
{
    //save data to sql db
    SaveData();

    //then some other unrelated stuff
}

和SaveData()方法：

public void SaveData()

{
    //stuff

    //now how the radio button values are actually used
    for (int param_i = 1; param_i <= Boost_No.Number; param_i++)
    {
          //...
    }
    //then a paramaterized sql database query
}

Answer 1

如果这些是单独的单选按钮，您应该对每个单选按钮进行单独绑定，因为现在您对每个单选按钮都使用相同的绑定。 (Boost_No.Number)。创建一个列表列表，然后绑定单个单选按钮 "Boost_No[0].Number" 或为每个属性创建不同的属性（您的选择）

Answer 2

您的所有无线电输入都设置为 disabled，因此在提交表单时不会在表单集合中传递任何值。从输入中删除 disabled（和 name）属性：

<label><input class="boost_radio" onclick="boostNo(1)" asp-for="Boost_No.Number" type="radio" value=1 checked="checked" />1</label>
<label><input class="boost_radio" onclick="boostNo(2)" asp-for="Boost_No.Number" type="radio"  value=2 />2</label>
<label><input class="boost_radio" onclick="boostNo(3)" asp-for="Boost_No.Number" type="radio"  value=3 />3</label>
<label><input class="boost_radio" onclick="boostNo(4)" asp-for="Boost_No.Number" type="radio"  value=4 />4</label>

Answer 3

这是我设置的一个最小示例，以使其正常工作。

这是我的剃刀页面句柄，我使用与您相同的 class 实现。

[BindProperty]
public BoostNo Boost_No { get; set; }

public IActionResult OnPost()
{
    return Page();
}

现在在 HTML

<label><input asp-for="Boost_No.Number" type="radio value=1 checked="checked"/>1</label>
<label><input asp-for="Boost_No.Number" type="radio" value=2/>2</label>
<label><input asp-for="Boost_No.Number" type="radio" value=3/>3</label>
<label><input asp-for="Boost_No.Number" type="radio" value=4/>4</label>

变化：

首先删除name属性。为什么？因为 asp-for 标签助手将为您创建一个 name 属性。除了提供 name 属性之外，您还为其赋予值 boostno，name 属性用于将该值绑定到模型，换句话说，您的 OnPost 句柄在任何地方都没有 boostno 参数可以绑定。
其次，如果输入字段是 disabled，则输入值将被忽略。我会在您提交表单之前仔细检查打开开发人员工具 (F12) 并仔细检查您的输入字段元素以确保它们没有被禁用，即使 UI 可能另有建议。

如何正确使用模型绑定在 Razor Pages 中获取单选按钮值

How to properly use Model Binding to get Radio Button value in Razor Pages

c#

asp.net

asp.net-core

razor-pages