通过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个参数中添加-确定其选择内容的属性的值是毫无意义的(您可以在第4个参数中输入所需的任何值,并且该ListBoxFor()
方法会忽略该值)最后,从控制器方法中删除$('#SelectedInactiveRoles, #SelectedActiveRoles').prop('selected', true);
(这毫无意义,什么也不做)[Bind]
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句