ASP.NET Html.ListBoxFor 在页面加载时始终选择所有选项

Question

我正在构建一个非常简单的表单来编辑对象的属性。其中一个属性是与之关联的其他对象的列表，因此我使用的是两个列表系统：左侧是当前关联对象的列表，右侧是可用对象的列表加上;下面的添加和删除按钮将相关操作应用于相关列表中突出显示的项目。很简单。

一切正常，除了一件事：当页面加载时，两个列表中的所有项目都被选中，即使我在创建用于填充列表的项目时专门设置了Selected = false。这意味着如果用户提交表单时没有触及列表，“当前”列表中的所有内容都会被删除，而“可用”列表中的所有内容都会被添加。由于它们是多选列表框，因此没有可供用户选择的虚拟选项，因此这个问题迫使他们始终删除至少一个当前项目并添加至少一个可用项目。即使有一个虚拟项目，它也会强制用户去选择它，如果他们忘记了，他们的列表就会混乱。

[编辑添加：]

控制器方法的作用示例：

[HttpGet]
public ActionResult EditForm(int objectId)
{
    MyObject objectToEdit = _objectStore.GetObject(objectId);

    ObjectEditViewModel viewModel = new ObjectEditViewModel();
    viewModel.Object = objectToEdit;
    viewModel.AssociatedItemSelectList = objectToEdit.AssociatedItems.Select(o => new SelectListItem { Text = o.Name, Value = o.Id, Selected = false });
    viewModel.AvailableItemSelectList = _itemStore.GetAllItems().Where(o => !objectToEdit.AssociatedItems.Contains(o))
                                            .Select(o => new SelectListItem { Text = o.Name, Value = o.Id, Selected = false });

    return View(viewModel);
}

...视图只有

@Html.ListBoxFor(m => m.ItemsToAdd, Model.AvailableItemSelectList)

和

@Html.ListBoxFor(m => m.ItemsToRemove, Model.AssociatedItemSelectList)

在相关的地方。当页面加载时，选择列表框中的每个选项都具有以下形式：

<option selected="selected" value="281">Example Item</option>

在创建列表和呈现页面之间如何选择项目？我该如何阻止它？ 或者，如果做不到这一点，我如何在页面加载时立即取消选择它们，以便用户看起来好像他们开始未选择？ 我有一个修复程序可以使页面看起来像它应该的那样，但我想找到这个问题的根源。

Answer 1

这可能是一个迟到的回复，但我认为原因与列表框与它所引用的对象的绑定有关。例如，如果您要使用 ListBox 而不是 ListBoxFor 并给 ListBox 一个名称以便它不会绑定到任何东西，那么最初不会选择列表框中的项目。但是，如果您要给它起一个会导致它被绑定的名称，则将选择这些项目。我遇到了和你一样的麻烦，只是碰巧通过反复试验遇到了这个问题:-)

Answer 2

我遇到了同样的问题，并意识到在我的模型属性中我将所选项目设置为全部。 如果没有看到您的模型就很难知道发生了什么，但是请检查您对 ItemsToAdd 和 AvailableItemSelectList 的定义，并分别检查另一个列表，并确保您没有做任何 .在那里选择...ToList()。

public List<SelectListItem> AvailableItemSelectList{
get
{
    var items = //get your items from repository
    return items;
}
}

public List<string> ItemsToAdd{
get{ //make sure you are not setting anything here}
set{} 
}

Answer 3

您也可以这样做以取消选择页面加载时的所有列表框项目：

$(document).ready(function () {        

   $("#listbox").find("option").attr("selected", false);

});