仅从选中的单选按钮获取相关元素数据到数组

Question

我在学校使用 ASP.NET Core MVC 开发一个项目。我仍然很新手，所以如果这个信息在某个地方，我深表歉意，但我无法完全找到我正在寻找的东西，或者至少找不到我能理解的例子。我只是想弄清楚我正在尝试做的事情是否走在正确的轨道上。一些背景：

在服务器端，我有两种类型的对象：战斗员和遭遇战。战斗人员有 ID、姓名等。遭遇战有 ID、姓名和整数列表。 我正在从数据库中获取战斗对象列表。然后我将该列表传递给视图。到达那里后，我想动态显示列表中每个战斗员的姓名，以及每个战斗员的单选按钮。这个想法是用户将从所有显示的战斗员中只选择他们想要的战斗员。 做出这些选择后，我想获取所选战斗人员的 ID 属性并将它们存储在一个列表中，然后在最终将其存储在数据库中之前，该列表将用于为 Encounter 对象的整数列表设置种子。 我担心我在杂草中走得太远了，因为我不熟悉 JavaScript 以及从控制器和视图来回传递数据。所以我想我想知道我所做的是否有意义，或者我是否做错了。这是我的动态 HTML

<table class="table table-striped table-bordered mr-3 ml-3">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Select?</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Dynamic code for creating the table rows from the list -->
                    @foreach (var combatant in Model)
                    {
                        <tr>
                            <td>@combatant.CombatantName</td>
                            <td><input type="radio" id="@combatant.ID" [email protected]></td>
                        </tr>
                    }
                </tbody>
            </table>

我想我需要在客户端使用 JavaScript 来获取选中的单选按钮，然后创建一个列表来保存所选按钮的战斗员 ID 值。我能想到的唯一方法似乎很迟钝，但也许就是这样： 我获取从模型传递的战斗人员列表并将其转换为 JSON，然后可以在 JavaScript 中使用。当我动态创建 HTML 时，我将单选按钮元素的元素 ID 和值分配给战斗员。ID（如上面的代码所示）然后我遍历 JSON 化的战斗员列表 (comList) 以获取 ID 值然后只将选中的添加到新的战斗员数组中：

JavaScript

const combatants = [];
let comLen = comList.length
for (let i = 0; i < comLen; i++)
{
   let id = comList[i.ID]
   if(document.getElementById("id").checked)
   {
      combatants.push(getElementByID("id").value)
   }
}

然后我将该数组发送回控制器。我想我的后续问题是，如果到目前为止一切都合理，我如何将该数组返回到可以将其放入数据库的控制器？

Answer 1

我担心我在杂草中走得太远了，因为我相当 不熟悉 JavaScript 和来回传递数据 控制器和视图。所以我想我想知道我在做什么 感觉，或者如果我做错了。

实际上，无论您计划和描述的是什么，都完全有意义，并且也可以使用强类型类或 javascript 来实现。令人惊讶的是，你不需要了解 javascript 来实现你的实现，但如果你想确定地使用 javascript，那么你可以查看一些教程，因为有大量可用资源。

除此之外，@pcalkins所解释的也是正确的。因此，我向您展示了如何使用 viewModel 概念来实现它。

假设您有以下战斗员列表，并且您希望在提交给控制器后仅在服务器上获取选定的战斗员详细信息：

型号：

public class Combatant
    {
        public int ID { get; set; }
        public string? CombatantName { get; set; }
        public bool IsChecked { get; set; }
    }

注意：我使用 IsChecked 属性来过滤提交后的选定值。

查看模型：

 public class CombatantViewModel
    {
        public List<Combatant>? Combatants { get; set; }
    }

控制器：

public IActionResult Index()
        {
            var combatantVirtualList = new List<Combatant>()
            {
                new Combatant() { ID=1,CombatantName="Combatant-A", IsChecked = false },
                new Combatant() { ID=2,CombatantName="Combatant-B", IsChecked = false },
                new Combatant() { ID=3,CombatantName="Combatant-C", IsChecked = false },
                new Combatant() { ID=4,CombatantName="Combatant-D", IsChecked = false },
                new Combatant() { ID=5,CombatantName="Combatant-E", IsChecked = false },


            };

            var model = new CombatantViewModel();
            model.Combatants = combatantVirtualList;
            return View(model);
           
        }

注意：为了加载复选框列表，我播种了一些您将从数据库中提取的演示数据。

景色：

@model YourProjectName.ModelFolder.CombatantViewModel
@{
    ViewData["Title"] = "Combatant Check Box List";
}
<h4>Load Combatant And Post Selected List</h4>

<hr />
<form asp-action="SubmitCombatantSelectedValue" asp-controller="CheckboxSelectedValue" method="post">
    <table class="table table-striped table-bordered mr-3 ml-3">
        <tr>
            <th>Name</th>
            <th>Select?</th>

        </tr>

        @for (int i = 0; i < Model.Combatants?.Count; i++)
        {
            <tr>

                <td> @Model.Combatants[i].CombatantName</td>
                <td><input  asp-for="@Model.Combatants[i].IsChecked" /></td>
                <input type="hidden" asp-for="@Model.Combatants[i].ID" />
                <input type="hidden" asp-for="@Model.Combatants[i].CombatantName" />

            </tr>

        }
    </table>
    <button type="submit" class="btn btn-primary">Submit To Controller</button>
</form>

表单提交控制器：

        [HttpPost]
        public IActionResult SubmitCombatantSelectedValue(CombatantViewModel combatantViewModel)
        {
            var combatantSelectedValueFromView = combatantViewModel.Combatants?.Where(ifSelected=> ifSelected.IsChecked == true).ToList();

            return Ok(combatantSelectedValueFromView);
        }

注意：我正在使用 Linq 查询 来查找选定的复选框值。

输出：

注意：如果您想了解有关tag-helpers、ViewModel和LINQ Query的更多详细信息，您可以在这里查看我们的官方文档