ASP.NET MVC AJAX 表单 在提交/发布操作时提交丢失的列表框/多选列表
ASP.NET MVC AJAX Form Submit losing ListBoxFor/MultiSelectList on submit/post action
当通过Ajax提交时,我的selectedActiveRoles和selectedInactiveRoles没有作为我的视图模型的一部分进入控制器,我没有找到任何专门解决这个问题的东西。 当我刚刚发布表格时,它工作正常。
我的表格:
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "editForm", @class = "form-horizontal" }))
{
<div class="row">
<div id="dualListBoxContainer">
<div class="form-group">
<label class="col-xs-2 control-label">Available Roles:</label>
<div class="col-xs-8 input-group">
@Html.ListBoxFor(model => model.SelectedInactiveRoles, new MultiSelectList(Model.InactiveRoles, "RoleId", "Description", @Model.SelectedInactiveRoles), new { @class = "form-control", name = "inactiveRoles", multiple = "multiple", size = 5 })
</div>
</div>
<div class="form-group">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 text-center">
<button type="button" class="btn btn-sm btn-primary" id="addRole"> <i class="fa fa-arrow-down"></i> Add </button>
<button type="button" class="btn btn-sm btn-primary" id="removeRole"> Remove <i class="fa fa-arrow-up"></i> </button>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Active Roles:</label>
<div class="col-xs-8 input-group">
@Html.ListBoxFor(model => model.SelectedActiveRoles, new MultiSelectList(Model.ActiveRoles, "RoleId", "Description", @Model.SelectedActiveRoles), new { @class = "form-control", name = "activeRoles", multiple = "multiple", size = 5 })
</div>
</div>
<div class="form-group">
<div class="col-xs-8 col-xs-offset-2 text-right">
<button type="submit" class="btn btn-primary" id="saveChanges">Save Changes <i class="fa fa-save"></i></button>
</div>
</div>
</div>
</div>
}
型:
public class MyViewModel
{
public User User { get; set; }
public Client Client { get; set; }
public IEnumerable<Role> ActiveRoles { get; set; }
public IEnumerable<Role> InactiveRoles { get; set; }
public IList<int> SelectedActiveRoles { get; set; }
public IList<int> SelectedInactiveRoles { get; set; }
}
JS/JQuery:
$('#editForm')
.submit(function(e) {
e.preventDefault();
// modifies the 'selected' options on the list
// before finally being submitted by the browser
$('#SelectedInactiveRoles, #SelectedActiveRoles')
.prop('selected', true);
$.ajax({
url: $("#editForm").attr('action'),
type: 'post',
data: $(this).serialize(),
success: function() {
$("#modalContainer")
.fadeOut(500,
function() {
$("#modalContainer").empty();
});
}
});
});
控制器:
public ActionResult Edit([Bind] MyViewModel)
{
return null;
}
您没有向控制器发送任何有效数据,因为在 $(this).serialize(),
中,this
是 ajax 请求,而不是表单。您需要在 ajax 调用之前序列化表单数据
$('#editForm').submit(function(e) {
var formData = $(this).serialize();
....
$.ajax({
....
data: formData,
success: function() {
但是,您的代码还有许多其他问题。
您的ListBoxFor()
代码应该是
@Html.ListBoxFor(m => m.SelectedInactiveRoles,
new SelectList(Model.InactiveRoles, "RoleId", "Description"),
new { @class = "form-control", size = 5 }
)
- 添加
multiple="multiple"
没有意义,因为该方法已经添加它了。 - 没有必要添加
name= "inactiveRoles"
因为它确实如此绝对没有 - 检查您生成的 HTML,您将看到它的name="SelectedInactiveRoles"
,而不是name="inactiveRoles"
(幸运的是,否则你可以覆盖会导致模型绑定的name
属性失败) - 生成
SelectList
- 属性的值决定了什么被选中(您可以将您想要的任何值放在第 4 个参数,您将看到它被ListBoxFor()
忽略方法)
最后,从控制器方法中删除$('#SelectedInactiveRoles, #SelectedActiveRoles').prop('selected', true);
(它没有任何意义,也根本不做任何事情)和 [Bind]
属性。
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- ng在下拉列表和文本区域提交
- Netsuite Suitelet:在不达到治理限制的情况下,遍历事务行项目的列表加载和提交记录
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 如何修剪表单'提交'多级选择列表的值
- 提交youtube播放列表id并从id加载播放列表
- select2v4用于实时搜索-可以从下拉列表中选择或提交关键字
- 如何提交从列表中随机选择的非重复变量
- 在JavaScript中更改下拉列表索引后,ASP.Net提交按钮单击事件不起作用
- 提交带有已使用jQuery移动的列表框项目的隐藏字段
- 如何使用数据列表使用 JavaScript 提交表单
- 具有自动提交的类别下拉列表
- jquery - 自动完成如何强制从列表中选择或用户可以从列表中键入值并提交表单
- 提交后从选择下拉列表中自动选择选项的最佳方法
- 关闭模式而不提交列表器
- MailChimp Ajax 提交不会将订阅者添加到列表中
- 仅当选择特殊值时,才提交有关更改下拉列表的表单
- 使用 Javascript 从提交时的许多列表项中收集多个属性值
- 带有保存和提交按钮的 2 列表单,并尝试禁用提交按钮,直到表单完成
- Javascript 函数将输入值添加到数组,然后在第 5 次提交后生成列表