在 javascript 中访问时未更新 MVC 模型属性

Question

我的 cshtml 文件中有这个：

@for (var i = 0; i < Model.Vehicles.Count; i++){
@Html.CheckBoxFor(m => Model.Vehicles[i].Selected)}

基本上 Model.Vehicles 是车辆列表，Selected 属性是布尔值...

我有一个按钮，点击后会调用此函数：

function delSel(){
    var vehicles = '@Html.Raw(Json.Encode(Model.Vehicles))';
    var selIDs = "";
    for(var i = 0; i < vehicles.length; i ++)
    {
        if (vehicles[i].Selected == "true") {
            selIDs = selIDs + vehicles[i].ID + ",";
        }
    }
    document.getElementById('CRVehicleIDs').value = selIDs;
}

我的问题是，即使 Checkbox 被选中，Selected 属性的值总是等于 false... 这种情况下有没有更好的方法来获取选中的项？

Answer 1

var vehicles = '@Html.Raw(Json.Encode(Model.Vehicles))';

这不会像你期望的那样工作，剃刀语法是在服务器端呈现的，这意味着当用户点击复选框时，它的值不会得到更新。

但是，您可以做的是，当您创建复选框时，在 for 循环中使用 i 变量给它们一个 ID。

@Html.CheckBoxFor(m => Model.Vehicles[i].Selected, new { id = "checkbx_" + i })

然后您可以使用 for 循环遍历您的复选框。

function delSel(){
    var vehicles = @Html.Raw(Json.Encode(Model.Vehicles));
    var selIDs = "";
    for(var i = 0; i < vehicles.length; i ++)
    {
        if (document.getElementById('checkbx_' + i).checked) {
            selIDs = selIDs + vehicles[i].ID + ",";
        }
    }
    document.getElementById('CRVehicleIDs').value = selIDs;
}

Answer 2

您将 this.Model.Vehicles 渲染为 JSON，然后在 Javascript 单引号内渲染 - 这可能会在浏览器中访问时导致无效的 Javascript 语法，因为 JSON 对象属性名称也包含在引号中。

删除 @Html.Raw 周围的引号。

如果您查看页面呈现的 HTML 并发现其中很大一部分会被语法错误所覆盖，您就会发现这一点。

其他提示：

• JavaScript 通常在关键字的同一行使用左大括号进行样式设置（与 Java 一样），而不是下面的行（与 C# 一样）。对于 JavaScript 对象也习惯使用camelCase，而不是TitleCase。您应该能够自定义您的 JSON 生成器以使用 camelCase，请参阅文档。
• 布尔属性通常以Is 为前缀，所以它会是IsSelected（或isSelected 在驼峰式中）。

• 这是次优的：

  if( vehicles[i].Selected == "true" ) {
  

  假设Selected属性被渲染为Javascript布尔值，你只需要直接对其进行操作：

  if( vehicles[i].Selected ) {