我在 MVC razor 中生成了一个表单,用于在列表框(已分配和未分配)之间移动联系人。
我正在使用 jQuery<option>
在列表框之间移动元素,然后selected
在提交表单时使用属性绑定它们。
@model SiteAssignmentViewModel
@using (Html.BeginForm())
{
@Html.ListBox("AvailableContacts", new SelectList(Model.Contacts.Where(p => !Model.SelectedContactIDs.Contains(p.ID)), "ID", "FullName"))
<br />
<br />
<input type="button" value=">" onclick="MoveListBoxItems('AvailableContacts', '@Html.IdFor(m => m.SelectedContactIDs)');" />
<input type="button" value="<" onclick="MoveListBoxItems('@Html.IdFor(m => m.SelectedContactIDs)', 'AvailableContacts');" />
<br />
<br />
@Html.ListBoxFor(model => model.SelectedContactIDs, new SelectList(Model.Contacts.Where(p => Model.SelectedContactIDs.Contains(p.ID)), "ID", "FullName"))
<br />
<br />
<input type="submit" value="OK" onclick="BindListBoxItems('@Html.IdFor(m => m.SelectedContactIDs)');" />
}
<script>
function MoveListBoxItems(fromListBox, toListBox) {
$("#" + fromListBox).find("option:selected").appendTo($("#" + toListBox));
$("#" + toListBox).find("option").attr("selected", false);
}
function BindListBoxItems(listBox) {
$("#" + listBox).find("option").attr("selected", true);
};
</script>
完美使用 Chrome 时,您会看到在视图中选择的选项然后提交到服务器。
然而,在 Firefox 和 IE 中,该函数被调用,但在提交表单之前未附加 selected 属性。如果我将按钮类型更改为button
按预期选择所有选项(现在表单不会提交)。我尝试用以下相同的方法包装表单提交:
<input type="submit" value="OK" onclick="SubmitForm('@Html.IdFor(m => m.SelectedContactIDs)');" />
<script>
function SubmitForm() {
$("#" + listBox).find("option").attr("selected", true);
$("#contactsForm").submit();
}
</script>
这对 Firefox 中的行为没有任何影响,我在控制台上没有收到警告问题,也没有在服务器上收到任何绑定错误。使用元素检查器时,似乎在表单提交之前根本没有附加属性。
谁能解释这种行为以及如何解决它?