使用 TextBox 将数据（列表）从视图传递到控制器

Question

我正在使用带有剃须刀的 ASP MVC4，但我坚持将一些信息从我的视图返回到我的控制器，并在一个包含以下元素的列表中...... 我使用 TextBox 能够运行我的 js 函数... 我使用以下 (updatesum()) javascript 在字段中动态计算我认为射手得分的总和：

<td> 
    @Html.TextBox("suma["+@i+"]", Model[i].ArchScore1,  new{ @onchange = "updatesum()"})
    @Html.ValidationMessageFor(x => x[i].ArchScore1)
</td> 
<td>
    @Html.TextBox("sumb["+@i+"]", Model[i].ArchScore2, new { @onchange = "updatesum()" })
    @Html.ValidationMessageFor(x => x[i].ArchScore2)
</td>
<td> 
    @Html.TextBox("sumt["+@i+"]", Model[i].ArchTot`enter code here`alScore, new { @onchange = "updatesum()" })
    @Html.TextBoxFor(x=>x[i].ArchTotalScore)
    @Html.ValidationMessageFor(x => x[i].ArchTotalScore)
</td> 

<script type="text/javascript">
    function updatesum() {
        for (i = 0; i < 15; i++) {
            var sua = "suma_" + i + "_";
            var sub = "sumb_" + i + "_";
            var sut = "sumt_" + i + "_";
            suma = document.getElementById(sua).value;
            sumb = document.getElementById(sub).value;
            sum = (suma - 0) + (sumb - 0);
            document.getElementById(sut).value = sum;
        }   
    }        
</script>

你知道将这个javascript函数的结果添加到TextBoxFor中是否可行吗？

这是我修改后的代码：

<td> 

                    @Html.TextBoxFor(m => m[i].ArchScore1, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore1)
                </td> 
                <td>>
                    @Html.TextBoxFor(m => m[i].ArchScore2, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore2)
                </td>
                <td>
                    @Html.TextBoxFor(m => m[i].ArchTotalScore, new{ @class = "score" })
                    @Html.ValidationMessageFor(x => x[i].ArchTotalScore
                </td> 
            </tr>
        }

    </table>
    <p>
        <input type="submit" value="Save" />
    </p>
}

<script type='text/javascript'> 
              $('.score').change(function () {
                    var inputs = $(this).closest('tr').find('input');
                    inputs.eq(2).val(new Number(inputs.eq(0).val()) + new Number(inputs.eq(1).val()));
                });


</script>

第三个文本框仍未填充。

Answer 1

您可以使用以下脚本来更新行小计。给文本框一个类名（比如class="score"）

$('.score').change(function() {
  var inputs = $(this).closest('tr').find('input');
  inputs.eq(2).val(new Number(inputs.eq(0).val()) + new Number(inputs.eq(1).val()));
});

但是您的代码中还有多个其他错误。首先，您手动覆盖输入的名称，因此当您发布时它不会绑定到您的模型。您需要更换

@Html.TextBox("suma["+@i+"]", Model[i].ArchScore1)

与

@Html.TextBoxFor(m => m[i].ArchScore1, new { @class = "score" })

其他文本框也是如此

您的总计文本框不应该是文本框（或者如果是，那么它们应该被禁用），因此它们不会回发。如果您需要保存计算，必须在提交时在服务器上再次进行计算