Question

当通过Ajax提交时，我的selectedActiveRoles和selectedInactiveRoles不会作为我的viewmodel的一部分进入控制器，但我还没有找到任何具体的解决方法。我刚发布表格时工作正常。

我的表格：

@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>
                    &nbsp; &nbsp; &nbsp;
                    <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 &nbsp;<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;
        }

Answer 1

您没有向控制器发送任何有效数据，因为在$(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属性失败）
生成时没有添加第4个参数的点 SelectList - 它决定了什么的属性的价值被选中（您可以在第4个中放置您想要的任何值参数，您将看到它被ListBoxFor()忽略方法）

最后，删除$('#SelectedInactiveRoles, #SelectedActiveRoles').prop('selected', true);（没有任何意义，什么也不做）和控制器方法中的[Bind]属性。

ASP.NET MVC AJAX表单在提交/发布操作时提交丢失ListBoxFor / MultiSelectList

1 个答案: