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

时间:2013-01-09 10:36:48

标签: c# asp.net asp.net-mvc razor asp.net-mvc-4

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

一切正常,除了一件事:当页面加载时,即使我在创建用于填充列表的项目时专门设置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>

如何在创建列表和呈现页面之间选择项目?我怎么阻止它? 或者,如果不这样做,我怎样才能在页面加载时立即取消选择它们,以便用户看起来好像它们未被选中?我有一个修复程序会使页面看起来应该是这样的,但是我想找到这个问题的根源。

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

我遇到了同样的问题,并意识到我在我的模型属性中将所选项目设置为所有项目。 很难看到你的模型知道发生了什么,但是检查你的 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{} 
}

答案 2 :(得分:0)

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

$(document).ready(function () {        

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

});