获取符合所选单选按钮的 TextBox 值 asp.net.mvc-4

Question

我需要创建一个带有表单的视图，其中有一组 RadioButton，每个表单都有 TextBox。然后我希望 Model 填充 TextBox 中的值和所选 RadioButton 中的值。我遇到了无法将 coresponding 的值发送到选定的 RadioButton TextBox.
的问题看起来像这样

这是我的模型

public class CertainAnswersViewModel
{
    public int SelectedValue { get; set; }
    public string TextAnswer { get; set; }
    public bool IsInput { get; set; }
    public List<CertainAnswer> CertainAnswers { get; set; }
}

查看

@using MY_BUKEP.Areas.Survey.Models;
@model CertainAnswersViewModel

@using (Html.BeginForm())
{
    foreach (var answer in Model.CertainAnswers)
    {
        @Html.RadioButtonFor(m => m.SelectedValue, answer.IdOption, new { id = "" })
        @Html.TextBoxFor(m => m.TextAnswer);
    <br />
    }
    <input type="submit" />
}

并且Controller中有两个方法

[HttpGet]
public ViewResult Test()
{
    CertainAnswer ca1 = new CertainAnswer() { IdOption = 1 };
    CertainAnswer ca2 = new CertainAnswer() { IdOption = 2 };
    CertainAnswersViewModel cavm = new CertainAnswersViewModel();
    cavm.CertainAnswers = new List<CertainAnswer>();
    cavm.CertainAnswers.Add(ca1);
    cavm.CertainAnswers.Add(ca2);
    return View("TestView", cavm);
}

[HttpPost]
public void Test(CertainAnswersViewModel cavm)
{
    Answer a = new Answer();
    a.val = cavm.TextAnswer;
    a.idOption = cavm.SelectedValue;
}

下面是我想达到的假设结果

非常感谢任何帮助！

Answer 1

您当前的实现是为相同的属性创建重复的文本框，当您提交表单时，只有第一个文本框的值将被绑定（如果用户要 select 第三个选项并填写关联的文本框，TextAnswer 的值将是 null 因为与第二个选项关联的文本框是空的。此外，您的模型无法生成您在第二个选项中显示的视图图片，因为每个 CertainAnswer 属性还需要一个值来指示是否需要关联的文本框（我假设某些选项可能不需要）。

您的模型需要是（不是我更改了一些 class 和属性名称以更好地描述它们所代表的内容）

public class PossibleAnswerVM
{
    public int ID { get; set; }
    public string Description { get; set; }
    public bool RequireAdditionalText { get; set; }
}
public class QuestionVM
{
    public int ID { get; set; }
    public string Description { get; set; }
    [Required(ErrorMesage = "Please select an option")]
    public int SelectedAnswer { get; set; }
    public string AdditionalText { get; set; }
    public IEnumerable<PossibleAnswer> PossibleAnswers { get; set; }
}

以及控制器中的代码

QuestionVM model = new QuestionVM()
{
    ID = 1,
    Description = "If you could return to the past, what would you choose?",
    PossibleAnswers = new List<PossibleAnswer>()
    {
        new PossibleAnswer(){ ID = 1, Description = "Apply to another university" },
        new PossibleAnswer(){ ID = 2, Description = "Apply to the same ...", RequireAdditionalText = true }
    }
};
return View(model);

和视图

@model QuestionVM
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.Question.ID)
    @Html.DisplayFor(m => m.Question.Description)
    foreach(var option in Model.PossibleAnswers)
    {
        <label>
            @Html.RadioButtonFor(m => m.SelectedAnswer, option.ID, new { id = "" data_textrequired = option.RequireAdditionalText })
            <span>@option.Description</span>
        </label>
    }
    @Html.ValidationMessageFor(m => m.SelectedAnswer)
    @Html.TextBoxFor(m => m.AdditionalText)
    <input type="submit" value="Save" />
}

请注意，已添加 data-textrequired，以便您可以使用 javascript 到 show/hide 基于 selected 选项的文本框。如有必要，您还可以使用 javascript 将文本框定位在 selected 选项附近

获取符合所选单选按钮的 TextBox 值 asp.net.mvc-4

Get TextBox's value in compliance with selected RadioButton asp.net.mvc-4

c#

asp.net

asp.net-mvc

html-helper

asp.net-mvc-4