ASP.NET MVC中获取用户选择的EmpMarks并计算总分的问题

问题根源 #

你原来的JavaScript代码混合了Razor服务器端循环，页面加载时就已经把初始的EmpMarks值硬编码进数组了，完全无法获取用户后续选择的单选框值。必须通过前端DOM操作实时获取选中值。

步骤1：修改视图，给单选框添加统一类名 #

给每个RadioButtonFor添加emp-mark-radio类，方便后续JS选择元素：

<tbody> 
@for (int i = 0; i < Model.First().KPIMarksVMList.Count(); i++) 
{ 
<tr>
     <td style="display:none;"> @Html.HiddenFor(model => model.First().KPIMarksVMList[i].KPIId) </td>
     <td width="60%"> @Html.DisplayFor(model => model.First().KPIMarksVMList[i].KPIName, new { htmlAttributes = new { @class = "form-control" } }) </td>
     <td>
       <div class="radio"> 
       @Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "1", new { @class = "emp-mark-radio" }) 1 
       @Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "2", new { @class = "emp-mark-radio" }) 2 
       @Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "3", new { @class = "emp-mark-radio" }) 3 
       @Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "4", new { @class = "emp-mark-radio" }) 4
       @Html.RadioButtonFor(model => model.First().KPIMarksVMList[i].EmpMarks, "5", new { @class = "emp-mark-radio", @checked = "Checked" }) 5 
       </div>
     </td>
</tr> 
} 
</tbody>
</table>

<input type="button" value="Check MarksRequest" class="btn btn-success" onclick="Calculation();" />

步骤2：编写正确的JavaScript计算函数 #

通过DOM选择器获取每个单选框组的选中值，存入数组并计算总分。同时把服务器端的参数（kpMarks、kpiCounts）通过Razor注入到JS中：

function Calculation() {
    // 从服务器端注入计算参数
    const kpMarks = @kpMarks;
    const kpiCounts = @Model.First().KPIMarksVMList.Count();
    const KpMarksPerQuiz = (kpMarks / kpiCounts) / 5;
    let kpiMarks = 0;
    
    // 获取所有单选框组的选中值，存入数组
    const myArray = [];
    // 根据name分组，每个KPI对应一组单选框
    const radioNames = new Set();
    document.querySelectorAll('.emp-mark-radio').forEach(radio => {
        radioNames.add(radio.name);
    });
    
    radioNames.forEach(name => {
        const checkedRadio = document.querySelector(`input[name="${name}"]:checked`);
        if (checkedRadio) {
            const mark = parseInt(checkedRadio.value);
            myArray.push(mark);
            // 计算单组分数并累加
            const k = KpMarksPerQuiz * mark;
            kpiMarks += k;
        }
    });
    
    // 输出结果
    console.log("选中的分数数组：", myArray);
    console.log("总分：", kpiMarks);
    // 可以在这里把结果展示到页面上，比如：
    // document.getElementById('totalMarks').textContent = kpiMarks.toFixed(2);
}

补充说明 #

• 这里通过单选框的name属性分组，因为每个KPI对应的单选框组name是唯一的，确保每组只取一个选中值。
• 注入的服务器端参数要确保是数值类型，Razor会直接输出对应的数字，不需要加引号。
• 如果需要把总分展示在页面上，可以添加一个元素（比如<div id="totalMarks"></div>），然后在函数里赋值。

内容的提问来源于stack exchange，提问作者Dev Beginner