从复选框集合中返回一串选定值

Posted 2023-02-26

【中文标题】从复选框集合中返回一串选定值

【英文标题】：Returning a string of selected values from a checkbox collection

【发布时间】：2019-08-26 19:43:12

【问题描述】：

我正在构建一个 C# MVC 视图，其中包含一个带有一系列 4 个复选框的字段。我可以用值填充列表并很好地返回单个值，因此表单的基础知识似乎可以工作。以下是视图中选项的填充方式：

@for (int i = 0; i < Model.QuesOptions.Count; i++)

    <div>
        @html.HiddenFor(x => x.QuesOptions[i].Name)
        @Html.CheckBoxFor(x => x.QuesOptions[i].Checked)
        @Html.LabelFor(x => x.QuesOptions[i].Checked, Model.QuesOptions[i].Name)
    </div>

最终目标是返回发布时检查的每个项目的值的单个值列表（理想情况下以逗号分隔）。因此，当用户在表单上单击“提交”时，如果视图模型上的单个字段（称为“UserAnswer”）将填充逗号分隔的字符串，那就太好了。这甚至可以在视图模型上实现吗？

我曾希望，可能是空洞的希望，这种变化会起作用：

@Html.HiddenFor(model => model.Ques.UserAnswer, 
    new  Value = Model.QuesOptions.Where(x=>x.Checked).Select(x=>x.Name) )

或者这对于某种扩展方法或 HTML 助手来说是一项工作？

【问题讨论】：

您展示的示例有什么问题？你有错误吗？

@RufusL - 不幸的是，它没有返回错误，只是什么也没返回。我认为这些字段都返回为空。

@RufusL 实际上，它只返回一个内部引用：“System.Linq.Enumerable+WhereSelectListIterator`2[Survey.Models.Question2ViewModel,System.String]”

您可以使用一个简单的 javascript 函数来完成此操作，该函数遍历您的复选框以构建一个逗号分隔的字符串，然后在您的 html 表单中设置隐藏字段的值。如果您在提交时执行此操作，它应该会执行您想要完成的操作。

我希望避免使用 JavaScript 并且只在 Razor 中完成所有工作，但是经过太多的搜索和摆弄，JS 似乎是最好的选择。所以这就是我所做的。

【参考方案1】：

找不到在 Razor 本身中处理逗号分隔字符串的方法（可能存在一种方法，但我还没有找到），我选择了 JavaScript。以下代码将逗号分隔的列表插入到视图模型的隐藏字段中：

    function submitForm() 
    var question2 = "";
    for (i = 0; i <= 3; i++) 
        var trueOrNo = document.getElementById('Quez2Options_' + i + '__Checked').checked;
        if (trueOrNo) 
            question2 += document.querySelector('label[for="Quez2Options_' + i + '__Checked"]').innerHTML + ",";
        
    
    document.getElementById('Quez2_UserAnswer').value = question2.substring(0, question2.length - 1);

    var val3a = document.getElementById('Quez3a').value;
    var val3b = document.getElementById('Quez3b').value;
    var val3c = document.getElementById('Quez3c').value;
    var question3 = val3a + "," + val3b + "," + val3c;
    document.getElementById('Quez3_UserAnswer').value = question3;